header {
  height : 100vh;
  width : 100vw;
  background-color : black;
  background-image : url("../images/home-header.png");
  background-repeat : no-repeat;
  background-size : cover;
  background-position : top;
  display : flex;
  align-items : center;
  justify-content : center;
  margin : 0!important;
  padding : 0!important;
  position : relative;
}

header > div {
  display : flex;
  align-items : flex-start;
  justify-content : center;
  flex-direction : column;
  width : 70%;
  height : 80%;
  position : relative;
  bottom : 0;
}

header > div > button {
  background-color : var(--white);
  color : var(--dark-blue);
  border : 3px solid var(--white);
}

header > div > button:hover {
  color : var(--white);
  border : 3px solid var(--dark-blue);
}

header > div > button:before {
  background-color: var(--dark-blue);
}

#privacy {
  height : auto;
  padding : 100px 150px 100px 150px;
}

#privacy > p {
  color : var(--white);
}

#soon {
  background-image : url("../images/soon.png");
  background-repeat : no-repeat;
  background-size : cover;
  background-position : top;
  justify-content : center;
}

#soon > div {
  display : flex;
  align-items : flex-end;
  justify-content : center;
  flex-direction : column;
  width : 70%;
  height : 80%;
  position : relative;
  bottom : 0;
  text-align : right;
  margin : 50px;
}

#event-countdown {
  width : 216px;
  height : 160px;
  object-fit : contain;
}

#countdown-section {
  background-color : var(--black);
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  padding : 50px 0 40px 0;
}

#timer {
  display : flex;
  flex-direction : row;
  align-items : flex-start;
  justify-content : center;
  width : auto;
  margin : 10px;
}

#timer > div {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  width : 60px;
}

#timer > div > p {
  font-family : var(--bodyFont); /* var(--themefont) */
  width : 100%;
  height : auto;
  background-color : var(--dark-blue);
  font-size : 32px;
  text-align : center;
  color : var(--black);
  margin : 0;
  padding : 0;
}

#timer > p {
  font-family : var(--bodyFont); /* var(--themefont) */
  font-size : 32px;
  text-align : center;
  color : var(--black); /* var(--grey) */
  margin : 0;
  padding : 0;
  margin-left : 5px;
  margin-right : 5px;
}

#timer > div > p {
  font-size : 20px;
  color : var(--white); /* var(--grey) */
  font-family : var(--bodyFont);
  font-weight : 800;
  margin : 0;
  padding : 0;
  text-align : center;
}

#rankings > div {
  display : flex;
  flex-direction : row;
  align-items: center;
  justify-content : center;
  flex-wrap : wrap;
}

#rankings > div > span {
  display : flex;
  flex-direction : column;
  align-items: flex-start;
  justify-content : flex-start;
  height : 60vh;
  width : 15vw;
  margin : 20px;
  color : var(--white);
}

#rankings > div > span > .fight-card-description {
  font-size : 24px;
  font-weight : bold;
  color : var(--light-blue);
}

#fight-cards {
  display : flex;
  flex-direction : row;
  align-items: center;
  justify-content : center;
  flex-wrap :wrap;
  padding : 50px 0;
  margin : 0!important;
  /*background-image: url("../images/fight-card-background.png");
  background-size : cover;
  background-repeat: no-repeat;
  background-position : bottom;*/
  background-color: var(--black);
}

#fight-cards > div {
  width : 50%;
  height : auto;
  display : flex;
  flex-direction : column;
  align-items: center;
  justify-content : center;
  flex-wrap : wrap;
}

#fight-cards > div > * {
  color : var(--white);
  text-shadow : none;
}

#fight-cards > div > h3 {
  font-size : 26px;
}

.fight-card-description {
  font-size : 16px;
  margin : 0;
}

.fight-card-fighter {
  font-size : 22px;
  margin : 5px 2px 8px 5px;
}

#fight {
  justify-content : flex-end;
  background-color : var(--black);
  background-image : url("../images/home-fight.png");
  background-repeat : no-repeat;
  background-size : cover;
  background-position : center;
  height : 50vh;
  margin : 0;
  padding: 0;
}

#grapple {
  justify-content : flex-start;
  background-color : var(--black);
  background-image : url("../images/home-grapple.png");
  background-repeat : no-repeat;
  background-size : cover;
  background-position : center;
  height : 50vh;
  margin : 0;
  padding: 0;
}

#fight > div, #grapple > div {
  margin : 50px;
  display : flex;
  flex-direction : column;
  align-items : flex-end;
  justify-content : space-around;
  position : relative;
  right : 10vw;
  height : 60%;
}

#grapple > div > .title-container {
  justify-content : flex-start;
  align-items : flex-start;
}

#grapple > div > .title-container > * {
  text-align : left;
}

#fight > div > .title-container {
  justify-content : flex-end;
  align-items : flex-end;
}

#fight > div > .title-container > * {
  text-align : right;
}

#grapple > div {
  align-items : flex-start;
  left : 10vw;
}

