.main-header {
  min-height: 80vh;
  margin-top: 80px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../../static/blob-green.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.main-header-content {
  padding: 0 5vw;
  text-align: center;
}

.main-header h2 {
  font-size: 1.4em;
}

@media screen and (min-width: 768px) {
  .main-header {
    margin-top: 0;
    background-size: cover;
  }

  .main-header h2 {
    font-size: 1.8em;
  }
}

@media screen and (min-width: 992px) {
  .main-header-content {
    padding: 0 15vw;
    text-align: center;
  }
}

h1 {
  padding-top: 0;
}

.routines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.routine {
  width: 85vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.routine img {
  width: 100px;
  height: 100px;
}

.routine-content {
  /* background-color: var(--blue); */
  border-radius: 20px;
  padding: 20px;
}

.routine-content p {
  /* color: white; */
  position: relative;
  margin-bottom: 14px;
}

.routine-content p::before {
  position: absolute;
  content: "";
  top: 2px;
  left: -20px;
  width: 18px;
  height: 18px;
  /* background-color: var(--green); */
  background-position: center;
  background-repeat: no-repeat;
}

.download-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  background-image: url("../../static/blob-green.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.blur {
  backdrop-filter: blur(10px);
  background-color: rgba(203, 203, 203, 0.297);
  border-radius: 30px;
  width: 80vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.message svg {
  color: blueviolet;
}

.button-text span {
  color: white;
}

.day p::before {
  background-image: url("../../static/icons/sun2.png");
}

.night p::before {
  background-image: url("../../static/icons/moon2.png");
}

main {
  margin-top: 0;
}

main h2 {
  font-size: 2.4rem;
  color: #333;
  text-align: center;
  transform: translateY(-40px);
  font-family: "Lora", serif;
}

@media screen and (min-width: 700px) {
  main h2 {
    text-align: center;
  }
}

.magic-pattern {
  margin-bottom: 100px;
  width: 100vw;
  height: 100vh;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../../../static/love-yourself.png");
}

.magic-pattern-content div {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 8px 8px 18px 0px rgba(66, 68, 90, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.parent {
  margin: auto;
  width: 80vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(8, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 20px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}
.div2 {
  grid-area: 2 / 1 / 3 / 2;
}
.div3 {
  grid-area: 3 / 1 / 4 / 2;
}
.div4 {
  grid-area: 4 / 1 / 5 / 2;
}
.div5 {
  grid-area: 5 / 1 / 6 / 2;
}
.div6 {
  grid-area: 6 / 1 / 9 / 2;
}

.training-circle,
.studio-circle,
.coach-circle,
.school-circle {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 350px) {
  .magic-pattern .parent {
    width: 90vw;
  }

  .magic-pattern .parent p {
    font-size: 17px;
  }
}

@media screen and (min-width: 702px) {
  .parent p {
    font-size: 16px;
  }
}

@media screen and (min-width: 992px) {
  .routines {
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    align-items: start;
  }

  .routine {
    width: 40vw;
  }

  .magic-pattern {
    background-size: contain;
    position: relative;
  }

  .magic-pattern::before {
    position: absolute;
    bottom: 150px;
    left: 200px;
    content: "";
    background-image: url("../../../static/left-love.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
  }

  .magic-pattern::after {
    position: absolute;
    bottom: 350px;
    right: 150px;
    content: "";
    background-image: url("../../../static/right-love.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
  }

  .parent {
    margin: auto;
    width: 80vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .div1 {
    grid-area: 2 / 2 / 4 / 4;
  }
  .div2 {
    grid-area: 3 / 5 / 5 / 7;
  }
  .div3 {
    grid-area: 2 / 9 / 4 / 11;
  }
  .div4 {
    grid-area: 6 / 3 / 8 / 7;
  }
  .div5 {
    grid-area: 5 / 8 / 7 / 10;
  }
  .div6 {
    grid-area: 9 / 5 / 12 / 9;
  }
}