/* 
---------------------------------------------
GENERAL
--------------------------------------------- 
*/

body {
  background-color: black;
  font-family: "Dank Mono", ui-monospace, monospace;
}

a:hover {
  color: white;
}

/* 
---------------------------------------------
Hero Section
--------------------------------------------- 
*/

.heroSection {
  position: relative;
  overflow: hidden;
}

.heroSection::before {
  position: absolute;
  content: " ";
  width: 100vw;
  height: 100vh;
  background-color: #00000048;
  z-index: 1;
}

.heroVideo {
  width: 100vw;
  height: 100vh;
}

.heroVideo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heroSection h1 {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  font-size: 80px;
  line-height: 80px;
}

.heroSection h1 .nowrap span {
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  animation: flip 10s infinite;
  animation-delay: calc(0.4s * var(--i));
}

.nowrap {
  display: inline-flex;
  flex-wrap: nowrap;
}

@keyframes flip {

  0%,
  80% {
    transform: rotateY(360deg)
  }
}

/* MOBILE */

@media(max-width:600px) {
  .heroSection h1 {
    font-size: 60px;
  }
}

@media(max-width:500px) {
  .heroSection h1 {
    top: 30%;
    font-size: 50px;
  }
}

@media(max-width:400px) {
  .heroSection h1 {
    font-size: 40px;
    line-height: 70px;
  }
}


/* 
---------------------------------------------
SECTION JUST BELOW THE HERO (BRIEF ABOUT)
--------------------------------------------- 
*/

.briefAbout {
  margin-top: 200px;
  overflow: hidden;
  position: relative;
}

.briefAbout::before {
  position: absolute;
  content: " ";
  width: 100vw;
  height: 100%;
  background-color: #0000005c;
  z-index: -1;
}

.sectionVideo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.sectionVideo img {
  width: 100%;
  object-fit: cover;
  margin: 0%;
  padding: 0%;
}

.point {
  text-align: left;
  font-family: system-ui;
  color: white;
}

.point h1 {
  font-size: 60px;
  font-family: system-ui;
  background: radial-gradient(#004d7c, #004d7c,
      #e97020, #e97020) fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.point p {
  font-size: 30px;
}

.point .emphasis {
  font-family: system-ui;
  background-color: #004d7c;
  font-weight: 600;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.point.center {
  text-align: center;
}

@media(max-width:1000px) {
  .point h1 {
    font-size: 40px;
  }

  .point p {
    font-size: 25px;
  }
}

@media(max-width:767px) {
  .toBeInverted {
    display: flex !important;
    flex-direction: column-reverse;
  }

  .point {
    text-align: center;
  }

  .point h1 {
    font-size: 30px;
  }

  .point p {
    font-size: 17px;
  }
}

/*---------------------------------------
  INFORMATION AND BUTTONS             
-----------------------------------------*/
.contentContainer .row {
  display: flex;
  align-items: center;
  margin-bottom: 200px;
}

.moreInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.moreInfoButton {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 25px auto;
  border: none;
  background-color: #024d93;
  width: 400px;
  height: 60px;
  color: #fff;
  font-size: large;
}

.moreInfoButton:hover {
  outline-style: solid;
  outline-width: 5px;
  outline-color: #0b5fa9;
  position: relative;
  padding: 0;
  z-index: 2;
  animation: btnBackgroundTransition 0.2s forwards;
}

.moreInfoButton:hover::after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  outline-style: solid;
  outline-width: 3px;
  outline-color: #e8f0f7;
}

.moreInfoButton:active {
  transform: scale(0.98);
}

@media(max-width:430px) {
  .moreInfoButton {
    width: 300px;
  }
}

@keyframes btnBackgroundTransition {
  0% {
    background-color: #024d93;
    background: linear-gradient(to right, #010f32 0%, #024d93 0%);
  }

  10% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 10%);
  }

  20% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 20%);
  }

  30% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 30%);
  }

  40% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 40%);
  }

  50% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 50%);
  }

  60% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 60%);
  }

  70% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 70%);
  }

  80% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 80%);
  }

  90% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 90%);
  }

  100% {
    background-color: #022749;
    background: linear-gradient(to right, #010f32 0%, #024d93 100%);
  }
}