@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");

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

:root {
  /*Text*/
  --Very-dark-desaturated-blue: hsl(238, 29%, 16%);
  --Very-dark-grayish-blue: hsl(237, 12%, 33%);
  --Dark-grayish-blue: hsl(240, 6%, 50%);
  --Soft-red: hsl(14, 88%, 65%);

  /*Background Grandient*/
  --Soft-violet: hsl(273, 75%, 66%);
  --Soft-blue: hsl(240, 73%, 65%);

  /*Dividers*/
  --Light-grayish-blue: hsl(0, 0%, 100%);
}
body {
  background: linear-gradient(270deg, var(--Soft-violet), var(--Soft-blue));

  font-family: "Kumbh Sans", sans-serif;
}

.container {
  background-color: var(--Light-grayish-blue);
  display: flex;
  width: 980px;
  height: 520px;
  margin: 0 auto;
  margin-top: 4em;
  border-radius: 20px;
  -webkit-box-shadow: 0 5rem 5rem -10px rgba(0, 0, 0, 0.25);
  box-shadow: 0 5rem 5rem -10px rgba(0, 0, 0, 0.25);
}
.img-illustration-woman,
.box {
  position: absolute;
  float: left;
}

.container__content {
  margin-top: 2em;

  font-size: 12.99px;
  width: 350px;
}
.container__content h1 {
  margin-bottom: 0.933em;

  color: var(--Very-dark-desaturated-blue);
}

.content__details {
  height: 70px;
  padding-bottom: 4rem;

  color: var(--Dark-grayish-blue);
}
.content__details__summary {
  color: var(--Very-dark-desaturated-blue);
  border-bottom: 1px solid hsl(240, 6%, 50%);
  cursor: pointer;

  padding-bottom: 0.6em;

  margin-bottom: 0.7em;
  margin-top: 0.9em;
  width: 380px;
  outline: none;
  list-style: none;
}

.content__details__summary::after {
  content: url(../images/icon-arrow-down.svg);

  float: right;
  transition: 0.5s all;
}

.content__details[open] .content__details__summary {
  font-weight: 700;
}
.content__details[open] .content__details__summary::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.content__details__summary:hover {
  color: var(--Very-dark-grayish-blue);

  font-weight: 600;
}
.content__details__summary:active {
  color: var(--Soft-red);
}

.footer {
  text-align: center;
  margin-top: 20px;
  height: 70px;
  color: var(--Very-dark-desaturated-blue);
}
.footer a {
  color: var(--Very-dark-desaturated-blue);
  transition: 0.7s all;
}
.footer a:hover {
  color: var(--Light-grayish-blue);
  padding-left: 10px;
}

@keyframes float {
  0%,
  100% {
    transform: translatey(140px);
  }
  50% {
    transform: translatey(100px);
  }
}
.box {
  animation: float 6s ease-in-out infinite;
}

/*
Responsividade baseado no que eu sei rsrsrs
*/

@media screen and (max-width: 767px) {
  body {
    box-sizing: border-box;
    
  }
  .container {
    width: 340px;
    height: 600px;
    margin-top: 20%;
    align-items: center;
    justify-content: center;
  }
  .img-illustration-woman,
  .box,
  .ppaaa {
    display: none;
  }
  .content__details {
    height: 7.05em;
  }
  .content__details,
  .content__details__summary {
    width: 263px;
    margin: auto;
    font-size: 12.5px;
  }
  .mobile {
    content: url(../images/illustration-woman-online-mobile.svg);
    top: 0;
    width: 200px;
    position: absolute;
  }
  .container__content {
    margin-top: 100px;
  }
  h1 {
    text-align: center;
  }
  .mobile {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0%,
    100% {
      transform: translatey(-10px);
    }
    50% {
      transform: translatey(5px);
    }
  }
}