@font-face {
    font-family: 'Comic Sans';
    src: url('/fonts/Comic_Sans_MS.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    cursor: url("cursor.png"), auto;
    background-color: white;
    color: black;
    font-family: Verdana;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: pink;
    margin: 0;
    padding: 0;
}

h1 {
    animation: colorRotate 1s infinite;
}

.subtitle {
    font-size: 1.5em;
    color: white;
    font-weight: 300;
}

.nav {
    background-color: #f7a6ff;
    font-size: 24px;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
    padding: 16px;
    margin-top: 0;

    border: dotted white 6px;
    font-weight: 900;
}

.nav li {
    list-style: none;
    gap: 16px;
}

.nav img {
    width: 32px;
}

.nav a {
    display: flex;
    /* required for the spinning to work?? */
}

.nav a:hover span {
    animation: NavSpin 1s infinite linear;
}

.nav a:link,
.nav a:visited {
    color: white;
    text-decoration: none;
}

a.discord {
    background-image: url("/pengers/Disger.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 1.5em;
}

@keyframes colorRotate {
    from {
        color: #6666ff;
    }

    10% {
        color: #0099ff;
    }

    50% {
        color: #00ff00;
    }

    75% {
        color: #ff3399;
    }

    100% {
        color: #6666ff;
    }
}

@keyframes NavSpin {
    from {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}