/* CSS for the mobile view */
main {
    background-color: #1b1a17;
    border: 1px solid black;
}
h1,h2,h3, p {
    color: #FFCB05;
}
#aaron {
    padding-bottom: 5px;
}
#about p {
    text-align: left;
    margin: 16px auto;
}
#person {
    position: relative;
}
.bubbles{
    align-items: center;
}
.bubble ul{
    text-align: center;
}
.download {
    text-align: center;
    border: black solid 1px;
    color: #FFCB05;
    background: #00274C;
    border-radius: 15px;
    padding: 5px 10px 5px 10px;
    margin: 2px auto 2px auto;
    height: 30px;
    /* width: min-content; */
    width: max-content;
 }
.title h2 {
    display: none;
}
.pad {
    margin-bottom: 25px;
}
li {
    color: #FFCB05;
}
main {
    border: 1px solid black;
}

/* CSS for the tablet view */
@media screen and (min-width:600px) {
    #pic {
        min-width: 200px;
        width: 40%;
        margin: 1em;
        margin-left: 0px;
        border: 1em;
        padding: 1em;
        padding-left: 0px;
        float: left;
        /* shape-outside: polygon(0% 0%, 60% 3%, 61% 45%, 100% 80%, 60% 99%, 6% 100%); */
    }
    #about {
        margin: 0% 5% 0% 5%;
        min-height: 358px;
    }
    .bubbles {
        display: flex;
        flex-direction: column;
    }
    .bubble {
        padding: 30px 0px 30px 0px;
        height: 300px;
        width: 300px;
        background-color: #FFCB05;
        border: solid 1px black;
        border-radius: 50%;
        margin-bottom: 15px;
    }
    .bubble h2 {
        visibility: hidden;
        font-size: 1px;
        color: #FFCB05;
    }
    .bubble ul {
        position: relative;
        text-align: left;
        margin-left: 40%;
        visibility: hidden;
        font-size: 1px;
    }
    li {
        color: #00274C;
    }

    .title {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background-color: #00274C;
        position: relative;
        top: -13%;
    }
    .title h2 {
        display: inline-block;
        visibility: visible;
        position: relative;
        top: 140.15px;
        font-size: 18px;
        color: #FFCB05;
        transition: 0s visibility;
    }

    #skills .title h2 {
        top: 139.65px;
        left: 126.485px;
    }
    #languages .title h2 {
        top: 139.65px;
        left: 102.49px;
    }
    #technologies .title h2 {
        top: 139.65px;
        left: 93.66px;
    }
    #libraries .title h2 {
        top: 129.305px;
        left: 96.97px;
    }
    #libraries h2 {
        top: 90.305px;
    }
 }

 /* CSS for the desktop view */
 @media screen and (min-width:900px) {
    #pic {
        height: 255px;
        margin-left: 5%;
    }
    #aaron {
        height: 255px
    }
    .pad {
        height: 288px;
        margin-right: 5%;
    }
    .bubbles {
        display: grid;
        grid-template-columns: 50% 50%;
        justify-items: center;
    }
    #about {
        margin-bottom: 45px;
    }
 }

 
 @media screen and (min-width:1200px) {
    #pic {
        margin-left: 8%;
    }
    .pad {
        margin-right: 8%;
    }
 }