/* 
This is for the lamer one... :C
*/

#fullBGImg {
    align-self: center;
    z-index: -3;
    position: fixed;
    min-width: stretch;
    min-height: stretch;
    left: 0px;
    top: 0px;
    object-fit: cover;
    pointer-events: none;
    border: none;
    image-rendering: pixelated;
    filter:grayscale(0.5);
}

/* 
#fullBGVideo {
    z-index: -2;
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    left: 0px;
    top: 0px;
    object-fit: cover;
    pointer-events: none;
}
*/

#fullBGVideo {
    align-self:center;
    z-index: -2;
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    left: 0px;
    top: 0px;
    object-fit: cover;
    pointer-events: none;
    border: none;
    image-rendering:pixelated;
    opacity: .5;
    mix-blend-mode:hard-light;
}

h1 {
    font-size: 40px;
    text-align:center;
    text-shadow: 3px 3px 3px #00000064;
}

h2 {
    font-size: 24px;
    text-shadow: 3px 3px 3px #00000064;
}

sub {
    font-size: 14px;
}

p {
    border-image-source: url("assets/ui_specific/images/boxes/label001.png");
    image-rendering: pixelated;
    border-image-slice: 8 8 8 8 fill;
    border-image-width: 16px 16px 16px 16px;
    border-image-outset: 5px 5px 5px 5px;
    border-image-repeat: stretch stretch;
    border-style: solid;
    box-shadow: 6px 6px 6px 0px;
    font-size: 17px;
}



.box {
    max-width: 1000px;
    margin: 64px auto;
    display: grid;
    grid-gap: 32px;
    grid-template-columns: 192px minmax(0, 1fr);
}



nav, main, footer {
    border-image-source: url("assets/ui_specific/images/boxes/panel001.png");
    image-rendering: pixelated;
    border-image-slice: 8 8 8 8 fill;
    border-image-width: 16px 16px 16px 16px;
    border-image-outset: 10px 10px 10px 10px;
    border-image-repeat: stretch stretch;
    border-style: solid;
    box-shadow: 12px 12px 12px 2px;
    font-family: 'monospace', 'Lucida Console';
    font-size: 17px;
}

header {
    border-image-source: url("assets/ui_specific/images/boxes/label001.png");
    image-rendering: pixelated;
    border-image-slice: 8 8 8 8 fill;
    border-image-width: 16px 16px 16px 16px;
    border-image-outset: 10px 10px 10px 10px;
    border-image-repeat: stretch stretch;
    border-style: solid;
    box-shadow: 12px 12px 12px 2px;
    font-family: 'monospace', 'Lucida Console';
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

#sectLabel {
    border-image-source: url("assets/ui_specific/images/boxes/label001.png");
    image-rendering: pixelated;
    border-image-slice: 8 8 8 8 fill;
    border-image-width: 16px 16px 16px 16px;
    border-image-outset: 5px 5px 5px 5px;
    border-image-repeat: stretch stretch;
    border-style: solid;
    box-shadow: 6px 6px 6px 0px;
}

nav {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
}

main {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: max-content;
}

footer {
    grid-row: 3 / 4;
    grid-column: 1 / 3;
}

#latestimg {
    border-image-source: url("assets/ui_specific/images/boxes/panel001.png");
    image-rendering: pixelated;
    border-image-slice: 8 8 8 8 fill;
    border-image-width: 8px 8px 8px 8px;
    border-image-outset: 2px 2px 2px 2px;
    border-image-repeat: stretch stretch;
    border-style: solid;
    box-shadow: 3px 3px 3px 0px;
    display: inline-block;
    transform: scale(0.95)
}