@import url('https://fonts.cdnfonts.com/css/better-faster');
@import url("https://use.typekit.net/edq0txv.css");
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

  @import url("https://use.typekit.net/edq0txv.css");

@import url("https://use.typekit.net/edq0txv.css");

:root {
  --themeFont : "industry", sans-serif; /*'Better Faster'*/
  --bodyFont : "industry", sans-serif;
  --black : #49B0CF; /*#070710*/
  --grey : #1D819F;
  --light-grey : #081526; /*#F6F6F6*/
  --light-blue : white; /*#4D68A4 */
  --dark-blue : #3CA1BF; /*#020E49*/
  --white : white;
}



#cart-button {
  height : 30px;
  width : 30px;

  position : absolute;
  right : 20px;
}

#cart-button > svg {
  fill : var(--black);
}

nav > * > * {
  text-shadow: none!important;
}

::-webkit-scrollbar {
  background : var(--black);

}

::-webkit-scrollbar-thumb {
  background-color : var(--grey);
}

::-webkit-scrollbar-thumb:hover {
  background: #14718D;
}

body {
  margin : 0;
  padding : 0;
  background-color : var(--black);
  width : 100vw!important;
  height : auto;
  overflow-x : hidden;
}

a {
  color : inherit;
  text-decoration : none;
}

#events {
  width:100%;
  height:100vh;
  padding:0;
  margin:0;
  background-image : url("../images/events.jpg");
  background-repeat : no-repeat;
  background-size : cover;
}

nav {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : space-around;
  width : 90vw;
  height : 10vh;
  background-color : var(--white);
  position : absolute;
  left : 5vw;
  top : 5vh;
  z-index: 99;
}

.banner {
  height : 5vh;
  width: 100%;
  display: grid;
  place-items : center;
  background-color: var(--black);
}

.banner > p {
  color : var(--light-blue);
  margin : 5px;
}

#popup {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  position : fixed;
  width : 60vw;
  height : auto;
  z-index : 99;
  background-color : var(--black);
  left : 20vw;
  top : 15vh;
  padding : 20px;
}

#popup > * {
  width : 45%;
  height : auto;
  display : flex;
  flex-direction : column;
  align-items : flex-start;
  justify-content : center;
}

#popup > * > * {
  color : var(--white);
  text-align : left;
}

#close {
  background-color : rgb(0,0,0,0)!important;
  border : 0;
  color : var(--white);
  width : 50px;
  height : 50px;
  font-size : 20px;
  position : absolute;
  top : 10px;
  left : 15px;
  cursor : pointer;
}

#close:hover {
  transform : scale(1.05);
}

#shop {
  background-color : #1D819F;
}



nav > a > h6, nav > a > p {
  width :10%;
  height : auto;
  padding-top : 5px;
  padding-bottom : 5px;
  font-family : var(--bodyFont);
  font-size : 18px;
  font-weight : 800;
  font-stretch: condensed;
  text-transform : uppercase;
  color : #1D819F;
}

nav > a > h6:hover {
  text-decoration : underline;
}

nav > img {
  height : 80%;
  width : auto;
}

.small-header {
  font-size : 120px;
  line-height : 120px;
  margin-bottom : 0!important;
  text-shadow: 3px 3px 9px rgba(0, 0, 0, 1);
}

.small-header > b {
  font-size : 100px;
  line-height : 140px;
  color : var(--black);
}

.anouncement {
  font-size : 50px;
  width : 40%;
  margin-left : 10px;
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 1);
}

h1 {
  color : var(--white);
  font-family : var(--bodyFont);
  font-size : 140px;
  width : 60%;
  font-weight : 800;
  letter-spacing : -5px;
  line-height : 140px;
  margin-bottom : 30px;
  font-style : italic;
  position : relative;
}

h1 > b {
  font-family : var(--bodyFont);
  letter-spacing : 0;
  color : var(--light-blue); /* light blue */
  font-weight : 800; /* normal */
  text-transform : uppercase;
  text-decoration : underline;
  font-size : 120px;
  position : relative;
  bottom : 10px;
  left : 10px;
}

.empty-button {
  border : 3px solid var(--white)!important;
  background-color : var(--grey)!important;
}

.empty-button:hover > span {
  color : var(--grey)!important;
}

.empty-button > span {
  color : var(--white)!important;
}

