@font-face {
    font-family: "Digital 7";
    src: url(/fonts/Digital7Mono-Yz9J4.ttf);
}

body {
    color: white;
    background-color: #4ac925;
    background-image: url(/images/backgrounds/jade.png);
    font-family: "Digital 7", "times new roman";
}

a {
    color: #4ac925;
}

a:hover {
    color: #25740e;
}

img {
    max-width: 100%;
    display: block;
    margin: auto;
}

.container {
    display: flex;
    flex-flow:column;
    justify-content: center;
    align-items: center;
    color: white;
}

.window {
    background-color: #c7c7c7;
    border: 66px solid transparent;
    border-image: url('/images/borders/window.png') 66 round;
    background-clip: padding-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-evenly;
    align-items: center;
    width: 750px;
    height: 750px;
}

.pane1, .pane2, .pane3, .pane4 {
    background-color: #292c2c;
    height: 300px;
    width: 300px;
    padding: 1em;
    overflow: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.pane1::-webkit-scrollbar, .pane2::-webkit-scrollbar, .pane3::-webkit-scrollbar, .pane4::-webkit-scrollbar {
  display: none;
}

.pane1 {
    border: solid #8c8c8c;
    border-width: .5em 0 0 .5em;
}

.pane2 {
    border: solid #8c8c8c;
    border-width: .5em .5em 0 0;
}

.pane3 {
    border: solid #8c8c8c;
    border-width: 0 0 .5em .5em;
}

.pane4 {
    border: solid #8c8c8c;
    border-width: 0 .5em .5em 0;
}

footer {
    max-width: 100%;
    background-color: #c7c7c7;
    text-align: center;
    padding: .25em;
}

footer p::after, footer p::before {
    content: ' \25CF ';
    color: #525252;
}

@media (max-width: 950px) {
    .window {
        flex-flow: column;
        width: fit-content;
        height: fit-content;
    }
    
    .pane1 {
        border: solid #8c8c8c;
        border-width: .5em .5em 0 .5em;
    }
    
    .pane2, .pane3 {
        border: solid #8c8c8c;
        border-width: 0 .5em;
    }
    
    .pane4 {
        border: solid #8c8c8c;
        border-width: 0 .5em .5em .5em;
    }
    
    .pane1, .pane2, .pane3, .pane4 {
        margin: 1em 0;
    }
}