html, body {
    height: 100%;
    margin: 0;
}

@keyframes fade {
    0% {opacity:20%;}
    50% {opacity:50%;}
    100% {opacity:20%;}
}

@keyframes scan-fade {
    0% {opacity:50%;}
    50% {opacity:100%;}
    100% {opacity:50%;}
}

@font-face {
    font-family: Alagard;
    src: url(/assets/fonts/alagard.ttf)
    }

:root {
    /* --main-term-color: #7F160E; */
    --main-term-color: #8b0000;
    --term-font-color: #fff3c9;
    --test-border: 0px solid aqua;
    }

#screen{
    display:flex;
    justify-content: center;
    justify-items: center;
    position:relative;
    width:  100%;
    height: 100%;
    background: var(--main-term-color);
    background: radial-gradient(circle,var(--main-term-color) 0%, rgba(0, 0, 0, 1) 100%); 

}

#scan, #bezel, #damask{
    pointer-events:none;
    position:absolute;
    top: 0;
    left: 0;
    width:  100%;
    height: 100%;
}

#damask{
    background-image: url('assets/images/damask.png');
    background-repeat: repeat;
    opacity:20%;
    z-index: 0;
    filter: blur(2.5px);
    image-rendering: pixelated;

    animation-name: fade;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

#scan{
    background-image: url('assets/images/scanlines.png');
    background-repeat: repeat;
    opacity:90%;
    z-index: 2;

    animation-name: scan-fade;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

#boat{
    background-image:  url('assets/images/boat.png');
    background-repeat: repeat;
    z-index: 2;
}

#bezel{
    z-index:3;
    background-image: url('assets/images/bezel.png');
}

.content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* centers children vertically in column direction */
    align-items: center;      /* centers children horizontally */
    font-family: Alagard;
    color: var(--main-term-color);
    font-size: 24px;
    text-shadow: 2px 2px 10px var(--term-font-color);
    border: var(--test-border);
}

.title-box{
    font-family: Alagard;
    color:var(--term-font-color);
    height: min-content;
    width:100%;
    text-align: left;
    padding-left: 10%;
    border: var(--test-border);
    z-index: 1;
}

.menu{
    position:relative;
    border: var(--test-border);
    text-align: right;
    margin-right: auto;
    color: var(--term-font-color);
    font-size: small;
    font-family: Consolas, monaco, monospace;
    line-height: 30px;
    width: 100%;
}

.menu a:hover, .title a:hover{
    color:white;
    font-weight: bold;
    text-shadow: 2px 2px 20px white;
    z-index: 5;
    }

.menu a, .title a {
    position: relative;
    color: #fff3c9;
    text-decoration: none;
}

.menu a:hover{
    font-size:large;
}

.inscriptions{
    width: 100%;
    /* writing-mode: vertical-rl; */
    border: var(--test-border);
    color: var(--term-font-color);
    font-size: small;
    margin: 2.5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 0;
    text-align: Center;
}

.ColumnParent{
    align-self:center;
    display: flex;
    width: 80%;
    max-height: 95%;
    gap: 2.5%;
}

.ColumnL, .ColumnC, .ColumnR{
    max-height: 100%;
}

.ColumnL, .ColumnR{
    flex: 1;
}

.ColumnL {
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: center;
    flex: 1;
}

.ColumnC {
    flex: 5;

}