@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;
}

p {
    font-family: jbmono;
}

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

/* 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;
}

/* Quotes and related anim */
a.refresh {
    opacity: 0;
    animation: refresh 2s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}
@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; }
}