/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
 * HTML content. To learn how to do something, just try searching Google for questions like
 * "how to change link color." */

body {
    background-color: black;
    color: white;
    font-family: Arial;
}

#upbar1 {
    width:1000px;
    border-style: solid;
    background-color: white;
    color:black;
    border-color:white;
    padding: 5px;
    padding-left: 75px;
    margin: auto;
    margin-top: 50px;
    margin-bottom:0px;
    text-align: right;
    font-weight: bold;

}

.main {
    width:1080px;
    height:1050px;
    border-style: solid;
    margin: auto;
    margin-bottom:50px;
    word-break: break-word;
}


#main_01 {

    font-weight: normal;
    text-align: center;

}

#dots {
    font-size: 50px;
    letter-spacing: 20px;
}

#musicplayer {
    font-size: 15px;
    font-weight: normal;
    line-height: 0.2;
}

#main_02 {
    height: 120px;
    width:100%;
    text-align: center;
}

#PAEC {
    margin:10px;
}

.aboutme {
    position:absolute;
    top:130px;
    left: calc(50% - 630px);
    text-align: center;
    width:460px;
    height:320px;
    border-style: solid;
    background-color: black;
}

.aboutme p {
    text-align:left;
    padding-left:20px;
}

.aboutme img {
    margin-top:15px;
    width:220px;
    float:right;
}

#name {
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    line-height: 0;
}

#pronouns {
    text-align: center;
    font-weight: normal;
    line-height: 0;
}

#about_button {
    position:absolute;
    left:10%;
    width:40%;
    text-align: center;
    font-weight: bold;
    border-style: solid;
    color:black;
    background-color: white;
    border-radius: 15px;
}

.upbar2 {
    border-style: solid;
    background-color: white;
    color:black;
    border-color:white;
    text-align:right;
    font-weight: bold;
}


.featured {
    position:absolute;
    top:130px;
    left: calc(50% + 10px);
    border-style: solid;
    margin: auto;
    margin-left:160px;
    background-color: black;
    padding:0px;
}


.featured img {
    width: 400px;
    height: 600px;
}

#featured-button {
    border-style: solid;
    background-color: white;
    color:black;
    border-color:white;
    text-align:left;
    font-weight: bold;
}






/* MOBILE */

@media (max-width: 1040px) {

    #upbar1 {
        width:92%;
    }

    .main {
        width:100%;
        height:1050px;
        border-style: solid;
        margin: auto;
        word-break: break-word;
    }

    .aboutme {
        position:absolute;
        top:130px;
        left: 5%;
        z-index: 2;
    }

    .featured {
        top:190px;
        left: calc(30% + 30px);

    }
}