* {
    margin: 0;
    color: white;
    font-family: "quicksand", sans-serif;
}

body {
    overflow-x: hidden;
    background-color: #EBCFB2;
}

#topBar {
    height: 10vh;
    position: fixed;
    top: 0;
    width: 100vw;
    background-color: white;
    z-index: 101;
}
.navButtonClass {
    width: 5vh;
    height: 5vh;
    border: solid black 0.4vw;
    border-radius: 100%;
    padding: 2vh;

}

.navButtonClass > a {
    width: 100%;
    height: 100%;
}
.navButtonClass > a > img{
    width: 100%;
    height: 100%;
}

#navigation {
    position: fixed;
    right: 2vh;
    display: grid;
    place-items: center;
    width: 10vh;
    height: 10vh;
    transition: 0ms;
    z-index: 300;
    top: 0;
}

#navigation:hover {
    height: 30vh;
    width: 40vh;
    right: -13.1vh;
    top: -10vh;
}

#navButton {
    position: fixed;
    z-index: 10;
    background-color: #172121;
    width: 5vh;
    height: 5vh;
}

#navButton > img {
    width: 100%;
    height: 100%;
}

#nav1 {
    position: fixed;
    z-index: 9;
    transition: transform 800ms;
    background-color: #172121;
}
#nav1 > a {
    position: relative;
    left: 15%;
}
#nav1 > a > img {
    width: 70%;
}

#navigation:hover > #nav1 {
    transform: rotate(-360deg) translate(-12vh) rotate(360deg);
}

#nav2 {
    position: fixed;
    z-index: 8;
    transition: transform 800ms;
    background-color: #172121;
}

#navigation:hover > #nav2 {
    transform: rotate(-360deg) translate(-9vh, 10vh) rotate(360deg);
}

#nav3 {
    position: fixed;
    z-index: 7;
    transition: transform 800ms;
    background-color: #172121;
}

#navigation:hover > #nav3 {
    transform: rotate(-360deg) translate(2vh, 12vh) rotate(360deg);
}


.sideBars {
    background-color: #172121;
    z-index: 200;
    height: 302vh;
    width: 5vw;
    position: absolute;
    top: 0;
}
#leftBar {
    left: 0;
}
#rightBar {
    right: 0;
}

#fullIntro {
    width: 75vw;
    margin-left: 12.5vw;
    margin-right: 12.5vw;
    background-color: #4281A4;
    border-radius: 10%;
}

#headerBox {
    height: 10vh;
    margin-top: 20vh;
    width: 75vw;
    display: grid;
    place-items: center;
}

header {
    margin-top: 4vh;
    font-size: 6vw;
    font-family: "decoy", sans-serif;
}

#intro {
    height: 71vh;
    width: 75vw;


}
#intro > p {
    color: white;
    font-size: 6vw;
    padding-right: 5vw;
    padding-left: 5vw;
    padding-top: 5vh;
}
#employees {
    padding-left: 8vw;
    padding-right: 8vw;
    width: 80vw;
    height: 200vh;
    display: grid;
    grid-template-areas: 
    
    "a"
    "b"
    "c"
    "d"
    
    ;
}

#profile1 {
    grid-area: a;
}
#profile2 {
    grid-area: b;
}
#profile3 {
    grid-area: c;
}
#profile4 {
    grid-area: d;
}

.filler {
    height: 15vh;
}

.profileText {
    width: 50vw;
    height: 10vh;
    left: 35vw;
    position: absolute;
    z-index: 100;
    background-color: #85C7De;
}


#profile1Text {
    top: 133vh;
}
#profile2Text {
    top: 183vh;
}
#profile3Text {
    top: 233vh;
}
#profile4Text {
    top: 283vh;
}   


.profileText > h3 {
    text-align: center;
    padding-top: 2vh;
    font-family: "decoy", sans-serif;
    
}
.profileText > p {
    text-align: center;
    padding-top: 2vh;
}
.profilePic {
    display: grid;
    place-items: center;
}
.profilePic > img {
    position: relative;
    height: 35vh;
    aspect-ratio: 3/4;
    border-radius: 7%;
    object-fit: cover;
}

#switches {
    display: none;
}


