/* main (?) page bgrnd */

body {
    background-color: #021a02;
    color: #7CFF7C;
    font-family: "Courier New", monospace;
    margin: 0;
    padding: 0;

    /* moving background thingy */
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0,255,0,0.12) 0px,
        rgba(0,255,0,0.12) 2px,
        transparent 2px,
        transparent 6px
    );
    animation: scanlines 12s linear infinite;
}

/* main layout */

.container {
    width: 900px;
    margin: auto;
    display: flex;
    gap: 20px;
    padding-top: 40px;
}

/* welcome section */

.welcome {
    flex: 3;
    background: #062906;
    padding: 25px;
    border-radius: 25px;
    border: 2px solid #0aff0a;
    box-shadow:
        0 0 10px #0aff0a,
        inset 0 0 20px rgba(0,255,0,0.15);
    margin: 80px auto 20px auto;
    animation: crtFlicker 1s infinite;
}

/* sidebar container */

.sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* small side bubbles */

.sidebox {
    background: #062906;
    padding: 20px;
    border-radius: 25px;
    border: 2px solid #0aff0a;
    box-shadow:
        0 0 10px #0aff0a,
        inset 0 0 20px rgba(0,255,0,0.15);
    animation: crtFlicker 1s infinite;
}

/* headings */

h1,
h2 {
    color: #38ff38;
}

/* links */

a {
    color: #9bff9b;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* navigation button containers :> */

.navbuttons {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* buttons */

.navbtn {
    display: inline-block;
    background: #062906;
    border: 2px solid #0aff0a;
    color: #7CFF7C;
    padding: 10px 18px;
    margin: 8px;
    border-radius: 20px;
    text-decoration: none;
    font-family: "Courier New", monospace;
    box-shadow: 0 0 8px #0aff0a;
    transition: all 0.2s ease;
}

/* hover eff */

.navbtn:hover {
    background: #0a3f0a;
    box-shadow: 0 0 15px #38ff38;
}

/* background anim */

@keyframes scanlines {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 200px;
    }
}