* {
    margin: 0px;
    scrollbar-color: var(--black) var(--geen);
}

@font-face {
    font-family: courierprime;
    src: url(allfonts/courierprime/Courier\ Prime\ Sans.ttf);
}

:root {
    --white: #b2b2b7;
    --black: #172326;
    --geen: #364a52;
    --blue: #9db4c46b;
}

body {
    background-image: url(seekmages/snowforest.gif);
    background-size: cover;
    background-attachment: fixed;
    font-family: courierprime;
}

#everything {
    display: grid;
    grid-template-areas: 
    "header header header"
    "left center right"
    "left bottom right";
    grid-template-columns: 1fr 2fr 1fr;
    margin: 5vh 20vw 5vh 20vw;
}

header {
    grid-area: header;
    text-align: center;
}

header > a {
    background-color: var(--white);
    border: var(--geen) solid 2px;
    padding: 5px;
    text-decoration: none;
    color: var(--black);
    margin-top: 10px;
}

#left {
    grid-area: left;
    margin-top: 40vh;
}

#center {
    grid-area: center;
}

#right {
    grid-area: right;
    margin-top: 40vh;
}

#left, #right {
    /*background-color: var(--blue);*/
    margin-right: 10px;
    margin-left: 10px;
    padding: 10px;
}

#left > img, #right > img {
    width: 100%;
}

#mainpiece, #bottom {
    background-color: var(--blue);
    padding: 10px;
    margin: 10px;
    border: solid 5px var(--black);
    color: var(--black);
    border-radius: 10px;
}

#gifs > img {
    width: 23%;
}

#gallery {
    background-color: var(--geen);
    border: solid 5px var(--black);
    border-radius: 10px;
    padding: 10px;
    color: var(--white);
    display: inline-block;
}

#gallery > div > img {
    width: 100%;
}

#galright, #galleft{
    width: 48%;
    display: inline-block;
    text-align: center;
    margin:1%;
}

#galright {
    float: left;
}

#galleft {
    float: right;
}

a {
    color: var(--black);
}

.caption {
    background-color: var(--blue);
    margin-bottom: 10px;
    padding: 5px;
    color: var(--black);
    border-radius: 5px;
    margin-top: -5px;
}

@media screen and (min-height: 100vw) {
    #everything {
        margin-left:5vw;
        margin-right:5vw;
        grid-template-areas: 
        "header header"
        "center center"
        "left right"
        "bottom bottom";
        grid-template-columns: 2fr 2fr;
    }
    #left, #right {
        margin-top: 5vh;
    }

}

#bottom {
    grid-area: bottom;
}