/* iPhone 15 & 15 Pro (portrait) */
@media only screen and (max-width: 390px) {
  :root {
    --brand: #0e9eb8;
    --text: #ffffff;
    --brandAcc: #caebee;
    --muted: #d8d8d8;
    --shadow: 0.1rem 0.1rem 0.5rem var(--brand);
    --shadow-card: 0.1rem 0.1rem 0.5rem #56909b;
    --unread: #6fd5e8;
    --background: rgb(44, 44, 44);
  }

  body {
    background-color: var(--background);
    /* height: 100vh; */
  }

  h1 {
    margin: 0;
  }

  .landing {
    font-family: "Codystar", sans-serif;
    font-weight: bolder;
    font-style: normal;
    color: var(--brand);
    text-align: center;
  }

  .coming-soon {
    animation: blink 1.5s infinite; /* Apply the 'blink' animation, 1.5s duration, infinite loop */
    animation-fill-mode: both; /* Ensure the animation styles are applied before and after the animation */
  }

  @keyframes blink {
    0% {
      opacity: 0; /* Start with text fully transparent */
    }
    50% {
      opacity: 1; /* At 50% of the animation, text is fully opaque */
    }
    100% {
      opacity: 0; /* End with text fully transparent, creating the flash effect */
    }
  }

  img {
    /* display: flex;
    justify-content: center; */
    /* height: 50rem; */
  }

  .logo-center {
    display: flex;
    justify-content: center;
    height: 25vh;
    width: 100vw;
    margin: 1rem auto;
  }

  .copyright-coming-soon {
    width: 100%;
    display: flex;
    justify-content: center;;
  }

  .copyright {
    width: 100vw;
  }

  .skatecay-logo {
    height: 100vh;
  }

  .title {
    margin-bottom: 1rem;
  }
  
  /* .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-bottom: 3rem;
  } */
}

/* desktop */
@media only screen and (max-width: 1278px) {
  :root {
    --brand: #0e9eb8;
    --text: #ffffff;
    --brandAcc: #caebee;
    --muted: #d8d8d8;
    --shadow: 0.1rem 0.1rem 0.5rem var(--brand);
    --shadow-card: 0.1rem 0.1rem 0.5rem #56909b;
    --unread: #6fd5e8;
    --background: rgb(44, 44, 44);
  }

  body {
    background-color: var(--background);
    /* height: 100vh; */
  }

  h1 {
    margin: 0;
  }

  .landing {
    font-family: "Codystar", sans-serif;
    font-weight: bolder;
    font-style: normal;
    color: var(--brand);
    text-align: center;
  }

  .coming-soon {
    animation: blink 1.5s infinite; /* Apply the 'blink' animation, 1.5s duration, infinite loop */
    animation-fill-mode: both; /* Ensure the animation styles are applied before and after the animation */
  }

  @keyframes blink {
    0% {
      opacity: 0; /* Start with text fully transparent */
    }
    50% {
      opacity: 1; /* At 50% of the animation, text is fully opaque */
    }
    100% {
      opacity: 0; /* End with text fully transparent, creating the flash effect */
    }
  }

  img {
    /* display: flex;
    justify-content: center; */
    /* height: 50rem; */
  }

  .logo-center {
    display: flex;
    justify-content: center;
    height: 25vh;
    width: 100vw;
    margin: 1rem auto;
  }

  .copyright-coming-soon {
    width: 100%;
    display: flex;
    justify-content: center;;
  }

  .copyright {
    width: 100vw;
  }

  .skatecay-logo {
    height: 100vh;
  }

  .title {
    margin-bottom: 1rem;
  }
  
  /* .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-bottom: 3rem;
  } */
}