@font-face {
                font-family: DTM-Sans;
                src: url('/projects/fonts/DTM-Sans.ttf');
            }
            
              @font-face {
                font-family: Pixel-Operator;
                src: url('/projects/fonts/PixelOperator.ttf');
            }
            
              @font-face {
                font-family: Pixel-Operator;
                src: url('/projects/fonts/PixelOperator-Bold.ttf');
                font-weight: bold;
            }

/*global colors. change here to see the effect*/
:root {
  --backgroundcolor: black;
  --textcolor: white;
  --header:#969696; /*insert image here later maybe. like a cool header or something idk*/
  --main: black;
  --footer: black;
  --borders: #212121;

  /*links*/
  --link: #D0FF8A;
  --linkhover: blueviolet;
  
  /*headings*/
  --h1: #2b2b2b;
  --h2: #2b2b2b;
  --headerunderline: #212121;

}

              body {
                font-family: 'DTM-Sans', sans-serif;
                font-size: 22px;
                margin: 0;
                background-color: black;
                background-image: url(/projects/chapter-gary/nextgen/images/RuinsTown.png);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: 100% auto;
                      }
                      
                ::-moz-selection { /* Code for Firefox */
                    color: black;
                    background: lime;
                  }
                  
                ::selection {
                    color: black;
                    background: lime;
                  }
                  
                  a{
                    color: var(--link);
                  }
                  
                  a:hover{
                    color: var(--linkhover);
                  }
            
            .container{
              width: 65%;
              margin: 0 auto;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              
            }
            

            
            .box{
                border: 50px solid transparent;
                border-image: url(/projects/chapter-gary/nextgen/images/nextgen-border.gif) stretch;
                border-image-slice: 70 fill;
                width: 100%;
                background-size: cover;
                font-family: DTM-Sans;
                padding: 5px;
                margin: 20px;
            }
            
            .faq{
              margin: auto;
              text-align: left;
              width: 90%;
            }
            
            .navbar{
              background: black;
              overflow: hidden;
              margin: 10px 0px;
              text-align: center;
              padding: 15px 0px;
              box-shadow: 0px 3px #23b14d, 0px -3px #23b14d, 0px 6px #422380, 0px -6px #422380;
            }
            
            .navbar a{
              color: var(--link);
              padding: 0px 10px;
              text-decoration: none;
            }

            .navbar a:hover{
              color: var(--linkhover);
              text-decoration: none;
            }            
            
            .navbutton{
              font-family: DTM-Sans;
              font-size:30px;
              text-shadow: 3px 3px #422380;
            }
            
            h1,h2 {
              font-size: 30px;
              text-shadow: 3px 3px #422380;
              color: #b5e51d;
              
            }
            
            h2 {
              font-size: 25px;
            }
            
            a h2 {
              color: var(--link);
              text-shadow: none;
              text-decoration: none;
            }

             a h2:hover{
              text-shadow: 0 0 1px ;
              color: var(--linkhover);
              text-shadow: none;
              text-decoration: none;
            }
            
            p {
              font-family: Pixel-Operator;
              color: white;
            }
            
            .center {
              display: block;
              margin-left: auto;
              margin-right: auto;
              width: auto;
            } 
            
            #logo{
              display: block;
              margin: auto;
              width: 25%;
            }
            
            .black-text{
              color: black;
            }
            
             .char-container{
                border: 50px solid transparent;
                border-image: url(/projects/chapter-gary/nextgen/images/nextgen-border.gif) stretch;
                border-image-slice: 70 fill;
                height: 300px;
                width: 200px;
                background-size: cover;
                font-family: DTM-Sans;
                padding: 5px;
                margin: 20px;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                justify-content: flex-end;
                align-items: center;
            }
            
            .char-container img{
              height: 80%;
              margin: auto;
            }
            
            table{
              border: 50px solid transparent;
              border-image: url(/projects/chapter-gary/nextgen/images/nextgen-border.gif) stretch;
              border-image-slice: 70 fill;
              background-color: var(--backgroundcolor);
              color: var(--textcolor);
              width: 100%;
              text-align: center;
            }
            
            th, td{
              padding: 15px 10px;
            }
            
            td{
              font-family: Pixel-Operator;
            }
            
            .table-container{
              max-width: 100%;
              overflow-x: scroll;
            }
            
            @media(orientation: portrait){
              
              body{
                background-position: center;
              }
              
          .container{
            width: 100%;
          }
              
              #logo{
              width: 80%;
            }
              
            }