@font-face {
    font-family: 'Doto';
    font-weight: 800;
    src: url(fonts/Doto-VariableFont_ROND\,wght.ttf);
}

body {
    background-color: #4c536a;
    color: #b6bdbf;
    font-family: monospace;
    margin: 0;
}

h1 {
    color: white;
}

marquee {
    background-color: #372b3b;
    box-shadow: inset 0 .25em .4em #191422;
    border: solid #687387;
    border-width: 0.5em 0;
    margin-top: 1em;
}

p {
    font-size: 16px;
}

.navbar {
    box-shadow: 0 0.25em .4em #191422;
}

.nav-button {
    display: flex;
    justify-content: end;
    border-bottom: 0.5px solid #191422;
    background: linear-gradient(90deg, #4c536a, #687387 50%, #687387);
    text-decoration: none;
    
    &:hover {
        background: linear-gradient(90deg, #687387, #8b97a1 50%, #8b97a1);
    }
}

.nav-button p {
    background-color: #372b3b;
    width: auto;
    padding: 3px 5px 3px 10px;
    text-align: center;
    font-size: 24px;
    color: white;
    font-family: 'Doto';
    text-shadow: 0 0 0.5em #e8bb5b;
    margin: 0.3em;
    border-radius: 10px;
}

.nav-button:hover p {
    background-color: #4f3944;
}

.nav-light {
    background-color: white;
    width: 10px;
    box-shadow: 0 0 0.5em #e8bb5b;
}

.container {
    background-color: #3a3e59;
    border: 0.75em solid #687387;
    box-shadow: inset .4em .4em .4em #191422;
    padding: 0.2em 1em;
}

marquee h1 {
    color: white;
    font-family: 'Doto';
    text-shadow: 0 0 0.5em #e8bb5b;
    margin: 0.25em;
}

.title {
    text-align: center;
    font-size: 50px;
    text-shadow: 0 0 0.25em #8fb0e8;
}