/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url("home/home-bg.css");
@import url("home/home-extra.css");
@import url("extra/animations.css");
@import url("extra/responsive.css");

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.container{
  position: relative;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-animation: fadein 2s, moveindown 2s;
  animation: fadein 2s, moveindown 2s;

  video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    clip-path: url(#text-overlay);
  }

  #BGText{
    position: absolute;
    font-family: Poppins, sans-serif;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: middle;
    mix-blend-mode: multiply;
    color: #f3ebf8;

    #Mble-Main{
      font-size: 70vw;
    }
    #Dsktp-Main{
      font-size: 40vw;
    }
  }
}

.header{
  display: flex;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
  /*background-color: #3B2D09;*/

  a {
    cursor: pointer;
    user-select: none;
  }

  div{
    text-align: center;
    opacity: 0;
  }

  .s1{
    -webkit-animation: fadein 3s 600ms forwards;
    animation: fadein 3s 600ms forwards;
  }

  .s4{
    -webkit-animation: fadein 3s 800ms forwards;
    animation: fadein 3s 800ms forwards;
  }

  .s3{
    -webkit-animation: fadein 3s 1000ms forwards;
    animation: fadein 3s 1000ms forwards;
  }

  .s2{
    -webkit-animation: fadein 3s 1200ms forwards;
    animation: fadein 3s 1200ms forwards;
  }
}

.arrow {
  position: absolute;
  color: black;
  bottom: 18%;
  left: calc(50% - 28px);
  z-index: 1;
  opacity: 0;
}

.arrow:after {
  content: " ";
  position: absolute;
  top: 12px;
  left: -10px;
  width: 50px;
  height: 50px;
  border-bottom: 30px solid;
  border-right: 30px solid;
  border-radius: 4px;
  transform: rotateZ(45deg);
  opacity: 1;
  animation: jumpInfinite 1.5s infinite;
  transition: color 100ms;
}

.arrow:hover{
  color: rgb(49, 29, 29);
  transition: color 100ms;
  cursor: pointer;
}

.Buttons{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  position: absolute;
  padding: 0 3%;

  .buttonHeader{
    margin: 0;
    font-family: Poppins, sans-serif;
    font-style: italic;
    font-weight: 200;
    color: white;
    text-align: center;
    opacity: 0;

    -webkit-animation: fadein 3s 200ms forwards,  moveinleft 2s 200ms forwards;
    animation: fadein 3s 200ms forwards,  moveinleft 2s 200ms forwards;
  }

  #cButton, #aButton {
    font-family: Poppins, sans-serif;
    font-weight: 900;
    line-height: 1;
    font-style: italic;
    color: white;
    cursor: pointer;
    opacity: 0;
  }

  #aButton{
    -webkit-animation: fadein 3s 1000ms forwards, moveinleft 2s 1000ms forwards;
    animation: fadein 3s 1000ms forwards, moveinleft 2s 1000ms forwards;
  }

  #cButton{
    -webkit-animation: fadein 3s 800ms forwards, moveinleft 2s 800ms forwards;
    animation: fadein 3s 800ms forwards, moveinleft 2s 800ms forwards;
  }
}

#cButton:hover{
  color: #15340d;
}

#aButton:hover{
  color: #4c0b0b;
}

a{
  color: #e8e6e3;

  font-family: Poppins, sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-decoration: none;
  opacity: 1;
  transition: color 0.2s;
}

a:hover {
  color: #e8e6e3b1;
}

.main{
  margin: 0 0 0 0;
  background-color: #000000;
  padding-bottom: 20%;
  z-index: 1;

  p{
    margin: 0;
    font-family: Poppins, sans-serif;
    color: white;
    text-align: center;
  }

  h1, h2{
    margin: 0;
    font-family: Poppins, sans-serif;
    color: white;
    text-align: center;
  }

  .mainText{
    width: 75%;
    margin: 0 auto;
  }
}

* {
  margin: 0;
  padding: 0;
}