/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

.black-bg {
  background-color: #000000;
}

.white-bg {
  background-color: #ffffff;
}

html {
  font-size: 16px;  /* default in most browsers */
}

.huge-text {
  font-size: 2.5rem;  /* 3 × 16px = 48px */
}

.big-text {
  font-size: 1.5rem;  /* 2 × 16px = 32px */
}

.small-text {
  font-size: 0.75rem; /* 12px */
}

h1 {
  margin-bottom: 10px;  /* smaller space below heading */
}

p {
  margin-top: 0;         /* remove space above paragraph */
  line-height: 1.5;      /* optional: control line spacing inside paragraph */
}


.white-text {
  color: #ffffff;
}

.black-text {
  color: #000000;
}

.center-text {
  text-align: center;
}

.new-rocker-regular {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}

.aoboshi-one-regular {
  font-family: "Aoboshi One", serif;
  font-weight: 400;
  font-style: normal;
}

.centered-fullpage {
  display: flex;               /* enables Flexbox */
  flex-direction: column;    /* stack items vertically */
  justify-content: center;     /* horizontal centering */
  align-items: center;         /* vertical centering */
  height: 100vh;               /* full viewport height */
  width: 100vw;                /* full viewport width */
  text-align: center;          /* centers text inside container, optional */
}

.logo {
  width: 20%;      /* desktop size */
}


/* Buttons */


.back-button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #3B4E55;   /* normal background */
  color: #ffffff;              /* normal text */
  border: 1px solid #000000;   /* 1px black border */
  border-radius: 6px;
  text-decoration: none;       /* removes underline */
  font-family: sans-serif;
  font-size: 14px;
  transition: background-color 0.2s, color 0.2s;
}

.back-button:hover,
.back-button:active {
  background-color: #000000;   /* black background */
  color: #ffffff;              /* white text */
}


/* Mobile adjustments */


@media (max-width: 600px) {
  .huge-text {
    font-size: 6vw; /* scales with phone width */
  }

  .big-text {
    font-size: 4vw; /* scales with phone width */
  }
  
  .small-text {
    font-size: 2vw; /* scales with phone width */
  } 
  .logo {
    width: 50%;    /* scale up a bit on mobile */
  }
}