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

:root {
  --sky-color: linear-gradient(180deg, rgb(94, 167, 196), pink);
  --ground-color: linear-gradient(360deg, rgb(2, 107, 2), rgb(119, 245, 119));
}

.tp {
  grid-area: tp;
}
.lp {
  grid-area: lp;
}
.rp {
  grid-area: rp;
}
.bp {
  grid-area: bp;
}

.main {
  grid-area: main;
  overflow: hidden;
}

.art {
  display: grid;
  grid-template-columns: 1fr 1344px 1fr;
  grid-template-rows: 1fr 846px 1fr;
  grid-template-areas:
    "tp tp tp"
    "lp main rp"
    "bp bp bp";
  width: auto;
  height: 1000px;
}
.placeholder {
  background-color: rgb(40, 40, 40);
}

.main .sky {
  background: var(--sky-color);
  width: 100%;
  height: 50%;
}

.main .mountain-container-ko-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.main .ground {
  width: 100%;
  background: var(--ground-color);
  height: 50%;
}

.main .mountain {
  position: relative;
  background-image: linear-gradient(to right, #72c6ef 10%, #004e8f 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.main .mountain.first {
  width: 500px;
  height: 200px;
  top: 224px;
  left: -5%;
  z-index: 2;
}

.main .mountain.second {
  top: 29%;
  left: -25%;
  width: 600px;
  height: 300px;
  z-index: 1;
}

.main .mountain.third {
  top: 53%;
  left: -50%;
  width: 500px;
  height: 200px;
  z-index: 2;
}

.ice-cap {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
  z-index: 3;
}

.mountain.first .ice-cap {
  top: -25%;
  left: 40%;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    80% 70%,
    60% 91%,
    50% 70%,
    20% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.mountain.second .ice-cap {
  top: -7%;
  width: 190px;
  left: 34%;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    80% 70%,
    40% 91%,
    50% 70%,
    20% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.mountain.third .ice-cap {
  top: -20%;
  left: 40%;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    80% 70%,
    60% 91%,
    50% 70%,
    20% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  transform: rotate(270deg);
}

.mountain .shadow {
  position: relative;
  background-color: rgba(0, 0, 0, 0.251);
  z-index: 3;
}

.mountain.first .shadow,
.mountain.third .shadow {
  top: -60%;
  left: -7%;
  width: 370px;
  height: 300px;
  clip-path: polygon(
    77% 0,
    77% 26%,
    100% 52%,
    79% 69%,
    100% 79%,
    0 81%,
    0% 70%,
    0 0
  );
}

.mountain.second .shadow {
  top: -60%;
  left: 9%;
  width: 370px;
  height: 400px;
  clip-path: polygon(
    34% 0,
    66% 20%,
    66% 52%,
    81% 79%,
    45% 100%,
    0 100%,
    0% 70%,
    0 0
  );
}

.cloud {
  position: relative;
  width: 400px;
  height: 150px;
  --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
  background: rgba(255, 255, 255, 0.791);
  clip-path: inset(0 0 32% 0);
  transform: scale(0.8);
  z-index: 0;
}

.cloud:nth-child(2) {
  top: -90%;
  mask: var(--g) 100% 100%/30% 60%, var(--g) 70% 0/50% 100%,
    var(--g) 0 100%/36% 58%, var(--g) 27% 18%/26% 40%,
    linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
}

.cloud:nth-child(3) {
  top: -120%;
  left: 30%;
  mask: var(--g) 90% 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;
}

.cloud:nth-child(4) {
  top: -140%;
  left: 70%;
  mask: var(--g) 100% 100%/50% 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;
}

.cloud:nth-child(5) {
  top: -200%;
  left: 60%;
  width: 280px;
  height: 130px;
  background-color: rgba(255, 255, 255, 0.447);
  mask: var(--g) 80% 100%/50% 61%, 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;
}

.cloud:nth-child(6) {
  top: -190%;
  left: 50%;
  width: 280px;
  height: 130px;
  background-color: rgba(255, 255, 255, 0.386);
  mask: var(--g) 100% 100%/50% 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;
}

.tree-group {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
}

.tree-container:nth-of-type(1) {
  top: -10%;
  left: -1%;
}

.tree-container:nth-of-type(2) {
  top: -31%;
  left: 3%;
}

.tree-container:nth-of-type(3) {
  top: -52%;
  left: 8%;
}

.tree-container:nth-of-type(4) {
  top: -72%;
  left: 13%;
}

.tree-container:nth-of-type(5) {
  top: -95%;
  left: 20%;
}

.tree-container:nth-of-type(6) {
  top: -105%;
  left: 6%;
}

.tree-container:nth-of-type(7) {
  top: -125%;
  left: -1.5%;
}

.tree-container:nth-of-type(8) {
  top: -158%;
  left: 25%;
}

.tree-container:nth-of-type(9) {
  top: -161%;
  left: 2%;
}

.tree-container:nth-of-type(10) {
  top: -190%;
  left: 20%;
}

.tree-container:nth-of-type(11) {
  top: -201%;
  left: 10%;
}

.tree-container:nth-of-type(12) {
  top: -231%;
  left: 30%;
}

.tree-container:nth-of-type(13) {
  top: -251%;
  left: 15%;
}

.tree-container:nth-of-type(14) {
  top: -261%;
  left: 25%;
}

.tree-container:nth-of-type(15) {
  top: -307%;
  left: 50%;
}

.tree-container:nth-of-type(16) {
  top: -317%;
  left: 62%;
}

.tree-container:nth-of-type(17) {
  top: -341%;
  left: 70%;
}

.tree-container:nth-of-type(18) {
  top: -351%;
  left: 90%;
}

.tree-container:nth-of-type(19) {
  top: -391%;
  left: 82%;
}

.tree-container:nth-of-type(20) {
  top: -381%;
  left: 58%;
}

.tree-container {
  position: relative;
  width: 90px;
  height: 90px;
  transform: scale(0.5);
  top: -10%;
  left: -1%;
  z-index: 3;
}

.trunk {
  position: absolute;
  width: 20px;
  height: 60px;
  background: #66503e;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.tree-triangle {
  position: absolute;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  left: 50%;
  transform: translateX(-50%);
}

.tree-triangle.first {
  width: 80px;
  height: 60px;
  background: #038052;
  bottom: 130%;
  z-index: 3;
}

.tree-triangle.second {
  width: 110px;
  height: 80px;
  background: #046944;
  bottom: 90%;
  z-index: 2;
}

.tree-triangle.third {
  width: 140px;
  height: 100px;
  background: #034f33;
  bottom: 50%;
  z-index: 1;
}

.river {
  position: relative;
  top: -220.5%;
  left: 10%;
}

.house {
  position: relative;
  width: 100px;
  height: 100px;
  top: -90%;
  left: 80%;
  z-index: 3;
}
.house * {
  position: relative;
}
.house .roof {
  width: 90px;
  height: 40px;
  left: 4%;
  z-index: 4;
}

.house .roof .front-roof {
  background-color: brown;
  width: 90px;
  height: 50px;
  transform: skewX(30deg);
  z-index: 3;
}

.house .roof .back-roof {
  background-color: maroon;
  width: 4px;
  height: 45px;
  transform: skewX(-29deg);
  top: -127%;
  left: -30%;
}

.house .front {
  width: 85px;
  height: 55px;
  background-color: #fee4d3;
  top: 5%;
  left: 18%;
  z-index: 3;
}

.house .front .window {
  width: 20px;
  height: 20px;
  background-color: #66503e;
  border-radius: 2px;
}
.house .front .window:first-of-type {
  top: 30%;
  left: 10%;
}
.house .front .window:nth-of-type(2) {
  top:-6%;
  left:65%
}
.house .side {
  width: 50px;
  height: 55px;
  background-color: #ecd5c5;
  top: -54%;
  left: -30%;
  transform: skewY(10deg);
  z-index: 2;
}

.house .side .door {
  width: 15px;
  height: 35px;
  background-color: #66503e;
  top: 36%;
  left: 25%;
}

.house .triangle {
  width: 50px;
  height: 45px;
  background: #ecd5c5;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: -150%;
  left: -31%;
  transform: skewY(5deg);
  z-index: 2;
}

.grass-texture{
  position: relative;
  border-radius: 78% 22% 47% 53% / 56% 38% 62% 44% ;
  background-color: rgba(119, 154, 122, 0.352);
  width: 200px;
  height: 110px;
  top:-388%;
  left:75%;
  z-index: 2;
}

.buttons{
  position:relative;
  width: 400px;
  height:300px;
  border:2px dotted white;
  top:-50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: space-evenly;
}

.view-town , .more-info{
  width: 300px;
  height:50px;
  background-color:rgb(255, 226, 36);
  border:2px solid #66503e;
  border-radius: 10px;
  text-align: center;
  font-size:xx-large;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: 600;
  color: black;
  text-decoration: none;
}

.view-town:hover , .more-info:hover{
  transform: scale(1.1);
  transition-duration: 0.1s;
  background-color: orange;
  cursor: pointer;
}