@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

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

.darkMode {
  --clr1: #1F1D2B;
  --clr3: #FFFFFF;
  --clr4: #353440;
  --clr9: #24273081;
  --clr10: #242730;
  --clr11: #B7B9D2;
}

:root {
  --clr1: #ffffff;
  --clr2: #808191;
  --clr3: #000000;
  --clr4: #dad9e9;
  --clr5: #6c5ecf;
  --clr6: #cccccc;
  --clr7: #34373C;
  --clr8: #0DAABC;
  --clr9: #dad9e981;
  --clr10: #dad9e9;
  --clr11: #42434d;
}

html {
  font-size: 14px;
}

body {
  transition: background-color 0.5s, color 0.5s;
  background-color: var(--clr1);
  font-family: 'Poppins', sans-serif;
  color: var(--clr3);
}

.page {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding-inline: 60px;
  width: 100%;
  max-width: 1200px;
  align-items: center;
}

/* SIDEBAR */

.sidebar__logo {
  margin-bottom: 3.5em;
  padding-top: 2.5em;
}

.sidebar {
  z-index: 3;
  height: 100dvh;
  width: 200px;
  padding-left: 1em;
  transition: background-color 0.5s;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--clr1);
}

.sidebar_active {
  width: 200px;
  margin: 0;
  padding-left: 25px;
  padding-right: 15px;
  position: absolute;
  display: block;
}

.element {
  display: flex;
  align-items: center;
  margin-top: 2em;
  background: none;
  border: none;
  cursor: pointer;
}

.sliderBox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.slider__text {
  color: var(--clr2);
  margin-left: 1em;
  width: max-content;
}

.element__name {
  padding-left: 1em;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
}

.section__header {
  color: var(--clr2);
  margin: 0;
}

.list {
  list-style: none;
}

.section__line {
  border: 1px solid var(--clr7);
  margin-top: 2em;
  margin-bottom: 2em;
  width: 10em;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
}

.switch input {
  display:none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clr6);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--clr5);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--clr5);
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* SIDEBAR END */

/* HEADER */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  width: 100%;
  gap: 40px;
}

.header__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background-color: var(--clr4);
  border-radius: 10px;
  border: 0;
  padding-left: 1em;
  color: var(--clr3);
}

.header__form {
  position: relative;
  width: 100%;
  max-width: 625px;
}

.header__menu {
  display: none;
  cursor: pointer;
}

.header__profile {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-shrink: 0;
}

.profile__notification {
  margin-left: 1em;
}

.header__searchIcon {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.profile__arrow {
  border: none;
  background: none;
  cursor: pointer;
}

.profile__notification {
  border: none;
  background: none;
  cursor: pointer;
}

.header__searchButton {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 0em;
  bottom: 3em;
}

/* HEADER  END */

/* CONTENT */

.discover__card {
  font-size: 2rem;
}

.recomendationsCardWrapper {
  display: grid;
  grid-template-columns: repeat(4, 260px);
  gap: 12px;
}

.name_active {
  color: var(--clr3);
}

.name_inactive {
  color: var(--clr2);
}

.card_inactive {
  position: relative;
  border-radius: 10px;
  width: 350px;
  height: 360px;
}

.discover__title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.card__image {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.image_active {
  aspect-ratio: 2/1;
  object-fit: cover;
}

.avatar__info {
  font-size: 0.5em;
}

.duration__text {
  font-size: 0.6rem;
  text-align: center;
  line-height: 20px;
}

.card__duration {
  position: absolute;
  border-radius: 5px;
  width: 45px;
  height: 20px;
  background: var(--clr9);
}

.duration_positionBottom {
  bottom: 0.6em;
  right: 0.6em;
}

.duration_positionTop {
  top: 0.6em;
  right: 0.6em;
}

.avatarStroke {
  border-radius: 50%;
  border-color: #FFF;
  border-width: 1px;
  border-style: solid;
  width: 60px;
  height: 60px;
  position: relative;
}

.avatar__image {
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
}

.avatar__verified {
  position: absolute;
  right: 0;
  bottom: 0;
}

.card__avatarBox {
  position: absolute;
  display: flex;
}

.avatarBox_active {
  align-items: center;
  gap: 0.4em;
  bottom: 3em;
  left: 1.5em;
}

.avatarBox_inactive {
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  bottom: 3em;
  left: 1.5em;
}

.card__text {
  position: absolute;
  top: 1.5em;
  left: 1.5em;
  font-size: 2rem;
  width: 220px;
  line-height: 120%;
}

.cardWrapper {
  display: flex;
  gap: 20px;
}

.card_active {
  width: 725px;
  height: 360px;
  border-radius: 10px;
  position: relative;
}

.discover {
  display: flex;
  flex-direction: column;
}

.mostWatched {
  padding-top: 3rem;
}

.mostWatched__title {
  margin-bottom: 2rem;
}

.discover__card:hover {
  z-index: 1;
  transition: .5s;
  transform: scale(1.1);
}

.mostWatched__card {
  position: relative;
  width: 100%;
  height: 310px;
  border-radius: 10px;
  background-color: var(--clr10);
}

.card__avatar {
  position: absolute;
  right: 20px;
  top: 45%;
}

.card__descripton {
  position: absolute;
  top: 55%;
  left: 20px;
}

.status {
  border-radius: 100%;
  border-width: 3px;
  border-style: solid;
  width: 1px;
  height: 1px;
}

.status_online {
  border-color: green;
}

.status_offline {
  border-color: #FF7551;
}

.card__username {
  color: var(--clr11);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.card__header {
  color: var(--clr3);
  width: 210px;
  font-weight: bold;
  padding-top: 10px;
}

.card__date {
  color: var(--clr2);
  padding-top: 20px;
}

.card__preview {
  border-radius: 10px 10px 0 0;
  width: 100%;
}

.content {
  width: 100%;
}

/* CONTENT END */

.overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--clr1);
  opacity: 0.6;
}

.overlay_active {
  display: block;
  z-index: 1;
}

@media screen and (max-width: 1500px) {
  .sidebar {
    display: none;
    height: 952px;
  }
  .header {
    gap: 40px;
  }
  .header__menu {
    display: block;
  }
  .header__profile {
    padding-left: 160px;
  }
  .discover__card:hover {
    transform: scale(1.05);
  }
  .sidebar_active {
    width: 200px;
    margin: 0;
    padding-left: 25px;
    padding-right: 15px;
    position: absolute;
    display: block;
    z-index: 3;
    background-color: var(--clr1);
  }
  .overlay_active {
    display: block;
    z-index: 1;
  }
}

@media screen and (max-width: 1200px) {
  .cardWrapper {
    flex-direction: column;
  }
  .card_inactive {
    width: 725px;
    height: 360px;
  }
  .image_inactive {
    aspect-ratio: 2/1;
    object-fit: cover;
  }
  .header__profile {
  padding: 0;
  }
  .recomendationsCardWrapper {
    grid-template-columns: repeat(2, 350px);
    justify-content: center;
    column-gap: 20px;
  }
  .mostWatched__card {
    height: 400px;
  }
  .card__preview {
    width: 350px;
    height: 210px;
  }
  .page {
    width: max-content;
  }
  .sidebar_active {
    width: 200px;
    margin: 0;
    height: 1842px;
    padding-left: 25px;
    padding-right: 15px;
    position: absolute;
    display: block;
    z-index: 3;
    background-color: var(--clr1);
  }
  .overlay_active {
  display: block;
  z-index: 1;
  }
}