* {
    margin: 0;
    padding: 0;
}

html {
    --swedish-blue: rgb(0, 106, 167);
    --swedish-yellow: rgb(254 204 2);

    font-family: Arial, serif;
    font-size: 16px;
    
}

body {
    background-color: var(--swedish-blue);
    /*background-color: rgb(254 204 2);*/
    color: var(--swedish-yellow);
    
    height: 100vh;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /*main {*/
    /*    text-transform: uppercase;*/
    /*}*/
    
    img {
        max-width: 100%;
        max-height: 100%;
        
        /*border: 1px solid white;*/
    }
    
    /*img {*/
    /*    cursor: crosshair;*/
    /*}*/

    &:hover img {
        animation: tilt 5s infinite linear;
        /*border: 1px solid white;*/
    }

    img.first {
        
        /*&:not(:hover) {*/
        /*    animation: untilt 2s;*/
        /*}*/

        /*&:hover {*/
        /*    animation: tilt 5s infinite linear;*/
        /*}*/
        
        /*&:hover {*/
        /*    display: none;*/
        /*    + img.second {*/
        /*        display: unset;*/
        /*    }*/
        /*}*/
    }
    
    img.second {
        display: none;
    }
    
    /*&:has(img:hover) {*/
    /*    background-color: var(--swedish-yellow);*/
    /*}*/
    
    main {
        font-size: 2rem;
    }
}

@keyframes tilt {
    from {
        rotate: 0deg;
    }
    
    25% {
        rotate: 60deg;
    }
    
    50% {
        rotate: 0deg;
    }
    
    75% {
        rotate: -60deg;
    }
    
    to {
        rotate: 0deg;
    }
}

@keyframes untilt {
    from {
        rotate: 90deg;
    }
    
    to {
        rotate: 0deg;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color: var(--swedish-yellow);
        color: var(--swedish-blue);
        
        img.first {
            display: none;
        }
        img.second {
            display: unset;
        }
    }
}