@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
html {
    min-height: 100%;
    background-color: #11111b;
    color: #cdd6f4;
    font-family: 'Roboto';
}

a {
    color: #89dceb;
}

a:hover {
    color: #b4befe;
}

nav * {
    display: inline;
    overflow: hidden;
    margin-left: 1vw;
}

nav h3 {
    padding: 2px 5px;
    border-style: none;
    border-radius: 7px;
    color: #11111b;
    animation-name: rainbow;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

footer {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    align-items: end;
}

@keyframes rainbow {
    0% {
        background-color: #b4befe;
    }
    8% {
        background-color: #89b4fa;
    }
    16% {
        background-color: #74c7ec;
    }
    24% {
        background-color: #89dceb;
    }
    32% {
        background-color: #94e2d5;
    }
    40% {
        background-color: #a6e3a1;
    }
    48% {
        background-color: #f9e2af;
    }
    56% {
        background-color: #fab387;
    }
    64% {
        background-color: #eba0ac;
    }
    72% {
        background-color: #f38ba8;
    }
    80% {
        background-color: #cba6f7;
    }
    100% {
        background-color: #f5c2e7;
    }
}