@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: #fac98c;
  --textshadow: #9c2e2c;
  --header:#969696; /*insert image here later maybe. like a cool header or something idk*/
  --main: black;
  --footer: black;
  --borders: #212121;

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

}

              body {
                font-family: 'DTM-Sans', sans-serif;
                font-size: 22px;
                margin: 0;
                background-image: url('https://i.imgur.com/3NYEgOx.png');
                background-attachment: fixed;
                background-size: auto;
                background-repeat: no-repeat;
                    }
                    
                    ::-moz-selection { /* Code for Firefox */
                    color: black;
                    background: lightpink;
                  }
                  
                ::selection {
                    color: black;
                    background: lightpink;
                  }
                      
              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: 26px solid transparent;
                border-image: url(https://i.imgur.com/DuEVw26.gif) 52 stretch;
                border-image-slice: 27.3% 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 var(--textcolor), 0px -3px var(--textcolor);
            }
            
            .navbar a{
              color: var(--textcolor);
              padding: 0px 10px;
              text-decoration: none;
            }

            .navbar a:hover{
              color: white;
              text-decoration: none;
            }            
            
            .navbutton{
              font-family: DTM-Sans;
              font-size:30px;
              text-shadow: 3px 3px var(--textshadow);
            }
            
            h1,h2 {
              font-size: 30px;
              text-shadow: 3px 3px var(--textshadow);
              color: var(--textcolor);
              
            }
            
            h2 {
              font-size: 25px;
            }
            
            a h2 {
              color: #fef101;
              text-shadow: none;
              text-decoration: none;
            }

             a h2:hover{
              text-shadow: 0 0 1px ;
              color: #ffadc9;
              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: 50%;
            }
            
            .black-text{
              color: black;
            }
            
            .char-container{
                border: 26px solid transparent;
                border-image: url(https://i.imgur.com/DuEVw26.gif) 52 stretch;
                border-image-slice: 27.3% 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;
            }
            
            @media(orientation: portrait){
              
              body{
                background-position: center;
              }
              
          .container{
            width: 100%;
          }
              
              #logo{
              width: 80%;
            }
              
            }