@font-face {
    font-family: jbmono;
    src: url(/assets/jbmono.woff2);
}

@font-face {
    font-family: jbmono_bold;
    src: url(/assets/jbmono_bold.woff2);
}

@font-face {
    font-family: jbmono_italic;
    src: url(/assets/jbmono_italic.woff2);
}

html {
    background-color: #181a1b;
    border-color: #736b5e;
    color: #e8e6e3;
}

body {
    margin: 8%;
    /* margin-bottom: 20% */
}

a {
    color: #b133ff;
}

a.hidden {
    color: #e8e6e3;
    text-decoration: none;
}

h1 {
    font-family: jbmono_bold;
    /* font-size: 230%; */
}

p {
    font-family: jbmono;
    /* font-size: 100%; */
}


/* Footer menu */
div.menu {
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #181a1b;
}

p.menu {
    font-size: smaller;
}

/* Eclipse stuff */
h1.eclipse {
    margin-left: 20px;
}

div.eclipse {
    display: flex;
    flex-direction: row;
}

/* Now playing */
div.now_playing {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* border-style: solid; */
}

p.now_playing {
    margin-left: 10px;
    font-size: small;
}

small.now_playing {
    font-family: jbmono_italic;
    font-size: x-small;
}

/* Quotes and related anim */
a.refresh {
    opacity: 0;
    animation: refresh 2s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}

small.flavor_text {
    font-family: jbmono_italic;
    font-size: small;
}

@keyframes refresh {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.O_O {
    opacity: 0;
    animation: O_O 5s ease infinite;
    animation-delay: 2s;
}

@keyframes O_O {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}