body,
html {
    font: 16px monospace, monospace;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

pre {
    margin: 0;
    overflow-x: hidden
}


body {
    background: #000;
    color: aquamarine;
}

a {
    color: lightsalmon;
}

a:hover {
    color: #a00;
}

h4 {
    color:aquamarine;
}

.drawing {
    overflow-x: hidden;
    white-space: pre;
    text-align: center;
    border-bottom: aquamarine solid 2px;
    animation: fadeIn 1s;
    width: 100%;
}

.text-only {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: aquamarine solid 2px;
    word-wrap: break-word;
    animation: fadeIn 1s;
}

#logo {
    color:lightsalmon;
}

#logo:hover {
    color: #a00;
}

@media(max-width:999px) {
    body {
        font-size: 1.94vw;
        background: linear-gradient(to left bottom, #f4a261 25%, #d33f34 50%, #a61322 50.1%, #410808 100%);
        color: #F0F0F0;
    }
    a {
        color: #F0F0F0;
    }
    
    a:hover {
        color: #000;
    }    
    .drawing {
        border-bottom: #F0F0F0 solid 2px;
    }
    .text-only {
        border-bottom: #F0F0F0 solid 2px;
    }
    #logo {
        color: #F0F0F0;
    }
    #logo:hover {
        color: #000;
    }

    h4 {
        color:#F0F0F0;
    }
}

#g {
    filter: invert(1)
}

.t {
    text-decoration: none;
}


p.text-only {
    max-width: 40px;
}

.nav-container {
    display: table;
    /* position: relative; */
    width: 100%;
    /* align-items: center; */
    /* Align items vertically in the center */
}

.nav-container a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

img,
#b {
    max-width: 80ch
}

#a {
    display: table;
    margin: 16px auto;
}

#flag {
    width: 30px;
}

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

    100% {
        opacity: 1;
    }
}