body{
    background-image: url(img/wood.jpg);
    background-color: rgba(255, 255, 255, 0.493);
    background-blend-mode: lighten;
    overflow-x: auto;
    overflow-y: scroll;
}

#mainImg{
    position: absolute;
    top: 0px;
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    z-index: -5;
}

.workImg{
    max-height: 100%;
    max-width: 100%;
    display: block;
    left: 50%; 
    top: 50%;
    transform:translateX(-50%) translateY(-50%);
    object-fit: cover;
} 

.imgContainer{
    width: 100%;
    height: auto;
    
}

.carde{
    background-color: white;
    height: 100%;
    
}

.descButton{
    background-color: #60858E;
}

.descButton:hover{
    background-color:  #60858E;
}

.descButton:active{
    background-color:  #60858E !important;
}


.toCenter{
    left: 50%; 
    top: 50%;
    transform:translateX(-50%) translateY(-50%);
}

.toLeft{
    left: 0%; 
    top: 50%;
    transform:translateY(-50%);
}

.toRight{
    right: 0%; 
    top: 50%;
    transform:translateY(-50%);
}

.respWidth{
    width: 512px;
}

.respMaxWidth{
    max-width: 512px;
}

.viewer{
    max-height: 90vh;
}

.thumbnail{
    height: 95%;
    aspect-ratio: 1;
    object-fit: contain;
    background-color: lightgray;
    opacity: 0.5;
}

.active{
    opacity: 1;
}

@media screen and (max-width: 1080px) {
    .respWidth{
    width: 300px;
}

.respMaxWidth{
    max-width: 300px;
}
}