/* BODY */
body {
  height: 100%;
  min-height: 100vh;
  font-family: 'MedievalSharp', cursive;
  background: linear-gradient(to bottom, #F7C779, #1D8D62);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

/* TYPE CONTAINER */
.container {
  margin-top: 50px;
  position: relative;
  width: 1600px;
  height: 800px;
  border: 6px double white;
  box-sizing: border-box;
}

/* SHAPES */
.sun {
  position: absolute;
  width: 250px;
  height: 250px;
  background: white;
  border-radius: 50%;
  top: 50px;
  left: 53%;
  transform: translateX(-50%);
  z-index: 1;
}

.cloud1 {
 position: absolute;
    height: 35px;
    top: 200px;
    z-index: 1;
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: white;
}
.cloud2 {
 position: absolute;
    height: 75px;
    top:265px;
    z-index: 1;
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: white;
}

.cloud1.left {
  left: 175px; 
}
.cloud2.left {
  left: 200px; 
}

.cloud1.right {
  right: 200px; 
}
.cloud2.right {
  right: 175px; 
}


/* MOUNTAINS */
.mountains {
  position: absolute;
  bottom: 300px;
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0px;
}

.peak2, .peak4 {
   --b:14px; 
  width: 450px;
  margin:-75px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 0,100% 100%,0 100%,50% 0,50% var(--b),calc(var(--b)*cos(30deg)) calc(100% - var(--b)/2),calc(100% - var(--b)*cos(30deg)) calc(100% - var(--b)/2),50% var(--b));
  background: white;
}

.peak1, .peak3, .peak5 {
  --b:14px; 
  width: 300px;
    margin:-75px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 0,100% 100%,0 100%,50% 0,50% var(--b),calc(var(--b)*cos(30deg)) calc(100% - var(--b)/2),calc(100% - var(--b)*cos(30deg)) calc(100% - var(--b)/2),50% var(--b));
  background: white;
}

/* TREES */
.tree1 { 
 position: absolute;
  bottom: 225px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;
  border-bottom: 120px solid white;   
    margin: -30px auto 0;
}

.tree2 { 
 position: absolute;
  bottom: 225px;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;  
  border-right: 30px solid transparent;
  border-bottom: 80px solid white;      
  margin: -30px auto 0;
}

.tree1.left {
  left: 100px; 
}
.tree2.left {
  left: 50px; 
}

.tree1.right {
  right: 100px; 
}
.tree2.right {
  right: 50px; 
}

/* TYPE */
h1 {
  position: absolute;
  top: 150px;
  width: 100%;
  font-size: 250px;
  letter-spacing: 4px;
  z-index: 2;
    color:  #ffffff;
text-shadow: #ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px;
}

.medium {
  font-size: 175px;
}

.small {
  font-size: 125px;
}

h2 {
  position: absolute;
  top: 25px;
  left: 5%;
  width: 100%;
  font-size: 100px;
  letter-spacing: 8px;
  word-spacing: 75px;
  z-index: 2;
    color:  #ffffff;
text-shadow: #ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px;
}

.all-word {
  width: 100%;
    color:  #F7C779;
}

h3 {
  position: absolute;
  width: 100%;
  top:475px;
  left:1%;
  font-size: 100px;
  letter-spacing: 35px;
  word-spacing: 25px;
  z-index: 2;
    color:  #ffffff;
text-shadow: #ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px;
}

.author {
  position: absolute;
  bottom: 0px;
  right: 35px;
  font-size: 30px;
  letter-spacing: 3px;
  color:  #ffffff;
text-shadow: #ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px;

}