@font-face{font-family:PixelOperator;src:url(f.ttf) format("truetype")}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#222;overflow:hidden}

.canvas{
    position:relative;
    width:100vw;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
}

.background,.overlay{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.background{
    z-index:0;
}

.overlay{
    z-index:1;
    pointer-events:none;
}

.content{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(60vw,1000px);
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:2;
}

.main-image{
    display:block;
    width:100%;
    height:auto;
}

.bottom-buttons{
    width:60%;
    margin-top:1%;
    display:flex;
    justify-content:space-between;
    gap:1%;
}

.image-button{
    width:48%;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    transition:transform .05s ease;
}

.image-button img{
    display:block;
    width:100%;
    height:auto;
}

.image-button:hover{
    transform:scale(1.03);
}

.image-button:active{
    transform:scale(.97);
}

.footer{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:8px 0;
    background:#282828bf;
    color:#fff;
    text-align:center;
    font-family:PixelOperator,monospace;
    font-size:18px;
    line-height:1.2;
    z-index:3;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

@media (max-aspect-ratio:1/1){
    .overlay{
        content:url("cover2.webp");
    }

    .content{
        width:90vw;
    }

    .footer{
        font-size:22px;
        padding:10px 0;
    }
}