/* #region Not Desktop (Tablets and below) */
@media only screen and (max-width: 1023px) {
  h1 {
    font-size: 160px;
    font-weight: 900;
  }

  h2 {
    font-size: 64px;
    font-weight: 700;
  }

  h3 {
    font-size: 48px;
    font-weight: 700;
  }

  h4 {
    font-size: 36px;
    font-weight: 700;
  }

  h5 {
    font-size: 32px;
    font-weight: 300;
  }

  h6 {
    font-size: 24px;
    font-weight: 300;
  }

  #logo {
    background-image: url("../assets/ic_logo_only_b.svg");
    height: 30px;
  }
}
/* #endregion */

/* #region Screen Limit */
@media only screen and (min-width: 1920px) {
  /* body {
    min-width: 1920px;
    justify-self: center;
  } */
}
/* #endregion */

/* #region Large Deskto */
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
  /* :root {
        padding: 0 64px;
    } */
}
/* #endregion */

/* #region Desktop */
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --main-padding: 0 48px;
  }

  /* #region Section 3 */
  #circle_1 {
    width: 270px;
    height: 270px;
  }
  #circle_2 {
    width: 358px;
    height: 358px;
  }
  #circle_2 {
    width: 270px;
    height: 270px;
  }
  /* #endregion */

  /* #region Section 5*/
  #circle_5_1 {
    width: 390px;
    height: 390px;
  }
  /* #endregion */

  /* #region Section 9*/
  #sec9 .circle {
    width: 394px;
    height: 394px;
  }
  /* #endregion */
}
/* #endregion */

/* #region Tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --main-padding: 0 32px;
  }
}
/* #endregion */

/* #region Large Phone */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  :root {
    --main-padding: 0 24px;
  }
}
/* #endregion */

/* #region Small Phones */
@media only screen and (max-width: 479px) {
  :root {
    --main-padding: 0 24px;
  }

  body {
    background-color: yellow;
  }
}
/* #endregion */

/* #region Tablet and Large Phone */
@media only screen and (min-width: 480px) and (max-width: 1023px) {
  #menuContainer {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
  }

  #actions {
    width: 142px;
    height: 24px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
  }
}
/* #endregion */