/* mobile */
@media (max-width: 1000px) {
    .container {
        width: 90%; /* Use percentages instead of pixels */
        margin: 0 auto;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 85vh;
        flex-direction: column;
        margin: 0;
    }
}

/* big screens */
@media (min-width: 1001px)
{
  .logo {
      width: 30%; /* Use percentages instead of pixels */
      margin-top:14vh;
      margin-bottom: 5vh;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
  }
}

/* Main Regular Font */
@font-face {
  font-family: 'MAMFont';
  src: url('/fonts/mamfont-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Main Italic Font */
@font-face {
  font-family: 'MAMFont';
  src: url('/fonts/mamfont-italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

body {
  background-color: #B5B9A1;
  color: #FAF9F3;
  /* green #B5B9A1 */
  /* brown #BFB4A1 */
  /* white #FAF9F3 */
  font-family: 'MAMFont';
}

.logo {
    max-width: 65%;
    height: auto;
}

.button-container {
  display: flex;            /* horizontal layout by default */
  gap: 11vh;                /* space between buttons */
}

.buymeacoffee {
      width: 100%; /* Use percentages instead of pixels */
      margin: auto;
      margin-top: 2.5vh;
      margin-bottom: 2.55vh;
}

/* youtube formatting stuff */
.yt-info {
  display: flex;
  flex-direction: column;
}

.yt-card {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center; /* optional: center children horizontally */
  background: #FAF9F3;
  color: #BFB4A1;
  border-radius: 12px;
  gap: 12px;
}

.yt-card:hover {
  background: #BFB4A1;
}

.yt-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block; /* important for images to avoid baseline offset */
  margin: 0;
}