/* 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." */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* FONDO 2000s */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffccff;
  background-image: repeating-linear-gradient(
    45deg,
    #ffccff,
    #ffccff 10px,
    #ffe6ff 10px,
    #ffe6ff 20px
  );
  color: #000;
}

/* HEADER */
.site-header {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
  border-bottom: 6px solid hotpink;
}

.site-header h1 {
  font-size: 3.5rem;
  letter-spacing: 3px;
  text-shadow: 3px 3px hotpink;
}

.tagline {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* CONTENIDO */
.content {
  max-width: 900px;
  margin: 3rem auto;
  background: white;
  padding: 2rem;
  border: 5px solid black;
}

/* FEATURED REVIEW */
.featured-review {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  background: #ffff99;
  padding: 2rem;
  border: 4px dashed black;
  margin-bottom: 3rem;
}

.featured-review img {
  width: 100%;
  border: 4px solid black;
}

/* TEXTO */
.featured-text h2 {
  font-size: 2rem;
}

.score {
  font-size: 2.5rem;
  font-weight: bold;
  color: red;
  background: white;
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 3px solid black;
  margin: 1rem 0;
  transform: rotate(-5deg);
}

/* GRID */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}

.review-card {
  background: #99ffff;
  padding: 1rem;
  border: 4px solid black;
  box-shadow: 6px 6px black;
  transform: rotate(-1deg);
}

.review-card:nth-child(even) {
  transform: rotate(2deg);
}

/* LINKS */
a {
  color: blue;
  font-weight: bold;
}

/* FOOTER */
.site-footer {
  margin-top: 3rem;
  background: black;
  color: white;
  text-align: center;
  padding: 1rem;
}
.sticker {
  position: fixed;
  z-index: 10;
  pointer-events: none;
}

/* POSICIONES */
.cassette {
  width: 140px;
  top: 120px;
  left: 30px;
  transform: rotate(-12deg);
}

.vinyl {
  width: 160px;
  bottom: 100px;
  right: 40px;
  transform: rotate(8deg);
}

.cd {
  width: 120px;
  top: 300px;
  right: 100px;
}

.star {
  width: 80px;
  bottom: 200px;
  left: 80px;
}