@font-face {
    font-family: "AlegreyaSansSC";
    src: local("AlegreyaSansSC"),
    url(../fonts/AlegreyaSansSC.ttf) format("truetype");
  }
  @font-face {
    font-family: "AlegreyaSansSC";
    src: local("AlegreyaSansSC-Bold"),
    url(../fonts/AlegreyaSansSC-Bold.ttf) format("truetype");
    font-weight: bold;
  }
  @font-face {
    font-family: "Heebo";
    src: local("Heebo"),
    url(../fonts/Heebo.ttf) format("truetype");
  }
  body{
    font-family: "Segoe UI", sans-serif;
  }
  p{
    font-family: "Heebo";
    color: #4d4d4d;
  }
  .single-section{
    min-height: 100vh;
  }
  .font-16{
    font-size: 16px;
  }
  .font-24{
    font-size: 24px;
  }
  .font-32{
    font-size: 32px;
  }
  .font-48{
    font-size: 48px;
  }
  .font-64{
    font-size: 64px;
  }
  .font-orange{
    color: #F58F4F;
  }
  .font-grey{
    color: #4d4d4d;
  }
  /* darkmode */
  [data-theme="dark"]{
      background-color: #171C3B;
  }
  [data-theme="dark"] p{
      color: #ffffff;
  }
  [data-theme="dark"] .font-orange{
      color: #ffffff;
  }
  [data-theme="dark"] .font-grey{
      color: #ffffff;
  }


  .slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.5s ease-out;
}
.slide-left-enter-from {
  opacity: 0;
  transform: translate(100px, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-100px, 0);
}
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-100px, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate(100px, 0);
}

  @media screen and (max-width: 600px) {
        .font-16{
          font-size: 12px;
        }
        .font-24{
          font-size: 20px;
        }
        .font-32{
          font-size: 28px;
        }
        .font-48{
          font-size: 44px;
        }
        .font-64{
          font-size: 60px;
        }
    }