@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* Mobile first */

:root {
  --filmTheme1: rgba(255, 73, 168, 1);
  --filmTheme2: rgba(255, 126, 36, 1);
  --filmTheme3: rgba(59, 87, 157, 1);
  --filmTheme4: rgba(79, 235, 87, 1);
  --filmTheme5: rgba(208, 61, 69, 1);
  --plateforme1: rgba(229, 9, 20, 1);
  --plateforme2: rgba(13, 31, 119, 1);
  --plateforme3: rgba(21, 123, 207, 1);
  --secondaryColor: #fff;
}

main {
  font-size: large;
  font-family: montserrat, Arial, sans-serif;
  background-color: #f2f2f2;
  padding: 5px;
}

.container {
  display: grid;
  place-items: center;
  flex-direction: column;
  width: 90%;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #fff;
  margin: 50px;
}

#trailer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  iframe {
    width: 95%;
    border-radius: 10px;
  }
}

#film-details {
  overflow: hidden;
  .details p {
    margin: 10px;
  }
  img {
    width: 30%;
    height: 40%;
    border-radius: 10px;
    margin: 0 10px;
    float: left;
    max-height: 50%;
  }
}

.review {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 10px;
  width: 200px;
  max-width: 90%;
  margin: 10px;
  p {
    font-size: 0.825rem;
    font-weight: 500;
  }
  .stars {
    color: rgb(228, 228, 9);
    font-size: 1.5rem;
  }
  .stars span:last-child {
    color: #333;
  }
}

.button-source {
  display: flex;
  justify-content: center;
  align-items: center;
  a {
    text-decoration: none;
    color: var(--secondaryColor);
    padding: 10px;
    border-radius: 20px;
    margin: 10px;
    font-weight: 800;
    transition: 0.3s;
    width: 80%;
    text-align: center;
    &:hover {
      background-color: var(--filmTheme2);
    }
  }
}

h1 {
  text-align: center;
  font-size: 2.125rem;
  border-radius: 10px;
  padding: 10px;
  font-weight: 800;
}

#cast {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  h2,
  h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 10px;
    color: #333;
  }
  .synopsis {
    position: relative;
    p {
      text-align: justify;
      margin: 0 20px;
    }
  }
  .synopsis::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    width: 0.3125rem;
    height: 2.225rem;
    background-color: #fecc00;
    border-radius: 0.625rem;
    overflow: hidden;
    margin: 0 3px;
  }
  .distribution {
    position: relative;
    h2 {
      float: left;
    }
    .card {
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: justify;
      flex-direction: column;
      iframe {
        width: 95%;
        border-radius: 10px;
      }
      p {
        color: #333;
      }
    }
  }
  .distribution::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    width: 0.3125rem;
    height: 2.225rem;
    background-color: #fecc00;
    border-radius: 0.625rem;
    overflow: hidden;
    margin: 0 3px;
  }
}

/* Desktop */

@media screen and (min-width: 675px) {
  #trailer {
    width: 100%;
    iframe {
      width: 50%;
      zoom: 1;
    }
  }
  #film-details {
    .details p {
      margin: 10px;
    }
    img {
      height: 340px;
      width: 230px;
    }
  }
  #cast {
    .distribution {
      width: 100%;
      h2 {
        float: left;
        margin: 10px;
      }
      .card {
        width: 100%;
        iframe {
          width: 50%;
          zoom: 1;
        }
      }
    }
  }
  .button-source {
    justify-content: flex-start;
    width: 290px;
  }
}