:root {
  --main_color: #2a3647;
  --main_color_lighter: #354458;
  --main_color_dark: #091931;
  --background_main: #f6f7f8;
  --lightgray_font: #c0c0c0;
  --lightblue_font: #29abe2;
  --main_font: "Inter", sans-serif;
  --backup_font: system-ui, sans-serif;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--main_font);
  background-color: var(--background_main);
}

.landing_page_desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.landing_page_mobile {
  display: none;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/********** MEDIA QUERY *********/

@media (max-width: 1000px) {
  .landing_page_desktop {
    display: none;
  }

  .landing_page_mobile {
    display: flex;
    background-color: var(--main_color);
  }

  @keyframes moveDiagonal {
    0% {
      transform: translate(0, 0) scale(1);
    }
    100% {
      transform: translate(-40vw, -45vh) scale(0.65);
    }
  }

  @keyframes resizeImage {
    0% {
      width: 300px;
      height: 320px;
    }
    100% {
      width: 100px;
      height: 120px;
    }
  }

  .landing_page_mobile img {
    animation: moveDiagonal 2s forwards, resizeImage 2s forwards;
  }
}