button {
  appearance: none;
  background-color: var(--white)!important; /* var(--dark-blue) */
  border : 3px solid var(--white); /* var(--dark-blue) */
  box-sizing: border-box;
  color: var(--dark-blue); /* var(--white) */
  cursor: pointer;
  display: inline-block;
  font-family: var(--bodyFont);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1em;
  margin: 0;
  opacity: 1;
  outline: 0;
  padding: 2em 2.2em 1.5em 2.2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-rendering: geometricprecision;
  text-transform: uppercase;
  transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1),background-color 100ms cubic-bezier(.694, 0, 0.335, 1),color 100ms cubic-bezier(.694, 0, 0.335, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  var(--white)-space: nowrap;
  transition-duration : 0.3s;
  margin : 10px;
}

.button-container {
  display : flex;
  align-items : center!important;
  justify-content : flex-start!important;
  flex-direction : row!important;
  width : 90%!important;
}

.button-container > * {
  margin : 0;
  margin-right : 10px;
}

button:has(a) {
  margin : 0!important;
}

button:hover {
  border : 3px solid var(--light-blue);
}

#subscribe {
  margin : 0;
  margin-top : 10px;
}

.empty-button {
  background-color: rgb(0,0,0,0);
  border : 3px solid var(--dark-blue);
  color : var(--dark-blue);
}

.empty-button:hover {
  color : var(--white);
  border : 3px solid var(--light-blue);
}

button:before {
  animation: opacityFallbackOut .5s step-end forwards;
  backface-visibility: hidden;
  background-color: var(--light-blue);
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
  width: 100%;
}

button:hover:before {
  animation: opacityFallbackIn 0s step-start forwards;
  clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}

button:after {
  background-color: var(--white);
}

button:hover > span {
  color : var(--dark-blue);
}

button span {
  z-index: 1;
  position: relative;
  transition-duration: 0.3s;
}

.button-container {
  display : flex;
  align-items : center;
  justify-content : center;
}





section {
  padding : 0;
  padding-top : 50px;
  padding-bottom : 50px;
  overflow-x : hidden;
}

.flex-container {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  margin : 0;
  padding : 0;
  height : auto;
  width : 100%;

}

.shop-img {
  width : 20vw!important;
  height : auto;
  margin : 20px;
}

h2 {
  text-align : center;
  font-family : var(--bodyFont);
  color : var(--dark-blue);
  text-transform : uppercase;
  font-size : 28px;

}

@keyframes fadeleft {
  0% {
    left : -100px;
    opacity : 0;
  }
  30% {
    left : 100px;
    opacity : 1;
  }

  90% {
    left : 100px;
    opacity : 1;
  }
}

@keyframes fadeheader {
  0% {
    left : -100px;
    opacity : 0;
  }
  100% {
    left : 0;
    opacity : 1;
  }
}

@keyframes faderight {
  0% {
    right : -200px;
    opacity : 0;
  }
  30% {
    right : 100px;
    opacity : 1;
  }

  90% {
    right : 100px;
    opacity : 1;
  }
}

@keyframes unfoldOut {
  0% {
    transform:scaleY(.005) scaleX(0);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {

    transform:scaleY(1) scaleX(1);
  }
}

@keyframes pop {
  0% {
    transform : scale(2.4) rotate(3deg);
  }
  50% {
    transform : scale(2.5) rotate(3deg);
  }
  100% {
    transform : scale(2.4) rotate(3deg);
  }

}

#animate-soon {
  position : relative;
  animation: pop 2s linear infinite;
}

#animate-fight {
  position : relative;
  animation: faderight 2s linear 1;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -3s);
}



#animate-grapple {
  position : relative;
  animation: fadeleft 2s linear 1;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -3s);
}

#animate-header {
  position : relative;
  left : 0;
  animation: fadeheader 0.5s linear 1;
}
/*
nav {
  animation: unfoldOut 1.5s linear 1;
} */

h3 {
  font-family : var(--bodyFont);
  color : var(--dark-blue);
  text-transform : uppercase;
  font-size : 22px;
}

h4 {
  font-family : var(--bodyFont);
  color : var(--dark-blue);
  font-size : 20px;
}

h5 {
  font-family : var(--bodyFont);
  color : var(--light-blue);
  font-size : 20px; /* light blue */
  font-weight : bold; /* normal */
  text-transform : uppercase;

}

