body {
  background-image: url("assets/images/Background.avif");
  background-size: cover;        /* fills screen */
  background-position: center;   /* center */
  background-repeat: no-repeat;  /* no tiling */
  background-attachment: fixed;  /* parallax */

  font-family: "Inter", Arial, sans-serif;
  font-size: 30px;
  margin:0px;
  text-align: center;
}

h1 {
  padding: 20px 0;
  font-family: "Inter", Arial, sans-serif;
  color: rgb(255, 255, 255);
  text-shadow:
    0 0 3px black,
    0 0 6px black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
}

.grid a {
  text-decoration: none;
  color: white;
}

.grid img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.2s ease;
}

.grid img:hover {
  transform: scale(1.05);
}

iframe {
  display: block;
  margin: 20px auto;
  max-width: 100%;
}

a img {
  width: 250px;      /* doesnt affect at the moment */
  height: 500px;     /* vertical height */
  object-fit: cover; /* crops cleanly */
  display: block;    /* removes inline spacing weirdness */
}

.backBtn {
  color: rgb(255, 255, 255);
  text-decoration: none;   /* no underline */
  font-weight: 600;
  transition: 0.3s ease;   /* smooth color change */
}

.backBtn:hover {
  color: rgb(206, 206, 206);            /* changes on hover */
}

#fullscreenBtn {
  padding: 12px 24px;
  font-size: 1rem;
  font-family: "Inter", sans-serif;

  background: linear-gradient(135deg, rgb(7,193,235), rgb(0,140,200));
  color: white;

  border: none;
  border-radius: 8px;

  cursor: pointer;
  transition: 0.3s ease;
}

#fullscreenBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7,193,235,0.4);
}

#fullscreenBtn:active {
  transform: scale(0.97);
}

.standardBtn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007acc;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.2s ease;
}

.standardBtn:hover {
  background-color: #005fa3;
}

a {
    padding: 20px 0;
  font-family: "Inter", Arial, sans-serif;
  color: rgb(255, 255, 255);
  text-shadow:
    0 0 3px black,
    0 0 6px black;
}