body {
	margin: 0;
	padding: 0;
	font-size: 100%;
    height: 100vh;
    background-color:#019EE4;
    color: #fff;
    font-family: Arial;
}

#seniorInfo {
    width: 30%;
    background-color: #FF018E;
    height: 100vh;
    position: relative;
    margin-right: 0px;
    clear: right;
    display: inline-block;
    margin-top: -2%;
    padding-bottom: 2%;
    left: -2%;
}

#bioImage {
    background-color: #fff;
}

.seniorBioHead {
    width: 80%;
    position: relative;
    margin-bottom: 0%;
    left: 10%;
    display: flex;
    align-items: flex-end;
}

#seniorInfo h1 {
    text-align: center;
    font-size: 2em;
    margin: 5% 0% 4% 0%;
}

 #seniorInfo h2 {
     text-align: center;
     font-size: 1.5em;
     margin: 1% 0%;
 }

#seniorInfo p {
    font-size: 18px;
    padding: 0% 10% 0% 10%;
    margin-bottom: 0px;
    line-height: 30px;
}

#closeDesktop {
    font-size: 4em !important; 
    padding: 1%; 
    position: absolute;
    color: #fff;
    text-decoration: none;
    width: 5%;
    float: right;
    z-index: 100;
    top: 0;
    left: 90%;
}

#closeMobile {
    display: none; 
}
/* Work Structure */ 

.allWork {
    float: right; 
    width: 50%;
    position: relative;
    display: inline-block; 
    margin-top: 15%; 
    right: 5%; 
}

.allWork img {
    width: 30%; 
    height: auto; 
}

.spacing {
    margin-right: 2%;
}

.alignTop {
    vertical-align: top; 
}

.horizontalStack, #verticalImage {
    display: inline-block; 
}

.horizontalStack {
    margin-right: 3%;
}

.horizontalStack img {
    display: block;
    width: 100%;
    margin-bottom: 10%;
}

.sameSizeVertical { 
        width: 10%; 
        height: auto; 
}

#bio-para {
    background-color: #FF018E;
}

/* Senior Work Adjustments */ 

.annaWork img, .dylanWork img {
    width: 25%; 
}
 
.jayWork {
    width: 20%;
    margin-top: 2%;
    margin-right: 20%;
}

.joshWork {
    margin-top: 7%; 
}

@media screen and (min-width: 2022px) {
    
    #seniorInfo h1 {
        font-size: 3em;
    }

     #seniorInfo h2 {
         font-size: 2em;
     }

    #seniorInfo p{
        font-size: 20px;
        line-height: 35px;
    }
    
    #closeDesktop {
        top: 5%; 
    }
    
    .pullUp {
        margin-top: -40%;  
    }
    
    /* Work Structure */ 

    .allWork { 
        margin-top: 10%; 
        right: 10%; 
    }

    .allWork img {
        width: 45%; 
        height: auto; 
    }

    .spacing {
        margin-right: 0;
    }

    .horizontalStack {
        margin-right: 17%;
    }

    .horizontalStack img {
        width: 130%;
    }
    
    .sameSizeVertical {
        width: 30%; 
        padding-left: 2%;
        margin-top: 5%; 
    }
    
    .joshWork3 {
        margin-left: -10%; 
    }
    
    .annaWork img, .dylanWork img {
        width: 30%; 
    }
    
    .jayWork {
        margin-top: 6%; 
    }
}

@media screen and (max-width: 1890px) {
    
    .annaWork, .dylanWork {
        margin-right: 5%; 
    }
    
    .annaWork img, .dylanWork img {
        width: 30%; 
        margin-top: -5%; 
    }
    
    .jayWork {
        width: 25%;
        margin-top: 3%; 
    }
}

@media screen and (max-width: 1300px) {
    /* Work Structure */ 

    .allWork { 
        margin-top: 20%; 
        right: 10%; 
    }

    .allWork img {
        width: 35%; 
        height: auto; 
    }

    .horizontalStack {
        margin-right: -5%;
    }

    .horizontalStack img {
        width: 85%;
    }
    
    /* Senior Adjustments */ 
    
    .dylanWork, .annaWork {
        margin-top: 7%; 
    }
    
    .joshWork3 {
        width: 45% !important; 
        margin-left: 3%; 
    }
    
    .jayWork {
        width: 30%;
        margin-top: -1%; 
    }
    
    .joshWork {
        margin-top: 7%; 
    }
     
    #joshParagraph {
    font-size: 12px !important; 
    }

}

@media screen and (max-width: 1045px) { /* TABLET STARTS AND MOBILE CLOSE IS HERE */ 

    #seniorInfo p {
        font-size: 15px;
    }

    /* Work Structure */ 

    .allWork { 
        margin-top: 5%; 
        right: 10%; 
    }

    

    .horizontalStack img {
        width: 71%;
    }
    
    .sameSizeVertical {  
        padding-bottom: 8%; 
        margin-top: 40%;
    }
    
    /* Senior Adjustments */ 
    
    .jayWork {
        width: 45%;
        margin-top: 10%;
        left: 8%;
    }
}

@media screen and (max-width: 991px) {
    #closeDesktop {
        display: none; 
    }
    
    #closeMobile {
        display: block; 
        font-size: 4em !important; 
        padding: 1%; 
        position: absolute;
        color: #333;
        text-decoration: none;
        width: 5%;
        float: right;
        z-index: 100;
        top: 20px;
        left: 80%;
    }
}

@media screen and (max-width: 899px) {
    #seniorInfo {
        width: 100%;
        margin-right: 0px;
        margin-top: -5%;
        left: 0;
        padding-bottom: 26%;
    }
    
    #seniorInfo p {
        line-height: 30px;
    }
    /* Work Structure */ 

    .allWork {
        right: 37%; 
    }

    .allWork img, .horizontalStack {
        width: 150%; 
        height: auto; 
    }

    .jayWork {
        width: 31%;
        margin-top: 10%;
        margin-right: auto;
        margin-left: auto;
        left: -55%;
    }
    
    .ryanWork1, .ryanWork2, .karisWork1, .karisWork2, .anthonyWork1, .anthonyWork2, .reneeWork1, .reneeWork2, .ericWork1, .ericWork2, .paigeWork1, .paigeWork2 {
        width: 100% !important; 
    }
    
    .dylanWork, .annaWork {
        margin-right: auto; 
        margin-left: auto; 
    }
}

@media screen and (max-width: 699px) {
    #seniorInfo {
        padding-bottom: 0; 
    }
    /* Work Structure */ 

    .sameSizeVertical { 
        padding-bottom: 10%;  
    }
}

@media screen and (max-width: 499px) {

    /* Work Structure */ 

}

@media screen and (max-width: 319px) {
    /* Work Structure */ 

}