@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600&display=swap');

.container { 
  padding-top: 7vh;
  margin: auto;
  padding: auto;
  width: 38%;
  place-items: center;
}

.buildContainer {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  place-items: center;
}

.VIDEO {
  place-items: center;
}

.buildList .buildListing {
  list-style-type: none;
  padding: 1px;
  margin: 1px;
}

.buildList {
  display: flex;
  padding: auto;
  margin: auto;
}

.socialsContainer {
  margin: auto;
  padding: auto;
  width: 100%;
  place-items: center;
}

.DiscordDiv {
  place-items: center;
}

#buttonBuild {
  padding-right: 90%;
}


/* 
.container {  display: grid;
  grid-template-columns: 0.6fr 1.9fr 0.9fr 1fr 1.1fr 1.4fr;
  grid-template-rows: 2.1fr 1.9fr 0.1fr 4.1fr 1fr 1.6fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "MAIN-HAND MAIN-HAND VIDEO VIDEO VIDEO VIDEO"
    "OFF-HAND OFF-HAND VIDEO VIDEO VIDEO VIDEO"
    "OFF-HAND OFF-HAND VIDEO VIDEO VIDEO VIDEO"
    "GEAR GEAR STATS STATS TREES TREES"
    "GEAR GEAR STATS STATS TREES TREES"
    "GEAR GEAR STATS STATS TREES TREES";
  width: 80%;
  padding-left: 12%;
  padding-top: 5%;
}

.VIDEO {
  justify-self: stretch;
  align-self: baseline;
  grid-area: VIDEO;
  overflow: hidden;
}

.MAIN-HAND {
  justify-self: stretch;
  align-self: stretch;
  grid-area: MAIN-HAND;
  overflow: hidden;
}

.OFF-HAND {
  justify-self: stretch;
  align-self: stretch;
  grid-area: OFF-HAND;
}

.GEAR {
  justify-self: stretch;
  align-self: stretch;
  grid-area: GEAR;
}

.STATS {
  justify-self: stretch;
  align-self: stretch;
  grid-area: STATS;
}

.TREES {
  justify-self: stretch;
  align-self: stretch;
  grid-area: TREES;
}
*/
  
  .gear_texts {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
  }

  .gear_texts_grid2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
  }
  
  .clips {
    box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
  }

  .bow_icon:hover {
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    width: 21%;
  }

  .linksDiscord {
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    width: 50%;
    place-items: center;
     
  }
  .linksDiscord:hover {
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    width: 53%;
    box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
  }

  .musket_icon:hover {
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    width: 21%;
  }

  .TimelessClass {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }

  .TimelessClass:hover {
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    width: 16.5%;
  }

  .TimelessShards {
    text-decoration: none;
  }

  .TimelessDiv {
    padding-top: 20px;
  }

/* OFF HAND CLASSES ----- OFF HAND CLASSES ----- OFF HAND CLASSES -----OFF HAND CLASSES -----OFF HAND CLASSES -----OFF HAND CLASSES */


  .rapier_icon {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .ice_icon {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .void_icon {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .fire_icon {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .spear_icon {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .bb_icon {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .hatchet_icon {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .bow_icon2 {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .musket_icon2 {
    width: 15%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }


  .rapier_icon:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .ice_icon:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .void_icon:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .fire_icon:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .spear_icon:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .bb_icon:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .hatchet_icon:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .bow_icon2:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  .musket_icon2:hover {
    width: 16%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }

/* OFF HAND CLASSES ----- OFF HAND CLASSES ----- OFF HAND CLASSES -----OFF HAND CLASSES -----OFF HAND CLASSES -----OFF HAND CLASSES */

  .StatImages {
    width: 75%;
  }

  .ConsumableImages {
    width: 30%;
  }

  .musket_icon {
    width: 20%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }

  .bow_icon {
    width: 20%;
    animation: fadeInAnimation ease-in-out 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }

  .title_texts {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    margin: 0%;
    padding: 0%;
  }

  .subtitle_texts {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 26px;
  }

  .links {
    text-decoration: none;
  }

  .gear_icon {
    box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
    width: 70%
  }

  .gear_icon_grid2 {
    box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
    width: 40%
  }

  .PerkIcons {
    width: 5%;
  }

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes fadeOut {
    100% { opacity: 0; }
    0% { opacity: 1; }
  }


/* QUERIES ----- QUERIES ----- QUERIES ----- QUERIES ----- QUERIES ----- QUERIES ----- QUERIES ----- QUERIES ----- QUERIES ----- QUERIES */

  @media only screen and (max-width: 768px) {
    .container {
      display: list-item;
      overflow-x: hidden;
      align-items: center;
      height: fit-content;
      width: 96%;
      padding: 20px;
      margin-left: 20px;
      justify-content: center;

    }
    .gear_texts {
        font-size: 15px;
    }
    .buildContainer {
      margin: 5px;
      width: 90%;
    }
    .buildList {
      margin: 0;
      padding: 0;
      width: 100%;
      overflow-x: hidden;
      display: block;

    }
    .buildListing {
      padding: 0;
      margin: 0;
      overflow-x: hidden;
    }
    #buttonBuild {
      padding-right: 75%;
    }
    .STARS {
      width: 25%;
    }
    .MobileSwitchOFF {
      display: none;
    }
    .gear_icon {
      width: 100%;
    }
    .clips {
      width: 320px;
      height: 180px;
    }
    .title_texts {
      font-size: 30px;
    }
    .ConsumableImages { 
      width: 80%;
      align-items: center;
    }
    .StatImages {
      width: 100%;
    }

    .linksDiscord {
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
      width: 100%;
      place-items: center;
      
    }
    .linksDiscord:hover {
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
      width: 103%;
      box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
    }

    .TimelessClass {
      width: 20%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .TimelessClass:hover {
      width: 21%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }

    .DiscordDiv {
      width: 70%;
    }

    .rapier_icon {
      width: 23%;
    }
    .ice_icon {
      width: 23%;
    }
    .void_icon {
      width: 23%;
    }
    .fire_icon {
      width: 23%;
    }
    .spear_icon {
      width: 23%;
    }
    .bb_icon {
      width: 23%;
    }
    .hatchet_icon {
      width: 23%;
    }
    .bow_icon2 {
      width: 23%;
    }
    .musket_icon2 {
      width: 23%;
    }

    .TwitchEmbedClass {
     width: 70%;
     zoom: 60%;
    }
    
    .TwitchDiv {
     width: 70%;
    }

    .musket_icon {
      width: 40%;
    }
    .bow_icon {
      width: 40%;
    }


    .PerkIcons {
      width: 8%;
    }



    .bow_icon:hover {
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
      width: 45%;
    }
  
    .musket_icon:hover {
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
      width: 45%;
    }



    .rapier_icon:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .ice_icon:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .void_icon:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .fire_icon:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .spear_icon:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .bb_icon:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .hatchet_icon:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .bow_icon2:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .musket_icon2:hover {
      width: 23.5%;
      animation: fadeInAnimation ease-in-out 1s;
      animation-iteration-count: 1; 
      animation-fill-mode: forwards; 
      transition: width 0.44s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
  }