/* IMPORTS PixelatedElegance*/
@font-face { font-family: 'SuperPixel'; src: url("/assets/fonts/SuperPixel.ttf") format("truetype"); }
@font-face { font-family: 'PixelatedElegance'; src: url("/assets/fonts/PixelatedElegance.ttf") format("truetype"); }
@font-face { font-family: 'Minecraftia'; src: url("/assets/fonts/Minecraftia.ttf") format("truetype"); }
@font-face { font-family: 'RasterForgeRegular'; src: url("/assets/fonts/RasterForgeRegular.ttf") format("truetype"); }
/* Variables*/
:root{
    --main-color: #0C081D;
    --in-color: #140242;
    --sub-color: #cc1b6d;
    --sub2-color: #8BD7D6;
    --accent-color: #01FFE1;
    --second-accent-color: #E8C7E6;
    --h-color: aliceblue;
    
    --neon-color: #ff1ecf;
}

/*Basic shit and stuff*/
*{
    color: var(--accent-color);
    font-size: small;
    font-family: Minecraftia;
    box-sizing: border-box;
    
}
body{
    background-color: #0C081D;
    background-image: url(/assets/image/ArcadeCarpet.jpg);
    background-blend-mode: color-dodge;
    background-position: bottom;
    background-attachment: fixed;
    background-size:35%;
}
h1, h2{
    font-family: SuperPixel;
    font-size: 24px;
}
span{
    filter:drop-shadow( 0 1px 5px var(--accent-color));
}
/* GENERAL LAYOUT OF SITE*/
.navigator{
    display: flex;
    justify-content:flex-start;
    border-radius: 0 0 6px 6px;
    background-color:var(--sub-color);
    max-width: 1350px;
    margin: 0;
    margin-bottom: 10px;
    padding: 10px;
    gap: 10px;
}
.navigator a{
    font-family: PixelatedElegance;
    text-decoration: none;
    font-size: large;
    border-radius: 6px;
    background-color: var(--in-color);
    padding: 1%;
}
a:hover{
    color: var( --main-color);
    background-image: url(/assets/image/vhs_screen.jpg);
    background-blend-mode: hue;
    background-color: var(--accent-color);
     filter:drop-shadow( 0 1px 8px var(--accent-color)) blur(1px);
}
#banner{
    border: solid var(--sub-color);
    background-color: var(--in-color);
    max-width: 1350px;
    margin: 0;
    padding: 45px 10px;
}
.header-arcade{
    border: solid var(--neon-color);
    border-bottom-style: none;
    border-radius: 6px 6px 0 0;
    filter:drop-shadow( 0 1px 8px var(--neon-color));
    background-color: var(--sub-color);
    text-shadow: 2px -2px #84002b, -2px 2px #01FFE1;
    text-align: center;
    color: aliceblue;
    margin: auto;
    padding-left: 2%;
}
.content-holder{
    border: solid var(--neon-color);
    border-top-style: none;
    border-radius: 0 0 6px 6px;
    filter:drop-shadow( 0 1px 8px var(--neon-color));
    background-color: var(--main-color);
    background: linear-gradient(180deg, #000000 1px, var(--main-color) 20px);
    margin: auto;
    margin-bottom: 10px;
    padding: 20px;
}
.inner-screen{
    text-align:justify;
    border-radius: 18px;
    background-color: var(--in-color);
    background: linear-gradient(180deg, #0b0242 0%, #100126 100%);
    box-shadow: 2px -2px #f12c6d, -2px 2px #01FFE1;
    text-shadow: 1px -1px #84002b, -1px 1px #007567;
    color: var(--h-color);
    padding: 11px;
}
.divider{
    content: url(https://pixelsafari.neocities.org/dividers/checkers.gif);
    display: block;
    width: 100%;
    height: 24px;
    border-radius: 6px;
    box-shadow: 2px -2px #f12c6d, -2px 2px #01FFE1;
    margin: 15px auto;
}
.sidebar-group{
    display: flex;
    justify-content: center;
    margin: auto;
    gap: 25px;

}
.sidebar-group-row{
    width: 74.8%; 
    display: block;
    margin: auto;
    
}
#header{
    background-image: url(/assets/image/dottedShadow_top.png);
    background-position: top;
    background-size: contain;
    height: 100px;
    margin: -1%;
}
#footer{
    background-image: url(/assets/image/dottedShadow.png);
    background-position: bottom;
    background-size: contain;
    height: 100px;
    margin: -1%;
}
.images{
    display: flex;
    max-width: 300px;
    border-radius: 6px;
    box-shadow: 2px -2px #f12c6d, -2px 2px #01FFE1;
    margin: 18px auto;
    
}
/* SPECIFIC TO PAGES*/

/* Home */
#sidebar-left, #sidebar-right{
    max-width: 450px;
    width: 100%;
    margin: 0;
}
#sidebar-center{
    max-width: 950px;
    width: 100%;
    margin: 0;
}
#updates{
    height: 250px;
    margin: auto;
    margin-left: -20px;
    padding-right: 10px;
    overflow: auto;
}
/*Changes depenidng on width*/
@media only screen and (max-width: 1115px) {
    .sidebar-group-row {
        max-width: none;
        width: 89%;
        margin: auto;
        margin-top: -60px;
  }
    #sidebar-left, #sidebar-right{
        max-width: 450px;
        width: 60%;
}
    #sidebar-center{
        max-width: none;
        width: 100%;
}
}
@media only screen and (max-width: 850px) {
    .sidebar-group-row {
        max-width: none;
        width: auto;
  }
    .sidebar-group {
        display: block;
  }
     #sidebar-left, #sidebar-right{
        max-width: none;
        width: 100%;
}
    #sidebar-center{
        max-width: none;
        width: 100%;
}
}
@media only screen and (max-width: 700px) {
    .sidebar-group {
        display: block;
  }
}