main{
    display: grid;
    grid-template-areas: 
    'nav joe np rob'
    'nav zubin andrew ross';
    margin-right: 10%;
    justify-content: center;
    font-weight: bold;
}
.joe{
    grid-area: joe;
    position: relative;
}
.np{
    grid-area: np;
    position: relative;
}
.rob{
    grid-area: rob;
    position: relative;
}
.zubin{
    grid-area: zubin;
    position: relative;
}
.andrew{
    grid-area: andrew;
    position: relative;
}
.ross{
    grid-area: ross;
    position: relative;
}
#navimg{
    width: 10vw;
    height: fit-content;

}
.gridimg{
    width: 100%;

}
#joe:hover,#rob:hover,#zubin:hover,#ross:hover,#andrew:hover, .gridlabel:hover{
    cursor: pointer;
}
.nav{
    grid-area: nav;
    width: 10vw;
    display: block;
}
main > * {
    display: flex;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 8px;
    margin-top: 2px;
}
.gridlabel{
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-family: arial;
    text-wrap: nowrap;
    font-size: 2vw;
}
#np{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-family: arial;
    text-wrap: nowrap;
    font-size: 1.25vw;
}
.navbutton{
    background-color: black;
    color: white;
    font-family: arial;
    font-size: 1.5vw;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    width: 100%;
    margin-top: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
.controlbutton{
    position: absolute;
    top: 70%;
    left: 29%;
    transform: translate(-50%, -50%);
    background-color: black;
    color: white;
    font-family: arial;
    font-size: 1.5vw;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    width: 40%;
    margin-top: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
#pause{
    left: 71%;
}
#pause:hover, .controlbutton:hover{
    background-color: white;
    color:black;
    cursor: pointer;
}
.navbutton:hover{
    cursor: pointer;
}
@media screen and (min-width: 600px) and (max-width: 1199px){
   main{
    display: grid;
    grid-template-areas: 
    'nav nav nav'
    'joe np rob'
    'zubin andrew ross';
    margin-right: auto;
} 
.nav{
    grid-area: nav;
    width: 95vw;
    display: flex;
    
}
.navbutton{
    margin-top: 5px;
    margin-left: 10px;
    font-size: 2.1vw;
}
#np{
    font-size: 2vw;
}
.controlbutton{
    font-size: 2vw;
}
.gridlabel{
    font-size: 3vw;
}
}
@media screen and (max-width: 599px){
       main{
    display: grid;
    grid-template-areas: 
    'np'
    'nav'
    'joe' 
    'rob'
    'zubin'
    'andrew'
    'ross';
    margin: auto;

} 
.nav{
    grid-area: nav;
    width: 95vw;
    display: flex;
    flex-wrap: wrap;
    margin:auto;
    margin-bottom: 4px;
}
.navbutton{
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    margin-left: 3px;
    width: 40vw;
    height: 15vw;
    width: 45%;
    font-size: 6vw;
}
main > * {
    display: flex;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
#navimg{
    display: none;

}
#np{
    font-size: 6vw;
}
.controlbutton{
    font-size: 6vw;
}
.gridlabel{
    font-size: 8vw;
}
}