/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap"); /* font-family: 'Kumbh Sans', sans-serif; */

/* COLORS */
:root {
  /* Text */
  --Very-dark-desaturated-blue: hsl(238, 29%, 16%);
  --Soft-red: hsl(14, 88%, 65%);

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

  /* Neutral - Text */
  --Very-dark-grayish-blue: hsl(237, 12%, 33%);
  --Dark-grayish-blue: hsl(240, 6%, 50%);

  /* Dividers */
  --Light-grayish-blue: hsl(240, 5%, 91%);
}

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

/* CODE */

body {
  font-size: 13px;
  font-family: "Kumbh Sans", sans-serif;

  height: 100vh;

  background-image: linear-gradient(var(--Soft-violet), var(--Soft-blue));
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: white;
  width: 325px;
  height: 525px;

  text-align: center;

  margin-top: 75px;

  border-radius: 25px;

  box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

.container .image__woman {
  background: url(./images/illustration-woman-online-mobile.svg) no-repeat
    center;

  position: relative;
  top: -108px;

  margin: auto;

  width: 235px;
  height: 180px;

  z-index: 99;
}

.container .bg__woman {
  background: url(./images/bg-pattern-mobile.svg) no-repeat center;

  position: relative;
  top: -215px;

  margin: auto;

  width: 235px;
  height: 180px;

  z-index: 98;
}

.container h1 {
  position: relative;
  top: -230px;
  font-size: 35px;
}

.container .q__container {
  position: relative;
  padding: 20px;
  top: -230px;
}

.container .q__container hr {
  border: none;
  border-top: 1px solid var(--Light-grayish-blue);
  margin-top: 15px;
  margin-bottom: 15px;
}

.container .q__container .q__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container div .answer {
  display: none;

  margin-top: 10px;
  padding-right: 10px;

  text-align: start;
  color: var(--Dark-grayish-blue);

  font-size: 11px;

  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

/* HOVER STATES */
.container .q__container .q__row:hover {
  color: var(--Soft-red);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

/* ATTRIBUTIONS */
.attribution {
  padding-top: 10px;
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}