p {
  font-family : var(--bodyFont);
  font-size : 18px;
}



.title-container {
  display : flex;
  flex-direction : column;
  flex-wrap : nowrap;
  margin : 0;
  padding : 0;
}

.title-container > * {
  margin : 0;
  padding : 0;
}

.icon {
  width : 40px;
  height : 50px;
  margin-right : 10px;
  object-fit : contain;
  object-position : center;
}

/* Footer */

footer {
  padding : 50px 0 0 0;
}

#footer-top {
  display : flex;
  align-items : center;
  justify-content : center;
}

#footer-top > div {
  width : 40%;
  height : 40vh;
  display : flex;
  flex-direction : column;
  justify-content : flex-start;
  margin : 20px;
}
#left-pane {
  align-items : flex-start;
}

#left-pane > div {
  align-items : flex-start;
  justify-content : flex-start;
}

.footer-head {
  color : var(--white);
  text-transform : uppercase;
}

#subscribe-form {
  display : flex;
  flex-direction : column;
  justify-content : space-around;
  align-items : flex-end;
}

#right-pane {
  align-items : flex-end;
}

a {
  text-decoration : none;
}

.footer-text {
  font-family : var(--bodyFont);
  text-decoration : none;
  color : var(--white);
  var(--white)-space : nowrap!important;
  width : auto;
}

#subscribe-form > input {
  border : 0;
  font-family : var(--bodyFont);
  color : var(--white);
  background-color : rgb(0,0,0,0);
  border-bottom : 2px solid var(--white);
  padding : 2px;
  width : 100%;
  text-align : right;
}

#footer-nav {
  font-size : 16px;
  display : flex;
  align-items : center;
  justify-content : center;
  flex-wrap : wrap;
}

#footer-nav > a > h4, #footer-nav > a > p {
  font-family : var(--bodyFont);
  color : var(--white);
  font-weight : normal;
  margin : 10px 20px 10px 20px;
  font-size : 18px;
}

footer > hr {
  width : 60%;
}

footer > * {
  text-align : center;
}

#hamburger-container {
  display : none;
}

#contact {
  display : flex;
  flex-direction: column;
  align-items : center;
  justify-content : center;
  text-align : center;
  height : 90vh;
}

#contact > h2 {
  color : var(--light-blue);
}

