/* reset stuff */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;

  /* background image - found this on unsplash, looks cool */
  background-image: url("Background image.avif");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

/* Centered main element */
.container {
  width: 900px;
  max-width: 90%;
  margin: 30px auto;
  /* margin-top: 40px; */ /* tried 40px earlier, 30 looks better */

  /* CSS Grid layout - took me forever to get the grid-template-areas right */
  display: grid;
  grid-template-columns: 3fr 3fr 3fr 3fr;
  grid-template-areas:
    "header header header header"
    "image image image image"
    "paragraph1 paragraph2 paragraph3 paragraph4"
    "footer footer footer footer";
  gap: 15px;
}

/* Transparent S using rgba - making them slightly see-through */
header,
.paragraph1,
.paragraph2,
.paragraph3,
.paragraph4,
.movie-box,
aside,
footer {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border: 2px solid #333;
}

/* Grid areas styling */
header {
  grid-area: header;
  text-align: center;
  background-color: rgba(30, 30, 30, 0.85);
  color: #ffffff; /* white text */
}

#yes{
  grid-area: image;
  width: 100%;
  object-fit: cover;
  
}

.paragraph1 {
  grid-area: paragraph1;
}

.paragraph2 {
  grid-area: paragraph2;
}

.paragraph3 {
  grid-area: paragraph3;
}

.paragraph4 {
  grid-area: paragraph4;
}

aside {
  grid-area: aside;
  background-color: rgba(240, 200, 100, 0.85); /* yellowish sidebar */
}

footer {
  grid-area: footer;
  text-align: center;
  background-color: rgba(30, 30, 30, 0.85);
  color: white;
  font-size: 14px; /* slightly smaller footer text */
}