:root {
    color-scheme: dark;
    --max-width: 600px;
    --scaler: 1;
}

body, html {
    margin: 0;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    background-color: black;
    font-family: 'Roboto Mono', sans-serif;
    font-size: 20px;
    font-weight: 100;
    height: fit-content;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(var(--height) * var(--scaler) * 1px);
    background-image: url(res/bg_tiling.png);
    background-size: 1920px;
    background-position: top;
}

section {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: calc(var(--height) * var(--scaler) * 1px);
    max-width: var(--max-width);
    box-sizing: border-box;
}

div {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-size-adjust: none;
    outline: none;
    touch-action: manipulation;
    color-scheme: light;
}

section > div {
    display: block;
    position: absolute;
    width: calc(var(--width) * var(--scaler) * 1px);
    height: calc(var(--height) * var(--scaler) * 1px);
    left: calc(var(--x) * var(--scaler) * 1px);
    top: calc(var(--y) * var(--scaler) * 1px);
    z-index: var(--z);
    --block-on-hover-transform: scale(1);
    transform: 
        translateZ(0) 
        translate(-50%,-50%) 
        var(--block-on-hover-transform);
    transition: transform .1s ease-in-out,opacity .1s ease-in-out;
}

div img {
    width: 100%;
    height: 100%;
    color: transparent;
    vertical-align: top;
}

div.grow-on-hover:hover {
    --block-on-hover-transform: scale(1.05);
}

.youtube-play-button {
    width: 68px;
    height: 100%;
    transform: scale(var(--scaler));
}
.youtube-play-button .ytp-large-play-button-bg {
    transition: fill .1s cubic-bezier(.4,0,1,1),fill-opacity .1s cubic-bezier(.4,0,1,1);
    fill: #212121;
    fill-opacity: .8;
}
div:hover .youtube-play-button .ytp-large-play-button-bg {
    transition: fill .1s cubic-bezier(.4,0,1,1),fill-opacity .1s cubic-bezier(.4,0,1,1);
    fill: red;
    fill-opacity: 1;
}

.game-widget > iframe {
    transform-origin: top left;
    transform: scale(var(--scaler));
}

a {
    cursor: pointer;
}
strong {
    font-weight: 500;
}