#mainBody{
    display:flex;
    justify-content: space-evenly;
}
#sidebar{
    padding:1rem;
    margin:1rem;
    height:min-content;
    background-color: rgb(28, 30, 31);
    min-width:10rem;
    max-width:17rem;
    width:100%;
    color: white;
    border:white;
    border-style:solid;
    position: sticky;
     top: 3rem;
}
#sidebar h2{
    font-size:2rem;
}

#main-content{
    margin:1rem;
    max-width:80rem;
}


#quotes{
    background-color:black;
    padding:.7rem;
}

#quotes h3{
    font-size:1.5rem;
    color:rgb(184, 184, 184);
    margin:0;
    margin-bottom:0.5rem;
}
#quote{
    margin:0;
    font-weight:500;
}
#quoteAuthor{
    margin:0;
    font-size:0.9rem;
    color:rgb(184, 184, 184);
}



.vimeoPlayer{
    width:100%;
    height:100%;
    /* display:block; */
    border-style:none;
}
.vimeoDesc{
    position:absolute;
}


/* Project listings for homepage. */
#projectListings{
    display:flex;
    flex-direction:column;
    justify-content: center;
    column-gap:var(--gridColGap);
}



.listingInfo{
    position:absolute;
    z-index: 1;
    padding:1rem;
    background-color:var(--transparentBackground);
    margin:1rem;
    align-self: end;
}

/* stop being on top at around 850px */

.listingInfo h3{
    margin-top:0;
    font-family: "Bai Jamjuree", serif;
    font-weight:400;
    font-size:2rem;
}




.listingInfo p{
    margin-bottom:0;
    
}


.floatingListing:hover .navButton, .floatingListing:focus .navButton{
    color:var(--hoverHightlight);
    outline-color:var(--hoverHightlight);
}



.floatingListing:not(:hover):not(:focus) .repeatText {
    right:0 !important;
    left:0 !important;
}



.floatingListing{
    display:grid;
    align-content: center;
    text-align:center;
    color:white;
    justify-content: center;
    position:relative;
    text-decoration:none;
}

.listingBox{
    width:75%;
    height:75%;
    border-style:solid;
    border-width:0.1rem;
    border-color:var(--orangeHighlight);
    position:absolute;
    align-self:center;
    justify-self:center;
}

.floatingListing:hover .listingBox, .floatingListing:focus .listingBox{

    border-color:var(--hoverHightlight);
}


.floatingListing .listingInfo{
    align-self:end;
    justify-self:center;
    max-width:90%;
    margin:0;
}

.floatingListing .imgContainer{
    transition-duration:0.5s;
    position:relative;
    bottom:0rem;
    opacity:0.6;
    transition-property: bottom,opacity;
    
}

.floatingListing:hover .imgContainer, .floatingListing:focus .imgContainer{
    bottom:0.5rem;
    opacity:1;
}

@media (width<=53.125rem){
    .listingInfo h3{
        font-size:1.5rem;
    }
    .listingInfo{
        position:relative;
        text-decoration:none;
    }
}

@media (width<=40.625rem){
    
    
}