.mainBox {
    /*width: 1200px;*/
    max-width: 100%;
}

.innerBox {
    max-width: 100%;
    max-height: 100%;
    vertical-align: baseline;
}

.sidebar {
    width: 3000px;
    vertical-align: baseline; /* Align to top of box */
}

.contentBox {
    vertical-align: baseline;
    padding: 10px; /* Internal padding */
    margin-bottom: 4px;
    border: 2px solid #828282;
    border-radius: 10px;
}

.navbar {
}

p, li {
    color: white;
    margin: 0; /* Not sure where the margining issue is coming from, and it only affects <p> */
}

a {
    text-decoration: none; /* Hide underlines on <a href> */
    color: white;
}



/* (E)ighty (E)ight (T)hirty (O)ne (88x31) footer */
.eeto-footer {
    width: 800px;
    margin-top: 10px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Background */
body {
    /* Not sure whether I like the repeating background or not */
    /* They both look so good ㅠㅠ */
    background-image: url("./assets/star_bg_25speed.gif");
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    /* background-position: center; */

    /* Make background not blurry */
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* Add contrast between the background and foreground to make text more legible */
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode: darken;
}

.linknotvalid {
    color: red;
}