@font-face {
  src: url(fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
  font-family: Montserrat;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  overflow-x: hidden;
  overflow-y: hidden;
}


/*----- KEYFRAMES -----*/

/* background fade-in */
@keyframes background_fade-in {
  from { opacity: 0; }
  to { opacity: 1;}
}

/* lightning  */
@keyframes flash {
  0% { opacity: 1; } 
  2% { opacity: 0; }
  3% { opacity: 0.6; }
  4% { opacity: 0.2; }
  6% { opacity: .9; } 
  100% { opacity: 1; }
}

/* characters appear  */

  /* main_character_appears fade-in */
  @keyframes main_character_appears {
    from { padding-right: 100%; }
    to { padding-right: 0%;}
  }

  /* main_character_appears fade-in */
  @keyframes sage_appears {
    from { padding-left: 100%; }
    to { padding-left: 0%;}
  }


/* stars shinning */
@keyframes shining-stars {
  0% { filter: brightness(0%)}
  100% { filter: brightness(100%)}
}


/* get started appears */
@keyframes get_started_fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/*----- CSS -----*/

#main {
  height: 100vh;
  width: 100vw;
  background-color: #2F3F68;
  animation: background_fade-in 4s linear, flash 8s infinite;
}

/***    sky   ***/

  #sky {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

    #stars > div {
      position: absolute;
      height: 5px;
      width: 5px;
      border-radius: 50%;
      animation: shining-stars 4s linear alternate infinite;
      animation-delay : 4s;
      background-color: #EEDC9C;
      z-index: 1;
    }

/***    characters   ***/
    #characters {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      position: absolute;
      z-index: 2;
    }

      #main-character-div {
        height: 100%;
        width: 30%;
        display: flex;
        align-items: center;
        animation: main_character_appears 2s ease;
      }

        #main-character {
          width: 100%;
          height: 50%;
          object-fit:contain;
        }

      #sage-div {
        height: 100%;
        width: 30%;
        display: flex;
        align-items: center;
        animation: sage_appears 2s ease;
      }

        #sage {
          width: 100%;
          height: 40%;
          object-fit:contain;
        }

      #start-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #241919;
        border-radius: 30px;
        text-decoration: none;

        padding: 3% 3%;
        animation: get_started_fade-in 3s ease-in;
        
        font-family: 'Montserrat', sans-serif;
        font-size: 24px;
        font-weight: 300;
        word-spacing: 1px;
        text-align: center;
        border: none;
        cursor: pointer;
        z-index: 2;
        background-color: #FFFFFF;
      }



/* ======================= */
/***  MEDIA QUERIES ***/
@media screen and (max-width: 786px) {

#characters {
  height: 80%;
}

  #start-text {
    top: 75%;
    text-align: center;
    border-radius: 50px;
    padding: 5% 20%;
    font-size: 24px;
    font-weight: 400;
  }

  #main-character {
    height: 40%;
  }

  #sage {
    height: 90%;
  }

}