html{
    min-height: 100%
}

body{
    /* Font */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-shadow: 2px 1px 1px #000;
    color: white;
    /*Background*/
    background-image: repeating-linear-gradient(rgba(51, 101, 158, 0.904), #30165c), url("/assets/images/water.png");
    background-blend-mode: difference;
    background-size: auto auto;
    /*Display*/
    display: flex;
    flex-direction: column;
    gap: 8px;
    /*rendering*/
    -ms-interpolation-mode: nearest-neighbor;
    margin-bottom: 100%;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}

/* Link Stuff */
a:link{
    color: #c2f0ea;
}

a:visited{
    color: #c2f0ea;
}

audio{
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 6px;
    margin: auto;
    width: 600px;
}

table{
    border: 2px solid #0b1a28; border-collapse: collapse;
}

tr{
    border: 2px solid #0b1a28; border-collapse: collapse;
}

td{
    border: 2px solid #0b1a28; border-collapse: collapse;
}

.header {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 6px;
    border: #0b1a28 2px solid;
    /* Position Stuff */
    padding-left: 10px;
    padding-right: 10px;
    max-width: 600px;
    margin: 2px;
    /*Flexbox*/
    display: flex;
    /* Color Stuff */
    color: white;
    background-image: linear-gradient(
        rgba(91, 151, 219, 1) 2px,
        rgba(91, 151, 219, 1) 3px,
        rgba(53, 104, 153, 1) 5px,
        rgba(53, 104, 153, 1) 95%,
        rgba(16, 28, 43, 1) 100%
    );
    /* Font stuff */
    font-size: 12px;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

.navbar{
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 6px;
    border: #0b1a28 2px solid;
    /* Position Stuff */
    padding-left: 10px;
    padding-right: 10px;
    /* Pixel Rendering*/
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    /* Color Stuff */
    background-image: linear-gradient(
        rgba(91, 151, 219, 1) 4px,
        rgba(91, 151, 219, 1) 5px,
        rgba(53, 104, 153, 1) 10px,
        rgba(53, 104, 153, 1) 95%,
        rgba(16, 28, 43, 1) 100%
    );
    /* Font stuff */
    font-size: 35px;
    /* Flexbox */
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    max-width: 600px;
    flex-grow: 1;
}

.horizontal-box{
    margin: auto;
    /* Flexbox */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 600px;
    gap: 10px;
    flex-grow: 0;
}

.vertical-box{
    margin: auto;
    /* Flexbox */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-grow: 0;
    max-width: 600px;
    gap: 10px;
}

.content{
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 6px;
    border: #0b1a28 2px solid;
    /* Position Stuff */
    max-width: 600px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0px;

    /* Color Stuff */
    background-image: linear-gradient(
        rgba(91, 151, 219, 1) 12px,
        rgba(91, 151, 219, 1) 13px,
        rgba(53, 104, 153, 1) 30px,
        rgba(53, 104, 153, 1) 95%,
        rgba(16, 28, 43, 1) 100%
    );
    background-blend-mode: difference;
    background-repeat: no-repeat;
    /* Font stuff */
    white-space: normal;
    /* Flexbox */
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.content audio{
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 6px;
    margin: auto;
    width: 200px;
}

.content img{
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 6px;
    border: #0b1a28 2px solid;
}

.content button{
    color: white;
    text-shadow: 2px 1px 1px #000;
    background-image: linear-gradient(rgba(51, 101, 158, 0.80), rgba(48,22,92,0.80)), url("/assets/images/water.png");
    border: #0b1a28 2px solid;
    min-width: 88px;
    min-height: 31px;
}

.content-pages{
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 6px;
    border: #0b1a28 2px solid;
    /* Position Stuff */
    max-width 600px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 2px;
    /* Color Stuff */
    background-image: linear-gradient(
        rgba(91, 151, 219, 1) 12px,
                                      rgba(91, 151, 219, 1) 13px,
                                      rgba(53, 104, 153, 1) 30px,
                                      rgba(53, 104, 153, 1) 95%,
                                      rgba(16, 28, 43, 1) 100%
    );
    background-blend-mode: difference;
    background-repeat: no-repeat;
    /* Font stuff */
    white-space: normal;
    /* Flexbox */
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    min-width: 0;
}

.row{
    /* Flexbox */
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 12px;
}

.column{
    /* Flexbox */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 12px;
}

.column-inside{
    /* Flexbox */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0px;
}

.footer{
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 6px;
    border: #0b1a28 2px solid;
    /* Position Stuff */
    padding-left: 10px;
    padding-right: 10px;
    position: static;
    /* Color Stuff */
    color: white;
    background-image: linear-gradient(
        rgba(91, 151, 219, 1) 2px,
        rgba(91, 151, 219, 1) 3px,
        rgba(53, 104, 153, 1) 8px,
        rgba(53, 104, 153, 1) 95%,
        rgba(16, 28, 43, 1) 100%
    );
    /* Font stuff */
    font-size: 8px;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 600px;
    flex-grow: 1;
}