@media only screen and (min-width:400px) {
    #fullIntro {
        border-radius: 15%;
    }
}
@media only screen and (min-width:510px) {
    #intro  > p{
    font-size: 4vw;
    }
    .profileText {
        width: 35vw;
        left: 40vw;
    }
}

@media only screen and (min-width:760px) {
    body {
        overflow-y: hidden;
    }
    #fullIntro {
        width: 37.5vw;
        border-radius: 0%;
    }
    
    #headerBox {
        width: 37.5vw;
    }
    #intro {
        width: 37.5vw;
    }
    #intro > p {
        font-size: 2.3vw;
    }
    #employees {
        position: absolute;
        right: 0;
        top: 20vh;
        padding-left: 0;
        padding-right: 0;
        margin-right: 12.5vw;
        width: 37.5vw;
        height: 80vh;
        display: grid;
        grid-template-areas: 
        
        "a"
        "b"
        ;
    }

    #profile1 {
        grid-area: a;
    }
    #profile2 {
        grid-area: b;
    }
    #profile3 {
        display: none;
    }
    #profile4 {
        display: none;
    }
    
    .filler {
        height: 10vh;
    }
    
    .profileText {
        width: 25vh;
        height: 10vh;
        left: 60vw;
        position: absolute;
        z-index: 100;
        background-color: #85C7De;
        margin-right: 25vw;
    }
    
    
    #profile1Text {
        top: 45vh;
    }
    #profile2Text {
        top: 85vh;
    }
    #profile3Text {
        display: none;
    }
    #profile4Text {
        display: none;
    }   
    
    
    .profileText > h3 {
        text-align: center;
        padding-top: 2vh;
        
    }
    .profileText > p {
        text-align: center;
        padding-top: 1vh;
    }
    .profilePic {
        display: grid;
        place-items: center;
    }
    .profilePic > img {
        position: relative;
        height: 30vh;
        aspect-ratio: 3/4;
        border-radius: 7%;
        object-fit: cover;
    }
    #switches {
        position: absolute;
        display: block;
        top: 12.5vh;
        width: 15vh;
        height: 5vh;
        right: 23vw;
    }
    .switch {
        width: 5vh;
        aspect-ratio: 1/1;
        border-radius: 100%;
        margin-right: 1vh;
        float: left;
    }
    #switch1 {
        background-color: #4281A4;
    }
    #switch2 {
        background-color: #85C7De;
    }
}

@media only screen and (min-width:1080px) {
    body {
        overflow-y: hidden;
    }
    #fullIntro {
        width: 27.5vw;
        border-radius: 0%;
    }
    
    #headerBox {
        width: 27.5vw;
    }
    header {
        font-size: 8vh;
    }
    #intro {
        width: 27.5vw;
    }
    #intro > p {
        font-size: 3vh;
    }
    #employees {
        position: absolute;
        right: 0;
        top: 20vh;
        padding-left: 0;
        padding-right: 0;
        margin-right: 5vw;
        width: 50vw;
        height: 80vh;
        display: grid;
        grid-template-areas: 
        
        "a c"
        "b d"

        ;
    }

    #profile1 {
        grid-area: a;
    }
    #profile2 {
        grid-area: b;
    }
    #profile3 {
        display: block;
    }
    #profile4 {
        display: block;
    }
    
    .filler {
        height: 10vh;
    }
    
    .profileText {
        position: absolute;
        z-index: 100;
        background-color: #85C7De;
        margin-right: 0;
        margin-left: 10vw;
    }
    
    
    #profile1Text {
        top: 45vh;
        left: 45vw;
    }
    #profile2Text {
        top: 85vh;
        left: 45vw;
    }
    #profile3Text {
        top: 45vh;
        left: 70vw;
        display: block;
    }
    #profile4Text {
        top: 85vh;
        left: 70vw;
        display: block;
    }   
    
    
    .profileText > h3 {
        text-align: center;
        padding-top: 2vh;
        
    }
    .profileText > p {
        text-align: center;
        padding-top: 1vh;
    }
    .profilePic {
        display: grid;
        place-items: center;
    }
    .profilePic > img {
        position: relative;
        height: 30vh;
        aspect-ratio: 3/4;
        border-radius: 7%;
        object-fit: cover;
    }
    #switches {
        display: none;
    }
}