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

@font-face {
    font-family: RW;
    src: url(/fonts/rain-world-menu-font-webfont.otf.woff2);
}



:root {
    --clr-text: whitesmoke;
    --clr-pink: #d69ad6;
    --clr-l-pink: #e9d1ff;
    --clr-d-pink: #170b17;
    --clr-grey: #74827e;
    --clr-blurple: #5b4fdd;
    --clr-l-blurple: #887ef7;
    --clr-black: #020205;
    --clr-l-text: #e3e3fa;
}



/* Do not color shit by default make a theme do it not the main css file because you'll want unique themes sometimes -Dawn */



body {
    font-family: Sans-Serif;
    font-size: 1rem;
    font-family: 'FreePixel', sans-serif;
    background-color: black;
}

/* CONTENT IDENTIFIERS */
#wrapper {
    margin: 0 auto;
    padding:0px 20px;
    max-width:1160px;
    display:flex;
    flex-direction: column;
}

#box {
    display: flex;
    flex-direction: row;
    justify-content: left;
}



#header {
    width:100%;
    margin:0;
}

#header img {
    width:100%;
    height:auto;
}

#left {
    max-width: 180px;
}

#main {
    max-width: 800px;
    padding: 0px 5px 0px 5px;
}

#right {
    max-width: 180px;
}

#footer {
  font-size:0.8rem;
    max-width:1160px;
    text-align:center;
    margin:0;
    vertical-align: center;
}



/* PROXYING SYNTAX */
.proxy {
    border-left: 1px dotted whitesmoke;
    padding: 0px 0px 1px 8px;
    margin: 10px 5px;
}

.liz {
    color: #ccf8ff;
    border-left: 1px dotted cyan;
}

.vix {
    color: #ffcce9;
    border-left: 1px dotted hotpink;
}

.dwn {
    color: #d1d1d1;
    border-left: 1px dotted grey;
}

.eve {
    color: #e3ffcc;
    border-left: 1px dotted teal;
}



/* GENERAL SYNTAX */
.hidelist {
  list-style-type: none;
  padding-left:20px;
}

.middle {
    vertical-align: middle;
}

.center {
    text-align: center;
}

.scroll {
    overflow-y: scroll;
}

.pink {
    color: var(--clr-pink);
}

.greyed {
    color: var(--clr-grey);
}



/* RAINW RODL!!! */
.rwbox {
    font-family: 'RW', sans-serif;
    text-align: left;
    background-color: black;
    border: 3px solid white;
    border-radius: 10px;
    color: white;
    padding: 5px;
    margin: 5px;
}



#nav {
    line-height: 1.5rem;
    padding-left: 6px;
}
 
#nav li:hover {
    background-color: var(--clr-d-pink);
}


/* MEDIA QUERIES FOR FIXING RESOLUTIONS - 1214px is the established breakpoint */

@media (min-width: 1214px) {
  
    #left {
      padding:5px 0px 5px 5px;
    }
    
    #right {
      padding:5px 5px 5px 0px;
    }
  
}

@media (max-width: 1214px) {
  
    #wrapper {
      min-width: initial;
      padding: 0;
      margin: 0;
      width:100%;
      position:relative;
    }
    
    #box {
      flex-direction: column;
      flex-wrap: wrap;
      width: 100%;
      height: auto;
      margin: 0;
    }
    
    #main {
      padding: 0;
    }
    
    #left, #main, #right {
      min-width:100%;
    }
    
    #left {
      order:1;
    }
  
}