body {
    background-image: url("../asset/background.png");
    height: 100vh;
}

#banner {
    aspect-ratio: 19 / 4;
}

#header {
    display: grid;
    grid-template-rows: auto auto;
    width: fit-content;
    text-align: left;
    margin-top: 0.75rem;
    border: 0.25rem solid whitesmoke;
}

#links {
    padding: 0.125rem 0 0.125rem;
    border-top: 0.15rem solid whitesmoke;
}

.link {
    width: fit-content;
}

.link > a {
    color: whitesmoke;
    text-decoration: none;
    margin: 0.125rem 3vw 0.125rem;
}

.link:hover {
    background-color: slategray;
}

*::selection {
    background-color: palevioletred;
}

* {
    font-family: 'Source Code Pro';
}

#badges {
    border-top: 0.15rem solid whitesmoke;
    margin-top: 2rem;
    padding-top: 0.75rem;
}

@media (orientation: portrait) {
    #banner {
        height: 10vh;
    }
    #links, #badges {
        width: calc((19 / 4) * 10vh);
    }
}

@media (orientation: landscape) {
    #banner, #links, #badges {
        width: 60vw;
    }
}

a:hover, a *:hover {
    cursor: url("../asset/cursor/click/1.png");
    animation: click 200ms infinite;
    -webkit-animation: click 200ms infinite;
    -moz-animation: click 200ms infinite;
}

*:hover {
    cursor: url("../asset/cursor/normal/1.png");
    animation: hover 600ms infinite;
    -webkit-animation: hover 600ms infinite;
    -moz-animation: hover 600ms infinite;
}

.badge {
    margin: 0 0.5rem 0;
    border: 0.15rem solid white;
}

@keyframes hover {
    0% {cursor: url("../asset/cursor/normal/1.png"), auto;}
    20% {cursor: url("../asset/cursor/normal/2.png"), auto;}
    40% {cursor: url("../asset/cursor/normal/3.png"), auto;}
    60% {cursor: url("../asset/cursor/normal/4.png"), auto;}
    80% {cursor: url("../asset/cursor/normal/5.png"), auto;}
    100% {cursor: url("../asset/cursor/normal/1.png"), auto;}
}

@keyframes click {
    0% {cursor: url("../asset/cursor/click/1.png"), auto;}
    50% {cursor: url("../asset/cursor/click/2.png"), auto;}
    100% {cursor: url("../asset/cursor/click/1.png"), auto;}
}