#fight > div > div > h3, #fight > div > p {
  color : var(--white);
  margin : 0;
}

#fight > div > hr {
  border-color : var(--white);
  width : 25vw;
  margin : 0;
}

#grapple > div > hr {
  border-color : var(--dark-blue);
  width : 25vw;
  margin : 0;
}

#fight > div > *, #grapple > div > * {
    margin : 0;
}
#youtube {
  padding : 50px 0 100px 0!important;
}

#youtube > div {
  width : 100%;
  height : 100%;
}

#youtube > div > div {
  width : 15%;
}

#youtube > div > div > * {
  color : var(--white);
}

#youtube > div > iframe, #thumb {
  width : 60vw;
  height : 50vh;
  object-fit : cover;
  object-position : center;
}

#youtube > * {
  color : var(--white);
}

#event-links > a {
  text-decoration : underline;
}

#shop {
  background-color : var(--dark-blue);
  position : relative;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  overflow : hidden;
}

#shop > h2 {
  color : var(--white);
}

#event-date {
  display : none;
}

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


  header > div {
    align-items : center;
    justify-content : center;
    flex-direction : column;
    width : 100%;
    height : 100%;
  }

  header {
    background-image : url("../images/home-header-mobile.jpg");
    background-repeat : no-repeat;
    background-size : cover;
    background-position : center;
  }

  #countdown-section {
    flex-direction : column;
  }

  #countdown-section > img {
    margin : 0;
    margin-bottom : 10px;
    width : 50%;
    height : auto;
  }

  #fight-cards {
    flex-direction : column;
  }

  #fight-cards > div {
    width : 100%;
  }

  #fight {
    align-items : center;
    justify-content : center;
    background-image : url("../images/home-fight-mobile.png");
    height : 100vh;
  }

  #grapple {
    justify-content : center;
    align-items : center;
    background-image : url("../images/home-grapple-mobile.png");
    height : 100vh;
  }

  #fight > div, #grapple > div {
    align-items : center;
    justify-content : space-around;
    position : relative;
    right : 0;
    height : 60%;
    width : 80vw;
    margin : 0;
  }

  #grapple > div > .title-container {
    justify-content : center;
    align-items : center;
  }

  #grapple > div > .title-container > * {
    text-align : center;
  }

  #fight > div > .title-container {
    justify-content : center;
    align-items : center;
  }

  #fight > div > .title-container > * {
    text-align : center;
  }

  #fight > div > p , #grapple > div > p {
    font-weight : bold;
    color : var(--white);
  }

  .title-container {
    width : 100%;
    height : auto;
    padding : 0;
    padding-top : 5px;
    padding-bottom : 5px;
  }

  .title-container > h3 {
    color : var(--white);
    font-size : 26px;
  }

  .title-container > h5 {
    font-size : 24px;
  }

  #animate-fight, #animate-grapple {
    background-color : rgb(30,30,30,0.8);
    width : 80vw;
  }

  #animate-fight > .title-container > h5, #animate-grapple > .title-container > h5 {
    color : var(--light-blue);
  }

  #grapple > div {
    align-items : center;
    left : 0;
  }


  #fight > div > hr {
    border-color : var(--white);
    width : 30vw;
    margin : 0;
  }

  #grapple > div > hr {
    border-color : var(--white);
    width : 30vw;
    margin : 0;
  }

  #fight > div > *, #grapple > div > * {
      margin : 0;
  }

  #grapple > div > .button-container > .empty-button {
    background-color: rgb(0,0,0,0);
    border : 3px solid var(--white);
    color : var(--white);
  }

  #youtube {
    height : auto;
    padding-bottom : 100px;
  }

  #youtube > div {
    width : 100%;
    height : 100%;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    text-align : center;
  }

  #youtube > div > div {
    width : 90%;
  }

  #youtube > div > div > * {
    color : var(--white);
  }

  #youtube > div > iframe, #thumb {
    width : 80%;
    height : auto;
  }

  #youtube > * {
    color : var(--white);
  }

  #event-links > a {
    text-decoration : underline;
  }

  #card-2, #card-3 {
    display : none;
  }

  #soon {
    background-image : url("../images/soon-mobile.jpg");
    background-repeat : no-repeat;
    background-size : cover;
    background-position : top;
    justify-content : center;
    align-items : center;
  }

  #soon > div {
    display : flex;
    align-items : center;
    justify-content : center;
    flex-direction : column;
    width : 90%;
    height : 80%;
    position : relative;
    bottom : 0;
    text-align : right;
    margin : 0;
  }

  #privacy {
    height : auto;
    padding : 100px 50px 100px 50px;
  }

  #rankings > div {
    display : flex;
    flex-direction : column;
    align-items: center;
    justify-content : center;
    flex-wrap : nowrap;
  }

  #rankings > div > span {
    display : flex;
    flex-direction : column;
    align-items: flex-start;
    justify-content : flex-start;
    height : auto;
    width : 60vw;
    margin : 20px;
    color : var(--white);
  }

}