@media screen and (max-width: 980px) {

  .flex-container {
    display : flex;
    flex-direction : column;
    width : 100%;
    height : auto;
  }

  .shop-img {
    width : 90%!important;
    height : auto;
  }

  #hamburger-container {
    display : block;
  }

  .small-header {
    font-size : 60px;
    width : 95%;
    line-height : 60px;
    text-align : center;
  }

  .small-header > b {
    font-family : var(--bodyFont);
    font-weight : 800; /* normal */
    text-transform : uppercase;
    text-decoration : underline;
    font-size : 65px;
    position : relative;
    bottom : 2px;
    left : 2px;
    line-height : 60px;
    margin : 0;
  }

  .anouncement {
    font-size : 50px;
    width : 90%;
    margin-left : 0;
    text-align : center;
  }

  h1 {
    font-size : 70px;
    width : 95%;
    line-height : 70px;
    text-align : center;

  }

  h1 > b {
    font-family : var(--bodyFont);
    letter-spacing : 0;
    color : var(--light-blue); /* light blue */
    font-weight : 800; /* normal */
    text-transform : uppercase;
    text-decoration : underline;
    font-size : 65px;
    position : relative;
    bottom : 2px;
    left : 2px;
  }

  .hamburger {
    display : block;
    width : 50px;
    height : 50px;
    position : absolute;
    left : 20px;
    top : 20px;
    transition-duration: 0.5s;
    font-size : 40px;
    color : var(--white);
    background-color : rgb(0,0,0,0)!important;
    border-radius : 50px;
    border : none;
    cursor : pointer;
    z-index : 98;
    line-height : 5px;
  }

  #hamburgerX {
    z-index : 99!important;
    opacity : 0;
    color : var(--dark-blue);
    }

    nav {
      position : absolute!important;
      width : 100%;
      top : 0;
      left : -120%;
      height : 100vh;
      margin : 0;
      padding : 0;
      background-color : var(--white);
      z-index : 90!important;
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content: center;
      overflow : hidden;
      transition-duration : 0.5s;
    }

    nav > h6 {
      width :100%;
      text-align : center;
      background-color : rgb(0,0,0,0.02);

    }

    #nav > a > p {
      color : #1D819F;
    }

    nav > img {
      display : none;
    }

    .button-container {
      flex-direction : column;
      align-items : center!important;
      justify-content : center!important;
    }

    .button-container > * > * {
      width : 100%;
      margin : 0!important;
    }

    /* Footer */

    footer {
      padding : 50px;
    }

    #footer-top {
      flex-direction : column;
    }

    #footer-top > div {
      width : 90%;
      height : auto;
      margin : 20px;

    }
    #left-pane {
      align-items : center;
    }

    #footer-top > div > h3, #subscribe-form > h3 {
      color : var(--white);
    }

    #subscribe-form {
      align-items : center;
    }

    #right-pane {
      align-items : center;
    }

    #left-pane {
      align-items : center;
    }

    #left-pane > div {
      align-items : center;
      justify-content : center;
    }

    a {
      text-decoration : none;
    }

    .footer-text {
      font-family : var(--bodyFont);
      text-decoration : none;
      color : var(--white);
    }

    .button-container {

    }

    #subscribe-form > input {
      padding : 5px;
      text-align : center;
    }

    #footer-nav {
      font-size : 16px;
      display : flex;
      align-items : center;
      justify-content : center;
      flex-wrap : wrap;
    }

    #footer-nav > a > h4, #footer-nav > a > p {
      font-family : var(--bodyFont);
      color : var(--white);
      font-weight : normal;
      margin : 10px 20px 10px 20px;
      font-size : 18px;
    }

    footer > hr {
      width : 60%;
    }

    footer > * {
      text-align : center;
    }

    #animate-fight {
      position : relative;
      animation: 0;
      animation-play-state: paused;
      animation-delay: calc(var(--scroll) * -4s);
    }

    #animate-grapple {
      position : relative;
      animation: 0;
      animation-play-state: paused;
      animation-delay: calc(var(--scroll) * -4s);
    }

    #animate-header {
      position : relative;
      left : 0;
      animation: fadeheader 0.5s linear 1;
    }

    @keyframes fadeleft {
      0% {
        left : -200px;
        opacity : 0;
      }
      50% {
        left : 0;
        opacity : 1;
      }

      100% {
        left : 0;
        opacity : 1;
      }
    }

    @keyframes fadeheader {
      0% {
        left : -200px;
        opacity : 0;
      }
      100% {
        left : 0;
        opacity : 1;
      }
    }

    @keyframes faderight {
      0% {
        right : -200px;
        opacity : 0;
      }
      50% {
        right : 0px;
        opacity : 1;
      }

      100% {
        right : 0px;
        opacity : 1;
      }
    }

    #popup {
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content : center;
      position : fixed;
      width : 80vw;
      height : auto;
      z-index : 99;
      background-color : var(--black);
      left : 2vw;
      top : 2vh;
      padding : 20px;
    }

    #popup > * {
      width : 90%;
      height : auto;
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content : center;
    }

    #popup > img {
      width : 70%;
    }

    #popup > * > * {
      color : var(--white);
      text-align : center;
    }

    #close {
      background-color : rgb(0,0,0,0)!important;
      border : 0;
      color : var(--white);
      width : 50px;
      height : 50px;
      font-size : 20px;
      position : absolute;
      top : 10px;
      left : 15px;
      cursor : pointer;
    }

    #events {
      width:100vw;
      height:100vw;
      padding:0;
      margin:0;
      background-image : url("../images/events-mobile.jpg");
      background-repeat : no-repeat;
      background-size : cover;
    }

    #cart-button {
      height : 30px;
      width : 30px;

      position : relative;
      right : 0;
    }

    .button-container {
      display : flex;
      align-items : center!important;
      justify-content : center!important;
      flex-direction : column!important;
      width : 100%;
    }

    .button-container > a, .button-container > button {
      width : 90%;
    }

    .button-container > a > button {
      width : 100%!important;
    }

    .button-container > * {
      margin : 10px 0;
    }

    button > span {
      text-align : center!important;
    }

    button:has(a){
      margin : 0!important;
    }

}