:root {
  --body-bg-image: url('assets/images/background.png');
  --bg-color: #131B29; /*The original color of the TF website's background, with a 60% color and 70% overlay layer clipped on, colored in BLU Air of Debonaire.*/
  --cream-spirit: #B88035; /*Cream Spirit, BLU.*/
  --cream-dream: #FFF19A; /* A lighter version of Cream Spirit, for hovered-over links. */
  --link-orange: #B35215; /* The exact color of orange used for links on teamfortress.com. */
  --backpack-center: #3C362F;
  --backpack-background: #24201B;
  --bp-header: #B2B2B2;
  --bp-desc: #756B5E;
  
  /* in-game colors */
  
  --menu-button: #776B5F;
  --menu-text: #E9DECA;
  
  }
  
/* IMPORTANT!!: This CSS is directly copied from my own main site. To TJ: PLEASE UPDATE THE COLORS AND ALL THE CUSTOM PROPERTIES!! */

/*Fonts*/

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

@font-face {
  font-family: TF2 Build;
  src: url('/assets/fonts/TF2 Build.ttf');
}

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

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

body {
  font-family: 'Verdana', sans-serif;
  margin: 0;
  background-image: var(--body-bg-image);
  background-size: 100vh;
  background-repeat: repeat;
  color: var(--blue2);
}

body.not_found {
  background-image: none;
  background: #0F0C0A;
}

* {
  box-sizing: border-box;
}

/* Layout CSS */

/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than the other elements, you will need to move that div outside of the container */

#container {
  max-width: 984px;
  width: 100%;
  margin: 0 auto; /* This centers the entire page */
  padding-top: 32px;
  box-shadow: 100px;
}

  /* the area below is for all links on your page EXCEPT for the navigation */
  #container a {
    color: var(--link-orange);
    font-size: 1em;
    font-weight: bold;
    text-decoration:underline;
    cursor: pointer;
  }
  
    #container a:hover {
    color: #fff;
    font-weight: bold;
    text-decoration:underline;
    text-shadow: 10px;
  }

#inner-container {
  display: grid;
  text-align: center;
  justify-content: space-evenly;
  margin: 0 auto;
  padding: 12px;
  position:static
}
/* --- */

.mainHeader {
  font-family: 'TF2 Build';
  background-color: var(--link-orange);
  max-width:984px;
  max-height:24px;
  width:100%;
  height:100%;
}

#header_logo {
  display: block;
  margin:auto;
  width: 25%;
  height: 12.5%;
  padding: 14px;
  background-image: url('assets/images/tflogo.png');
}
  
  #header_logo:hover {
    mix-blend-mode: plus-lighter;
  }

/* Navigation Bar */
#navbar {
    display: flex;
    content: ' ';
    margin: 0 auto;
    list-style-type: none;
    background: linear-gradient(0deg,rgba(153, 154, 146, 1) 0%, rgba(196, 197, 187, 1) 25%);
    max-width: 900px;
    width: 100%;
    padding: 12px;
    border-radius: 12px 12px 0px 0px;
}

  #navbar ul {
    max-width: 900px;
    width: 100%;
    display: contents;
    margin: 0 auto;
    list-style-type: none;
    justify-content: space-evenly;
  }
  
  #navbar li {
    max-width: 900px;
    width: 100%;
    font-family: 'TF2 Build';
    font-size: 1em;
    list-style-type: none;
    text-align: center;
    margin: 0 auto;
    padding: 12px;
  }

    /* navigation links*/
    #navbar li a {
      color: #46423d;
      text-decoration: none;
    }
    /* navigation link when a link is hovered over */
    #navbar li a:hover {
      color: var(--link-orange);
      text-decoration: none;
    }

#nav-mobile {
  order: 2;
  display: none;
  margin: 0 auto;
  float: left;
  list-style-type: none;
  background: linear-gradient(0deg,rgba(153, 154, 146, 1) 0%, rgba(196, 197, 187, 1) 25%);
  max-width: 984px;
  width: 100%;
  padding: 12px;
}

  #nav-mobile ul {
    text-align: center;
    max-width: 984px;
    width: 100%;
    display: list-item;
    list-style-type: none;
    background: linear-gradient(0deg,var(--backpack-center) 0%, var(--backpack-background) 50%);
    border-radius: 12px;
    padding: 12px;
    box-shadow: inset 1px 1px 1px 1px white;
  }
  
    #nav-mobile li {
    font-family: 'TF2 Build';
    max-width: 128px;
    background: linear-gradient(0deg,rgba(153, 154, 146, 1) 0%, rgba(196, 197, 187, 1) 25%);
    border-radius: 12px;
    font-size: 1em;
    text-align: center;
    margin: 4px auto;
    padding: 6px;
  }
  
  #nav-mobile li a {
    text-decoration: none;
    color: #46423d;
  }
  
    #nav-mobile li a:hover {
    text-decoration: none;
    color: var(--link-orange);
  }
  
