:root {
    --body-color: #000000;
    --body-bg-color: #ffffff;
    --link-color: red;
    --accent-color:red;
}
@font-face {
    font-family: 'monotalicwidebold';
    src: url('/fonts/Monotalic-WideBold.ttf');
}
@font-face {
    font-family: 'monotalicbold';
    src: url('/fonts/Monotalic-Bold.ttf');
}
@font-face {
    font-family: 'monotalic';
    src: url('/fonts/Monotalic-Regular.ttf');
}
@font-face {
    font-family: 'monotalicwide';
    src: url('/fonts/Monotalic-Wide.ttf');
}
body {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--body-color);
    background-color: var(--body-bg-color);
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'monotalic';
}
strong {
    font-family:'monotalicwide'
}
small {
    font-size:smaller;
}
#header, .header {
    width: 100%;
    height: 150px;
}
#container {
    justify-content: center;
    display:flex;
    padding:20px;
}
#grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap:20px;
    padding:60px;
    padding-top:20px;
}
/*.box { 
    border: 2px solid var(--body-color);
}*/
.box1 { /*header*/
    grid-area: 1/1/span 1/ span 6;
    font-size: 2rem;
    text-align: center;
    margin-top:-50px;
}
.box1 a {
    font-size: 1.5rem;
    margin-top:0;
}
.box1 h1 {
    margin-bottom:0;
}
.box2 { /*nav*/
    grid-area: 2 / 1 / span 2 / span 1;
    padding: 10px;
    display:flex;
    flex-direction: column;
    gap:10px;
}
.box2 a { 
    color: var(--link-color);
    font-size:1.4rem;
    margin-bottom:10px;
}
.box2 a:hover { 
    background-color: var(--link-color);
    color:var(--body-bg-color);
    text-decoration: none;
}
.box2 img {
    width:15vw;
}
.box3 { /*main with nav*/
    grid-area: 2/2/span 2/span 4;
    padding:15px;
}
.box4 { /*footer*/
    grid-area: 6/1/span 1/span 6;
    text-align: center;
}
.box5 {
    display: flex;
    width:80%;
}
.box6 { /*main without nav*/
    grid-area: 2/1/span 4/span 4;
    padding:15px;
}
a {
    color:var(--link-color);
    text-decoration: none;
}
a:hover { 
    text-decoration: underline;
}
p {
    margin-top:0;
}

.indents, .indents2 { 
    border-left: 3px dotted var(--body-color);
    padding-left:15px;
    margin-left:25px;}

@media only screen and (max-width: 900px) {
    #grid {
        display:flex;
        flex-direction: column;
        row-gap:10px;
        padding:10px;
        padding-top:10px;
    }
    .box1 { /*header*/
        font-size: 1.5rem;
        text-align: center;
        order:0;
    }
    .box1 a {
        font-size: 1rem;
        margin-top:0;
    }
    .box1 h1 {
        margin-bottom:0;
    }
    .box2 { /*nav*/
        padding: 10px;
        gap:10px;
        order:1;
    }
    .box2 a { 
        color: var(--link-color);
        font-size:1rem;
        margin-bottom:10px;
    }
    .box2 a:hover { 
        background-color: transparent;
        color:var(--link-color);
        text-decoration: none;
    }
    .box2 img {
        width:fit-content;
    }
    .box3 { /*main with nav*/
        padding:15px;
        order:3;
    }
    .box4 { /*footer*/
        text-align: center;
        order:10;
    }
    .box5 {
        display: flex;
        width:80%;
        order:5;
    }
    .box6 { /*main without nav*/
        padding:15px;
        order:3;
    }
}