@import url('https://fonts.googleapis.com/css2?family=Redacted+Script:wght@300;400;700&family=Special+Elite&family=Tiny5&display=swap');
@import url('https://fonts.cdnfonts.com/css/perfect-dos-vga-437');
@import url('https://fonts.cdnfonts.com/css/rocket-pop');
@import url('https://fonts.cdnfonts.com/css/ubuntu-mono-2');

@font-face {
    font-family: eurostile;
    src: url('assets/fonts/EuroStyle\ Normal.ttf') format('truetype');
}

@font-face {
    font-family: calibri;
    src: url('assets/fonts/calibri.ttf') format('truetype');
}

@font-face {
    font-family: ms ui;
    src: url('assets/fonts/msgothic.ttc') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection,::-moz-selection{
    background-color: #99ff005b;
}


body {
    background-repeat: repeat-x;
    background-color: #000;
    font-family: ms ui;
    color: #fff;
    scroll-behavior: smooth;
}

.container {
    display: grid;
    grid-template-columns: 100px 700px;
    grid-template-rows: 40px 20px 200px 500px 75px auto;
    width: 825px;
    column-gap: 1px;
    row-gap: 1px;
    
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);


}

.container>header::before {
    background:
        linear-gradient(#0c1d00, #446802);
    height: 40px;
    width: 800px;
    display: block;
    top: 0;
    position: absolute;
    content: " ";
    z-index: -1;
}

.container>header {
    grid-column: 1/3;
    grid-row: 1/2;
    background-image: url('assets/banners/checker.png');
    background-size: 5%;
    border: 1px ridge #ffffff10;
    box-shadow: inset 0px 0px 10px 0px #c8ff005e;
}

.container>header h1 {
    padding: 0px;
    padding-left: 5px;
    font-family: eurostile;
    font-size: 35px;
    width: 145px;
    display: inline-block;
    font-weight: 1000;

}

.container>header h3 {
    padding: 0px 65px;
    padding-left: 5px;
    font-size: 15px;
    display: inline-block;
    color: #fff;
    font-family: calibri;
}

header h1 {

    font-size: 20px;
    color: #fff;
    text-shadow: 1px 1px black;

}

nav {
    grid-column: 2/3;
    grid-row: 2/3;
    background: linear-gradient(#030303, #363636);
    border: 1px ridge #ffffff10;
    box-shadow: inset 0px 0px 10px 0px #ffffff2a;
    color: #fff;
    margin-bottom: -2px;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 0 10px;

    background: #292929 linear-gradient(0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 45%,
            rgba(0, 0, 0, 0.71) 55%,
            rgba(0, 0, 0, 0.71) 80%,
            rgba(255, 255, 255, 0.71) 100%);
    border: 1px ridge #ffffff10;
    box-shadow: inset 0px 0px 10px 0px #ffffff6b;
    text-shadow: 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px #ffffff, 0px 0px 3px rgba(255, 255, 255, 0.37);
}

nav a:hover {
    text-shadow: 0px 0px 3px rgb(247, 255, 0), 0px 0px 3px #97ff00, 0px 0px 3px rgba(175, 255, 0, 0.37);
}

#sidebar {
    grid-column: 1/2;
    grid-row: 2/6;

    background: #070707;
    border: 1px ridge #ffffff10;
    box-shadow: inset 0px 0px 10px 0px #ffffff2a;
    padding: 0 5px;
}

#sidebar .sidebar-item {

    display: block;
    margin-bottom: 10px;
}

.sidebar-item>header {
    background: #292929 linear-gradient(0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 45%,
            rgba(0, 0, 0, 0.71) 55%,
            rgba(0, 0, 0, 0.71) 60%,
            rgba(255, 255, 255, 0.71) 100%);
    border: 1px ridge #ffffff10;
    box-shadow: inset 0px 0px 10px 0px #ffffff6b;
    margin-bottom: 1px;
    padding: 1px;
    text-align: center;
}

.sidebar-item h1 {

    font-size: 14px;
}

.sidebar-content {
    font-size: 12px;
    color: #fff;

    padding: 5px;
    background: #000;
    border: 1px solid #ffffff10;
}


.banner {
    grid-column: 2 / 3;
    grid-row: 3 / 4;

    background: #070707;
    border: 1px ridge #ffffff10;
    box-shadow: inset 0px 0px 10px 0px #ffffff2a;
    margin-top: 2px;
    height: calc(100% - 2px);
    display: flex;
}

#videoplayer {
    width: 200px;
    height: 200px;

    display: flex;
}

#videoplayer iframe {
    width: 80%;
    height: 80%;
    border: none;
    margin: auto;
    align-self: center;

    border: 1px ridge #ffffff10;
    box-shadow: inset 0px 0px 10px 0px #ffffff6b;
    border-radius: 5px;
}

#videoplayer .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: inherit;
}

#videoplayer .iframe-container::before {
    padding: 0px;
    padding-left: 5px;
    font-family: calibri;
    font-size: 23px;
    width: 145px;
    display: block;
    font-weight: 1000;
    content: "featured video";
    position: absolute;
    color: #fff;
    text-shadow: 0px 0px 3px rgb(247, 255, 0), 0px 0px 3px #97ff00, 0px 0px 3px rgba(175, 255, 0, 0.37);
    rotate: -8deg;
    top: 10px
}

#blurb {
    width: calc(100% - 202px);
    height: 100%;
    padding: 4px;
    color: #fff;
    overflow-y: scroll;
    max-height: calc(100% - 8px);
}


.greenhilite {
    text-shadow: 0px 0px 3px rgb(247, 255, 0), 0px 0px 3px #97ff00, 0px 0px 3px rgba(175, 255, 0, 0.37);
}

main {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    display: grid;
    grid-template-columns: repeat(14, 49px);
    grid-template-rows: repeat(10, 49px);
    grid-gap: 1px;

}


footer {
    grid-column: 2 / 3;
    grid-row: 5 / 6;

    background: #070707;
    border: 1px ridge #ffffff10;
    box-shadow: inset 0px 0px 10px 0px #ffffff2a;
}


#about1 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 3;
}

#about2 {
    grid-column-start: 7;
    grid-column-end: 15;
    grid-row-start: 1;
    grid-row-end: 7;
}

#updates {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 3;
    grid-row-end: 11;
}

#ascii {
    grid-column-start: 7;
    grid-column-end: 15;
    grid-row-start: 7;
    grid-row-end: 11;
}



#playingcard{
    text-decoration: none;
    color: inherit;
    text-align: center;
}

#music_icon{
    height: 64px;
    width: 64px;
    margin: 5px auto;
    display: block;
}
#statuscafe{
    font-family: calibri;
}

#statuscafe-username{
    color: #707070;
}
#statuscafe-username a{
    text-decoration: none;
    color:#97ff00;
    font-weight: bold;
}