.current_event {
  position: relative;
  max-width: 984px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: var(--cream-dream);
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 24px;
}

.current_event text {
  text-align: center;
  display: block;
  padding: 48px;
  margin: 0 auto;
  max-width: 984px;
  max-height: 500px;
  width: 90%;
  height: 90%;
}

.current_event img {
  max-width: 256px;
  max-height: 256px;
  width: 100%;
  height: 100%;
}

#event_container {
  position: relative;
  display: flex;
  max-width: 600px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

#event_container img {
  max-width: 600px;
  max-height: 400px;
  width: 100%;
  height: 100%;
}

/* --- */

#footer {
    display: flex;
    margin: 0 auto;
    list-style-type: none;
    background: linear-gradient(0deg,var(--backpack-center) 0%, var(--backpack-background) 50%);
    max-width: 900px;
    width:100%;
    padding: 12px;
    border-radius: 0px 0px 12px 12px;
}

#footer p {
  font-size: 0.6em;
  text-align:center;
  color: #B2B2B2;
}
  
  button {
    font-family: 'TF2 Build';
    color: var(--menu-text);
    background-color: var(--menu-button);
    border-radius: 12px;
    font-size:24px;
    padding:12px;
    margin:12px;
    text-align:center;
    justify-content: space-evenly;
  }


#flex {
  display: flex;
}

/* --- */

main {
  max-width: 900px;
  color: var(--bg-desc);
  text-align:center;
  flex: 1;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(0deg,rgba(153, 154, 146, 1) 0%, rgba(196, 197, 187, 1) 25%);
}

main-2 {
  max-width: 900px;
  color: var(--bp-desc);
  text-align:center;
  flex: 1;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(0deg,var(--backpack-center) 0%, var(--backpack-background) 50%);
}

#notfound {
  display: grid;
  justify-content: center;
  align-items: center;
  text-align:center;
  margin: 0 auto;
  width: 512px;
  height: 512px;
  background-color: var(--backpack-background);
  border-radius: 24px;
  margin-top: 128px;
  padding:20px;
  
}

#notfound loading {
  width: 128px;
  height: 128px;
  content: url('assets/images/404.gif');
  margin: 24px auto;
  background-color: var(--backpack-center);
  border-radius:12px;
}

#notfound #404 {
  width: 420px;
  height: 300px;
  content: url('assets/images/404.png');
  margin: 0px auto;
  background-color: var(--backpack-center);
  border-radius:12px;
}

#notfound h2 {
  font-size:32px;
  font-family: 'TF2 Build';
  color: var(--bp-header);
}

#notfound p {
  font-family: 'TF2';
  font-size: 24px;
  color: var(--bp-desc);
  padding:24px; 
}

#notfound a {
  font-family: 'TF2';
  font-size: 28px;
  color: var(--link-orange);
  text-decoration: none;
}

#notfound a:hover {
  font-family: 'TF2';
  color: var(--link-orange);
  text-decoration: underline;
}

/* --- */

            h1,
            h2,
            h3 {
                color: var(--link-orange);
                font-family: 'TF2 Build', sans-serif;
                text-align: center;
            }

            h1 {
                font-size: 2em;
              
            }
            h2 {
                color: var(--link-orange);
                font-size: 1.5em;
                padding: 12px;
                text-shadow: #2A78DF;
            }

            h3 {
                font-size: 1.25em;
            }
            h4 {
                font-size: 1.125em;
            }

            strong {
                color: var(--gold);
            }

            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: var(--awful);
            }
          

/*Following is for the update box.*/
/*Example: <div class="update">text goes here ~✦</div>*/

/*I don't know HOW or WHY this finally worked, but this is for the scrollbar.*/
* {
    scrollbar-color: var(--cream-spirit) transparent;
    /*The first variable (color) is for the scrollbar twinkie itself. The second variable (also a color) is the color of the track.*/
    scrollbar-width:thick;
    border-radius: 0px;
}

::-webkit-scrollbar{
    width: 20px;
    height: 20px;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb{
    background: #C64EC8;
    border: 3.5px #C64EC8;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover{
    background: var(--link-orange);
    border-radius: 0px
}

::-webkit-scrollbar-track{
    background: var(--link-orange);
    border-radius: 0px;
    box-shadow: inset 0px 0px 0px 0px #F0F0F0;
}
/*End of scrollbar CSS*/

/* Beginning of classCard CSS (inspired by teamfortress.com) */

#classCard {
  background-image: url('assets/images/coldfront.png');
  background-position: right;
  max-width: 900px;
  width:100%;
  max-height: 620px;
  height:100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 10;
  margin: 0 auto;
  border-radius: 12px 12px 0px 0px;
}

#className {
  display: flex;
  background-image: url('assets/images/class_name_small.png');
  background-repeat: no-repeat;
  transform: rotate(-3deg);
  max-width: 512px;
  max-height: 67px;
  width: 100%;
  height: 100%;
  padding: 32px;
  margin: 24px 0px 48px 16px;
  z-index: 10;
  position: relative;
}

