:root{
    --mynerve-font:'Mynerve', cursive;
    --light-color:#f9f9f9;
    --dark-color:#20262E;
}

body,
html{
    height: 100%;
    width: 100%;
}
h1{
    font-family: var(--mynerve-font)
}
.text-center{
    text-align: center;
}
html{
    overflow: hidden;
}
body{
    background-color: var(--dark-color);
    color:var(--light-color);
    overflow:auto;
    margin: 0;
    padding: 0;
}
img{
    width: 600px;
}
/*
* Image Comparison
*/
.img-comparison-container{
   margin: auto;
   width: 80vw;
   height: 37vh;
   display: flex;
   position:relative;
}
.img-comparison-container>.img-comparison-item{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    overflow: hidden;
    transition: all .1s ease-in-out;

}
.img-comparison-container>.img-comparison-item>img{
    height: 37vh;
    width: 80vw;
    object-fit: cover;
    object-position: center center;
    position:absolute;
    top:0;
    left:0;
}
.img-comparison-container>.img-comparison-item:nth-child(1){
    z-index: 1;
}
.img-comparison-container>.img-comparison-item:nth-child(2){
    z-index: 2;
}
.img-comparison-container>span{
    position: absolute;
    height: 100%;
    border: 2px solid #fff;
    z-index: 3;
    cursor: col-resize;
    transition: all .1s ease-in-out;
}