/* @font-face {
  font-family: "Breakit";
  src: url("./BREAKIT.ttf");
} */
.intro-container {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  color: white;
  text-align: center;
  margin: 0 auto;
  right: 0;
  left: 0;
  display: flex;
  place-content: center;
  flex-direction: column;
  width: 80%;
}
.image {
  position: center;
}

#root {
  display: none;
  opacity: 0;
}

.button {
  font-family: "Poppins", sans-serif;
  position: relative;
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  width: 65%;
  margin-left: 15%;
  margin-top: 30px;
}
.button:hover .border {
  box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 1);
}
.button:hover .border .left-plane,
.button:hover .border .right-plane {
  transform: translateX(0%);
}
.button:hover .text {
  color: white;
}
.button .border {
  border: 1px solid white;
  transform: skewX(-20deg);
  height: 32px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  transition: 0.1s ease-out;
}
.button .border .left-plane,
.button .border .right-plane {
  position: absolute;
  background: red;
  height: 32px;
  width: 300px;
  transition: 0.15s ease-out;
}
.button .border .left-plane {
  left: 0;
  transform: translateX(-100%);
}
.button .border .right-plane {
  right: 0;
  transform: translateX(100%);
}
.button .text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.15s ease-out;
}

.sky-container {
  overflow: hidden;
  position: absolute;
  display: none;
  opacity: 0;
}

.sky-container__left,
.sky-container__right {
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
}
.sky-container__left h2,
.sky-container__right h2 {
  font-family: "brandon-grotesque", sans-serif;
  font-size: 26px;
  line-height: 26px;
  margin: 0;
}
@media screen and (min-width: 860px) {
  .intro-container {
    width: 40%;
  }
  .sky-container__left h2,
  .sky-container__right h2 {
    font-size: 72px;
    line-height: 68px;
  }
}
.sky-container__left {
  margin-right: 5px;
}
.sky-container .thirty-one {
  letter-spacing: 4px;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}