:root {
    font-family: Arial, sans-serif;
    font-size: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
}

body {
    padding: 1.5rem;
    display: flex;
    column-gap: .7rem;
    justify-content: space-between;
    background: linear-gradient(45deg, #717613, #4261df);
    color: white;
}

body.du {
    background: linear-gradient(45deg, #641a1a, #824d04);
}

aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: min(12vw, 7rem);
}

h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: min(12vw, 10rem);
    animation: resize .4s alternate linear infinite;
}

aside span {
    --duration: 1s;
    animation: tilt var(--duration) alternate linear infinite;
}

@keyframes tilt {
    from {
        transform: rotateY(var(--maxY)) rotateZ(var(--maxZ));
    }

    to {
        transform: rotateY(var(--minY)) rotateZ(var(--minZ));
    }
}

@keyframes resize {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(.8);
    }
}