:root{
  --default-width: min(100%, 1024px);
}

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

html{
  font-size: 20px;
  color: #000000;
  font-family: 'Inter', system-ui;
  color: #000000;
  background: #FBF5F7;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(/static/img/bg_body_trees.png) center bottom/25rem no-repeat,
              url(/static/img/star_3.png) 90% 85%/4rem no-repeat,
              url(/static/img/star_2.png) 40% 95%/5rem no-repeat;
}

@media (min-width: 800px){
  body{
    background: url(/static/img/bg_body_trees.png) right bottom/40rem no-repeat,
                url(/static/img/stars.png) 10% 40%/10rem no-repeat,
                url(/static/img/stars_2.png) 75% 85%/10rem no-repeat,
                url(/static/img/star_3.png) 90% 85%/5rem no-repeat,
                url(/static/img/star_3.png) 10% 60%/5rem no-repeat,
                url(/static/img/star_1.png) 90% center/6rem no-repeat,
                url(/static/img/star_1.png) 13% 55%/5rem no-repeat,
                url(/static/img/star_2.png) center 90%/5rem no-repeat;
  }
}

body > main{
  flex-grow: 1;
  width: var(--default-width);
  padding: 0 min(1rem, 8%);
}

body > header{
  width: 100%;
  padding: 2rem 1rem;
  background: url(/static/img/bg-header-trees.png) -4.5rem bottom/13rem no-repeat,
              url(/static/img/star_3.png) 60% 10%/3rem no-repeat,
              url(/static/img/star_5.png) 40% 90%/2rem no-repeat,
              url(/static/img/star_1.png) 90% 15%/4rem no-repeat,
              #2a2a2a url(/static/img/star_1.png) 10% 10%/3rem no-repeat;
  display: flex;
  justify-content: center;
}
@media (min-width: 800px){
  body > header{
    background: url(/static/img/bg-header-trees.png) 30% bottom/contain no-repeat,
                url(/static/img/bg-header-stars.png) 25% top/5rem no-repeat,
                url(/static/img/star_5.png) 70% 30%/2rem no-repeat,
                url(/static/img/star_1.png) 60% 10%/2rem no-repeat,
                #2a2a2a url(/static/img/star_5.png) 40% 55%/3rem no-repeat;
  }
}

body > header > section{
  width: var(--default-width);
  display: grid;
  gap: 1rem;
  grid-template-areas:
  "placeholder"
  "logo"
  "menu";
  align-items: end;
}

@media (min-width: 800px){
  body > header > section{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "placeholder logo menu";
  }
}

body > footer{
  display: block;
  height: 13rem;
}
@media (min-width: 800px){
  body > footer{
    height: 20rem;
  }
}

.greeting{
  padding: 2rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 8rem;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 800px){
  .greeting{
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
  }
}
.greeting__text{
  text-align: center;
}
@media (min-width: 800px){
  .greeting__text{
    font-size: 1.3rem;
  }
}
.greeting__left{
  display: none;
  align-self: end;
  justify-self: end;
}
.greeting__right{
  display: none;
  transform: scaleX(-1);
  align-self: start;
  justify-self: start;
}
@media (min-width: 800px){
  .greeting__left,
  .greeting__right{
    display: block;
  }
}
.greeting picture {
  width: 3rem;
}
.greeting picture * {
  width: 100%;
}