#classBio {
  font-family: 'Arial';
  text-shadow: 1px 1px 20px #AEAFA5;
  position: absolute;
  text-align: left;
  margin: 50px 50px;
  float: left;
  max-width: 450px;
  max-height: 600px;
  width: 100%;
  height: 100%;
  color: #46423d;
  line-height: 20px;
  overflow: hidden;
}

#classBio a {
  color: var(--link-orange);
  text-decoration: none;
}

#classBio a:hover {
  color: var(--link-orange);
  text-decoration: underline;
  cursor: not-allowed;
}

#classCardSoldier {
  background-image: url('assets/images/soldier_small.png');
  width: 405px;
  height: 600px;
  position: relative;
  background-repeat: no-repeat;
  float: right;
  margin-top:20px;
  z-index: 11;
  transform: scale(1.2),translate(-16px);
}

/* Wiki CSS */
#infobox {
  border: 2px solid #79542B;
  border-spacing: 2px;
  background-color: #FFFCF7;
  max-width: 500px;
  height:1000px;
  width: 100%;
  margin: 10px;
  display: table;
  float: right;
}

#infobox img {
  width: 80%;
  height: 80%;
}

#infobox_header_1 {
  font-family: 'Arial';
  background-color: #F3A957;
  padding: 4px;
}

#infobox_header_2 {
  font-family: 'Arial';
  background-color: #F9D483;
  padding: 2px;
}

#infotext {
  text-align:left;
  padding: 4px;
}

#wiki-bio {
  padding: 24px;
  text-align: left;
  color: var(--backpack-background);
  width:600px;
  height:600px;
  float:left;
}

.wiki-header {
  font-family: 'Times';
  font-style: lighter;
  color: var(--backpack-background);
  text-align: left;
}

.wiki-text {
  font-family: 'Arial';
}

.wiki-text a {
  color: #3F56AD
}

.wiki-text a:hover {
  text-decoration: underline
}

  
/* Drawbox */
        canvas {
            border: 6px;
            border-color: var(--link-orange);
            border-radius: 12px;
            cursor: crosshair;
            margin:24px;
        }
        
        canvas button {
          font-family: 'TF2 Build';
          color: var(--menu-text);
          background-color: var(--menu-button);
          border-radius: 12px;
          font-size:24px;
          padding:24px;
          margin:12px;
          text-align:center;
          justify-content: space-evenly;
        }
        
        input[type="color"] {
        width: 64px;
        height: 64px;
        border: 6px;
        border-radius: 50%;
        cursor: pointer;
        background: none;
        overflow: hidden;
        margin:24px;
        }
        
        #gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .image-container {
            border: 1px solid #ccc;
            padding: 5px;
            max-width: 200px;
            text-align: center;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width:900px) {
              
              #container {
                margin: 24px auto;
                width: 80%;
                padding: 4px;
              }
              
                #flex {
                    flex-wrap: wrap;
                }

                #navbar {
                  background: #c4c5bb;
                  content: 'Team Fortress 2';
                  font-family: 'TF2';
                  font-size: 24px;
                  height: 12px;
                }
                
                #navbar ul {
                  display: none;
                }
                
                #header {
                  max-width: 50% }
                
                #nav-mobile {
                  display: flex;
                }
                
                #classCard {
                  border-radius: 12px 12px 0px 0px;
                  overflow: scroll;
                }
                
                #classCardSoldier {
                  margin: 0 auto;
                  z-index: -11;
                  display: flex;
                  transform: scale(0.9);
                  background-image: url('assets/images/soldier_mobile.png');
                  max-width:400px;
                  max-height: 512px;
                  background-repeat: no-repeat;
                  float: none;
                }
                
                #classBio {
                  display: flex;
                  flex-wrap: wrap;
                  float: none;
                  padding: 24px;
                  margin: 0 auto;
                  max-width: 600px;
                  width: 100%;
                  height: 160%;
                  overflow: visible;
                }
                
                #className {
                  display: none;
                  background-image: url('assets/images/class_name_small.png');
                  background-repeat: no-repeat;
                  transform: rotate(-3deg);
                  max-width: 512px;
                  max-height: 256px;
                  width: 100%;
                  height: 100%;
                  padding: 32px;
                  margin: 24px 0px 48px 16px;
                  z-index: 10;
                  position: relative;
                  /*
                  display: flex;
                  background-image: url('assets/images/contract_photo.png');
                  background-repeat: no-repeat;
                  transform: none;
                  max-width: 300px;
                  max-height: 512px;
                  width: 100%;
                  height: 100%;
                  padding: 0px;
                  margin: 0 auto;
                  z-index: 11;
                  
                  overflow: visible;
                  position: relative;
                  */
                }
                
            }
                  
                
                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
      
                main {
                    order: 1;
                    display:flex;
                }
              
            }