:root {
  --h-style: 'Shantell Sans';
  --p-style: 'Ubuntu', regular;
  --font-size-small: clamp(16pt, 3vw, 20pt);
  --font-size-normal: clamp(20pt, 4vw, 25pt);
  --font-size-big: clamp(25pt, 6vw, 30pt);

  --header-background-color: #8BC6C7;
  --main-container-background-color: #f4f4f4;
  --option-background-color: #ADC5CF;
  --option-border-color: #624F2B;
  --select-buttons-color: #8BC6C7;
  --footer-background-color: #f6f6f6;

  --header-and-main-container-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25);
  --swiper-slide-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);

  --margin-left-and-right-container-main-and-header: 15%;
  --margin-bottom-main-and-header: 68px;
}

* {
  margin: 0;
  padding: 0;
}


/* fonts */
h1 {
  font-family: var(--h-style), semibold;
  font-size: var(--font-size-big);
  margin-bottom: 45px;
}

h2 {
  font-family: var(--h-style);
  font-size: var(--font-size-normal);
}

p {
  font-family: var(--p-style);
  font-size: var(--font-size-small);
}

a {
  font-family: var(--p-style);
  font-size: var(--font-size-small);
  text-decoration: none;
  color: black;
}

select.rating {
  font-family: var(--h-style), semibold;
  font-size: var(--font-size-normal);
}

/* images */
.logo-header {
  height: 90px;
  width: auto;
  border-radius: 100px;
}

.logo-main {
  height: 300px;
  width: 300px;
  border-radius: 200px;
  margin-right: 15px;
}


/* header */
header {
  background-color: var(--header-background-color);
  box-shadow: var(--header-and-main-container-shadow);
  border-radius: 0 0 34px 34px;

  padding: 15px;
  display: flex;
  gap: 5%;
  align-items: center;

  margin-bottom: var(--margin-bottom-main-and-header);
  margin-right: var(--margin-left-and-right-container-main-and-header);
  margin-left: var(--margin-left-and-right-container-main-and-header);
}

ul {
  display: flex;
  gap: 3vw;
}

ul div {
  display: flex;
  gap: 3vw;
}

ul li {
  list-style: none;
}



/* main content */
.main-container {
  background-color: var(--main-container-background-color);
  box-shadow: var(--header-and-main-container-shadow);
  border-radius: 34px;

  padding: 20px;
  margin-right: var(--margin-left-and-right-container-main-and-header);
  margin-left: var(--margin-left-and-right-container-main-and-header);
  margin-bottom: var(--margin-bottom-main-and-header);
}

#about-podcast {
  display: flex;
  justify-content: space-between;
}

#about h1 {
  margin-top: 0;
  margin-left: 0;
}


/* hosts */
#hosts {
  position: relative;
  overflow: hidden;
}

#hosts h1 {
  margin-top: 0;
  text-align: center;
}

.host-slider {
  height: 600px;
  margin: 0 3% 3% 3%;
}

.swiper-slide {
  height: 550px;
  border-radius: 34px;
  box-shadow: var(--swiper-slide-shadow);
  box-sizing: border-box;
  background-position: top;
  background-size: cover;
  position: relative;
  /* Добавляем для позиционирования h1 */
  padding: 20px;
}

.swiper-slide h2 {
  color: white;
  font-size: var(--font-size-big);
  margin: 0;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 20px;
  /* Отступ от нижнего края */
  left: 0;
  right: 0;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  color: black;
}

.swiper-button-prev,
.swiper-button-next {
  transition: background-color 0.5s ease;
  border-radius: 30px;
  padding: 4px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(139, 198, 199, 0.2);
}


#Liza {
  background-image:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 1) 100%),
    url(../images/Liza.jpg);
}

#Vika {
  background-image:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 1) 100%),
    url(../images/Vika.jpg);
}

#Sasha {
  background-image:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 1) 100%),
    url(../images/Sasha.jpg);
}

#Andrey {
  background-image:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 1) 100%),
    url(../images/Andrey.jpg);
}


/* check-list */
#checklist {
  margin-left: 35%;
  margin-right: 35%;
}

#checklist h1 {
  margin-bottom: 30px;
}

.form-field {
  display: flex;
  padding: 20px;
  gap: 15px;
  align-items: center;
  justify-content: flex-start;
}

.form-field .rating {
  height: 50px;
  width: 50px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid var(--option-border-color);
  background-color: var(--option-background-color);
}

.form-field .rating option {
  font-size: var(--font-size-small);
}

.form-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}

.form-buttons button {
  background-color: var(--select-buttons-color);
  font: calc(15px + 1vw) var(--h-style), regular;
  border-radius: 30px;
  border: none;
  padding: 10px 38px;
}

.form-buttons button:hover {
  cursor: pointer;
}

.form-buttons button:active {
  background-color: #629c9b;
}

/* footer */
footer {
  background-color: var(--footer-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer h1 {
  margin: 25px;
}

footer p {
  font-size: 14pt;
}

#group-links {
  display: flex;
  gap: 50px;
  align-items: center;
  margin-bottom: 100px;
}




@media (max-width: 1550px) {

  .form-buttons {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 1200px) {

  :root {
    --margin-left-and-right-container-main-and-header: 5%;
  }

  .swiper-button-prev,
  .swiper-button-next {
    transition: background-color 0.2s ease;
  }

  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    background-color: transparent;
  }

  .swiper-button-prev:active,
  .swiper-button-next:active {
    background-color: rgba(139, 198, 199, 0.2);
  }

  #checklist {
    margin-right: 20%;
    margin-left: 20%;
  }
}

@media (max-width: 700px) {

  #checklist {
    margin-right: 5%;
    margin-left: 5%;
  }

}

@media (max-width: 524px) {
  .logo-header {
    height: 70px;
  }

  ul div {
    display: initial;
  }

  .logo-main {
    margin-bottom: 5px;
  }

  #about-podcast {
    flex-direction: column;
    align-items: center;
  }

  h1 {
    margin-bottom: 30px;
    text-align: center;
  }

  #group-links {
    gap: 25px;
  }
}