* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    background:
        repeating-linear-gradient(
            #33aa5550,
            #33aa5550 20px,
            #cceecc50 20px,
            #cceecc50 40px
        ),
        repeating-linear-gradient(
            to right,
            #cec,
            #cec 20px,
            #33aa55 20px,
            #33aa55 40px
        );
    animation-name: bganim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.container {
    display: flex;
    justify-content: center;
}
.main-body {
    margin-top: 100px;
    width: 60vw;
    margin: auto;
    outline: 2px solid #4e6e70;
    border: 2px solid #ffff0040;
    background: #33aa55;
}
.nav {
    display: flex;
    flex-direction: column;
}
.nav h1 {
    text-align: center;
    color: white;
    font-family: sans-serif;
    -webkit-text-stroke: 2.5px #005500;
    font-size: 4rem;
    text-shadow: 4px 4px;
    transform: skew(-5deg, -1deg);
}
.blue-grad {
    background:
        linear-gradient(#00000000 50%, #00000040, #00000030),
        linear-gradient(to bottom right, #90aa00, #33aa33);
    border: 2px solid #ffff0040;
    outline: 2px solid #4e6e70;
}
.nav-container {
    list-style: none;
}
.nav-element {
    background-color: white;
    padding: 10px 50px;
    outline: 3px solid darkgreen;
}
.post-item {
    outline: 2px solid #003300;
    background: linear-gradient(#66bb55 70%, #336633);
    margin: 0;
}
.post-header {
    outline: 2px solid #003300;
    margin: 0rem;
    background: linear-gradient(#00bb00 70%, #006600);
}

@keyframes bganim {
    0% {
    }
    100% {
    }
}