body {
    background-color:black;
    background-image:url(./../images/tile_background.gif);
    background-size:175px;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;

    display: flex;
    align-items: center;
    justify-content: center;

    image-rendering: pixelated;
}
a {
    color: unset;
    transition: color 0.1s;
}
a:hover {
    color: rgb(255 170 255);
    transition: color 0.1s;
}
p {
    margin-top: 0;
    margin-bottom: 10px;
}
ul {
    padding-left:15px;
    padding-top: 0;
}
h1, h2, h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-family: Helvetica, sans-serif;
    font-weight: 900;
    color: rgb(255 170 255);
}

.main {
    background-color: black;
    border: solid 5pt white;
    border-radius: 15px 15px 80px 15px;
    width:1000px;
    height:700px;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    background: linear-gradient(to bottom, black, rgb(70, 32, 70));
    border-bottom: solid 3pt white;

    font-weight: 1000;
    font-style: italic;
    font-size: xx-large;
    
    display: flex;
    align-items: end;
}

.sidebar {
    border-right: solid 3pt white;
    width:200px;

    display: flex;
    flex-direction: column;
}
.sidebar-header {
    border-bottom: solid 3pt white; 
    color:white;
    padding-left: 3pt;
    margin-bottom: 0;
    background: url("./../images/dot-background.png");
}

.navigation {
    display: grid;
    align-content:baseline;

    overflow: scroll;
    height:460px;

    background-color: white;
    row-gap: 3pt;
}
.navigation-button {

    font-family: Helvetica, sans-serif;
    font-weight: 900;
    font-size: x-large;
    transition: color 0.1s;
    position: relative;
    cursor: pointer;
    
    height:75px
}
.navigation-button:hover {
    color: rgb(255 170 255);
    transition: color 0.1s;
}
.navigation-img {
    position:absolute;
}
.navigation-button-label {
    position: absolute;
    padding-left: 3px;
}

.web-button-container {
    background: url("./../images/dot-background.png");
    border-top: solid 3pt white;
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-content {
    padding: 5px 10px;
    overflow: scroll;
    height:588px;

    flex:1;
}

.homepage-column {
    flex:1;
    display: flex;
    flex-direction: column;
    gap:10px;
}
.homepage-section {
    background-color: rgb(20, 20, 20);
    padding: 5px 10px;
    border-radius: 20px;
}

.footer {
    background: url("./../images/dot-background.png");
    
    height:25px;
    border-top: solid 3pt white;

    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 70px;

    font-size: small;
    font-style: italic;
    
}

.img-filter img {
    filter: invert(0.1) sepia(1) hue-rotate(250deg) saturate(1.5) contrast(1.2);
}
.img-filter img:hover {
    filter: none;
}