body, html {
  margin: 0;
  padding: 0;
  font-family: 'Outfit', sans-serif;
  color: #f0f0f0;
  background: transparent;
  position: relative;
  overflow-x: hidden;
  height: 100%;
}
#background-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
main {
  max-width: 700px;
  margin: auto;
  padding: 2rem;
  background-color: rgba(0,0,0,0.7);
  border-radius: 1rem;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
  margin-top: 4rem;
}
section {
  margin-bottom: 3rem;
}
h2 {
  color: #8cc0ff;
  border-bottom: 1px solid #555;
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
}
input, button {
  width: 100%;
  padding: 0.7rem;
  margin-top: 0.6rem;
  border-radius: 0.5rem;
  border: none;
  background: #222;
  color: white;
}
button {
  border: 1px solid #8cc0ff;
  background: transparent;
  cursor: pointer;
  transition: 0.2s;
}
button:hover {
  background: #8cc0ff;
  color: #000;
}
iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 10px;
}
.result {
  margin-top: 1rem;
  color: #a5e6b1;
}

/*Icons*/

.pin {
  width: 50px ;
  height: 50px ;
  background-color: #a55eea ;
  border-radius: 60px 60px 0px 60px ;
  position:relative ;
  transform: rotate(45deg);
  display: block;
}
.pin::after {
  content: "" ;
  width: 25px ;
  height: 25px ;
  background: #222 ;
  position: absolute ;
  left: 26% ;
  top: 26% ;
  border-radius: 60px ;
}



.canvas {
  transform: scale(0.1);
  display: block;
  margin: 4rem auto;
}

.background {
  position: relative;
  width: 50.4rem;
  height: 50.4rem;
  border-radius: 50%;
  background-color: #beb6de;
  overflow: hidden;
  margin: 0 auto;
}

.layer-1 {
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
}

.land {
  z-index: 99;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13.3rem;
  background-color: #251f3b;
}

.land .window-shadow-1 {
  position: absolute;
  top: 1.4rem;
  left: 30.9rem;
  width: 1.7rem;
  height: 1rem;
  background-color: #e2ad43;
  clip-path: polygon(0 0, 57% 0, 100% 100%, 24% 100%);
}

.land .window-shadow-2 {
  position: absolute;
  top: 1.4rem;
  left: 32.6rem;
  width: 2rem;
  height: 1rem;
  background-color: #e2ad43;
  clip-path: polygon(0 0, 49% 0, 100% 100%, 39% 100%);
}

.land .window-shadow-3 {
  position: absolute;
  top: 2.8rem;
  left: 31.5rem;
  width: 4.3rem;
  height: 1.9rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a17a43+52,26203c+100 */
  background: #a17a43;
  /* Old browsers */
  background: -moz-linear-gradient(top, #a17a43 52%, #26203c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #a17a43 52%, #26203c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #a17a43 52%, #26203c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a17a43', endColorstr='#26203c',GradientType=0 );
  /* IE6-9 */
  clip-path: polygon(0 0, 28% 0, 100% 143%, 25% 100%);
}

.land .window-shadow-4 {
  position: absolute;
  top: 2.8rem;
  left: 33.5rem;
  width: 8.3rem;
  height: 1.9rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a17a43+52,26203c+100 */
  background: #a17a43;
  /* Old browsers */
  background: -moz-linear-gradient(top, #a17a43 52%, #26203c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #a17a43 52%, #26203c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #a17a43 52%, #26203c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a17a43', endColorstr='#26203c',GradientType=0 );
  /* IE6-9 */
  clip-path: polygon(0 0, 16% 0, 100% 231%, 25% 100%);
}

.tree-dark {
  position: absolute;
}

.triangle {
  position: absolute;
}

.tree-1 {
  bottom: 13.3rem;
  left: -1.3rem;
  z-index: 99;
}

.tree-1 .triangle-1 {
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 34px 78px 34px;
  border-color: transparent transparent #251f3b transparent;
}

.tree-1 .triangle-2 {
  bottom: 4.1rem;
  left: 1rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 48px 24px;
  border-color: transparent transparent #251f3b transparent;
}

.tree-1 .triangle-3 {
  bottom: 7.3rem;
  left: 2rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14.5px 33px 14.5px;
  border-color: transparent transparent #251f3b transparent;
}

.tree-2 {
  bottom: 13.3rem;
  left: 3.1rem;
  z-index: 99;
}

.tree-2 .triangle-1 {
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 44.5px 90px 44.5px;
  border-color: transparent transparent #251f3b transparent;
}

.tree-2 .triangle-2 {
  bottom: 4.9rem;
  left: 1.6rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 29px 58px 29px;
  border-color: transparent transparent #251f3b transparent;
}

.tree-2 .triangle-3 {
  bottom: 9rem;
  left: 2.6rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 19px 38px 19px;
  border-color: transparent transparent #251f3b transparent;
}

.tree-3 {
  bottom: 13.3rem;
  left: 38rem;
  z-index: 99;
}

.tree-3 .triangle-1 {
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 44.5px 90px 44.5px;
  border-color: transparent transparent #251f3b transparent;
}

.tree-3 .triangle-2 {
  bottom: 4.9rem;
  left: 1.6rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 29px 58px 29px;
  border-color: transparent transparent #251f3b transparent;
}

.tree-3 .triangle-3 {
  bottom: 9rem;
  left: 2.6rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 19px 38px 19px;
  border-color: transparent transparent #251f3b transparent;
}

.cabin {
  position: absolute;
  z-index: 99;
  bottom: 13.3rem;
  left: 12.7rem;
  width: 25.2rem;
  height: 19.1rem;
}

.cabin .chimney {
  position: absolute;
  width: 3rem;
  height: 3.8rem;
  background-color: #443b68;
  left: 6rem;
  top: 0;
}

.cabin .chimney:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.2rem;
  background-color: #251e3d;
}

.cabin .chimney .brick {
  position: absolute;
  background: #a5a3d4;
  height: 0.4rem;
}

.cabin .chimney .brick-1 {
  width: 1rem;
  right: 0;
  top: 0.5rem;
}

.cabin .chimney .brick-2 {
  width: 0.5rem;
  right: 0;
  top: 1.1rem;
}

.cabin .chimney .brick-3 {
  width: 1rem;
  left: 1.2rem;
  top: 2.2rem;
}

.cabin .chimney .brick-4 {
  width: 0.5rem;
  left: 1.2rem;
  top: 2.8rem;
}

.cabin .roof-top {
  position: absolute;
  z-index: 2;
  top: 3.8rem;
  left: 4.1rem;
  right: 4.1rem;
  height: 1.4rem;
  background-color: #443b68;
  border-radius: 0.7rem;
}

.cabin .roof-top:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #241e3a;
  border-radius: 50%;
}

.cabin .roof-front {
  position: absolute;
  z-index: 1;
  left: 1rem;
  top: 4.7rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 42.5px 48px 42.5px;
  border-color: transparent transparent #251f3b transparent;
}

.cabin .roof-back {
  position: absolute;
  left: 7.4rem;
  top: 5.2rem;
  width: 14.6rem;
  height: 4.3rem;
  background-color: #251f3b;
  -webkit-transform: skewX(42deg);
  -ms-transform: skewX(42deg);
  -o-transform: skewX(42deg);
  transform: skewX(42deg);
}

.cabin .roof-back .roof-brick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5rem;
  background-color: #433a65;
}

.cabin .roof-back .roof-brick-1 {
  left: 0.2rem;
}

.cabin .roof-back .roof-brick-2 {
  left: 2.2rem;
}

.cabin .roof-back .roof-brick-3 {
  left: 4.3rem;
}

.cabin .roof-back .roof-brick-4 {
  left: 6.5rem;
}

.cabin .roof-back .roof-brick-5 {
  left: 8.7rem;
}

.cabin .roof-back .roof-brick-6 {
  left: 10.9rem;
}

.cabin .roof-back .roof-brick-7 {
  left: 13.1rem;
}

.cabin .roof-bottom {
  position: absolute;
  left: 0.7rem;
  top: 9.5rem;
  width: 23.6rem;
  height: 0.5rem;
  background-color: #251f3b;
}

.cabin .cabin-body {
  position: absolute;
  top: 10rem;
  left: 0.7rem;
  width: 23.6rem;
  height: 9.7rem;
  background-color: #251f3b;
}

.cabin .cabin-body .body-line {
  position: absolute;
  left: -0.7rem;
  right: -0.7rem;
  height: 1.1rem;
  border-radius: 0.55rem;
  background-color: #443b68;
}

.cabin .cabin-body .body-line:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  bottom: 0;
  width: 10.3rem;
  background-color: #251f3b;
  border-radius: 0.55rem;
}

.cabin .cabin-body .body-line1 {
  top: 0rem;
}

.cabin .cabin-body .body-line2 {
  top: 1.6rem;
}

.cabin .cabin-body .body-line3 {
  top: 3.2rem;
}

.cabin .cabin-body .body-line4 {
  top: 4.7rem;
}

.cabin .cabin-body .body-line5 {
  top: 6.3rem;
}

.cabin .cabin-body .body-line6 {
  top: 7.9rem;
}

.cabin .cabin-body .window {
  position: absolute;
  z-index: 3;
  left: 2.4rem;
  top: 3.2rem;
  width: 3rem;
  height: 2.6rem;
  border-left: 2px solid #433c68;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7734c+0,fcbe47+100 */
  background: #f7734c;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f7734c 0%, #fcbe47 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f7734c 0%, #fcbe47 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f7734c 0%, #fcbe47 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7734c', endColorstr='#fcbe47',GradientType=0 );
  /* IE6-9 */
}

.cabin .cabin-body .window:before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 50%;
  width: 0.3rem;
  background-color: #251f39;
}

.cabin .cabin-body .window:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.2rem;
  background-color: #463a6a;
}

.cabin .cabin-body .window-wood {
  position: absolute;
  z-index: 1;
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 0.55rem;
}

.cabin .cabin-body .wood-1 {
  background-color: #433c68;
  left: 1.9rem;
  top: 3.2rem;
}

.cabin .cabin-body .wood-2 {
  background-color: #433c68;
  left: 1.9rem;
  top: 4.7rem;
}

.cabin .cabin-body .wood-3 {
  z-index: 4;
  background-color: #251f3b;
  left: 4.9rem;
  top: 3.2rem;
}

.cabin .cabin-body .wood-4 {
  z-index: 4;
  background-color: #251f3b;
  left: 4.9rem;
  top: 4.7rem;
}

.cabin .cabin-body .door {
  position: absolute;
  left: 15rem;
  width: 4.5rem;
  height: 6.5rem;
  bottom: 0;
  background-color: #251f3b;
}

.cabin .cabin-body .door .door-window {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  background-color: red;
}

.cabin .cabin-body .door .door-window-1 {
  top: 0.2rem;
  left: 1.5rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f37356+72,fd844d+100 */
  background: #f37356;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f37356 72%, #fd844d 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f37356 72%, #fd844d 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f37356 72%, #fd844d 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f37356', endColorstr='#fd844d',GradientType=0 );
  /* IE6-9 */
}

.cabin .cabin-body .door .door-window-2 {
  top: 0.2rem;
  left: 2.5rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f37356+72,fd844d+100 */
  background: #f37356;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f37356 72%, #fd844d 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f37356 72%, #fd844d 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f37356 72%, #fd844d 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f37356', endColorstr='#fd844d',GradientType=0 );
  /* IE6-9 */
}

.cabin .cabin-body .door .door-window-3 {
  top: 1.3rem;
  left: 1.5rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9a646+0,ffbb45+100 */
  background: #f9a646;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f9a646 0%, #ffbb45 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f9a646 0%, #ffbb45 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f9a646 0%, #ffbb45 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9a646', endColorstr='#ffbb45',GradientType=0 );
  /* IE6-9 */
}

.cabin .cabin-body .door .door-window-4 {
  top: 1.3rem;
  left: 2.5rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9a646+0,ffbb45+100 */
  background: #f9a646;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f9a646 0%, #ffbb45 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f9a646 0%, #ffbb45 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f9a646 0%, #ffbb45 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9a646', endColorstr='#ffbb45',GradientType=0 );
  /* IE6-9 */
}

.cabin .cabin-body .door .door-wood {
  position: absolute;
  z-index: 1;
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 0.55rem;
}

.cabin .cabin-body .door .door-wood-1 {
  background-color: #433c68;
  left: -0.55rem;
  top: 0;
}

.cabin .cabin-body .door .door-wood-2 {
  background-color: #433c68;
  left: -0.55rem;
  top: 1.5rem;
}

.cabin .cabin-body .door .door-wood-3 {
  z-index: 4;
  background-color: #433c68;
  left: -0.55rem;
  top: 3.1rem;
}

.cabin .cabin-body .door .door-wood-4 {
  z-index: 4;
  background-color: #433c68;
  left: -0.55rem;
  top: 4.7rem;
}

.cabin .cabin-body .door .door-wood-5 {
  background-color: #251f3b;
  right: -0.55rem;
  top: 0;
}

.cabin .cabin-body .door .door-wood-6 {
  background-color: #251f3b;
  right: -0.55rem;
  top: 1.5rem;
}

.cabin .cabin-body .door .door-wood-7 {
  background-color: #251f3b;
  right: -0.55rem;
  top: 3.1rem;
}

.cabin .cabin-body .door .door-wood-8 {
  background-color: #251f3b;
  right: -0.55rem;
  top: 4.7rem;
}

.layer-2 {
  position: absolute;
  z-index: 98;
  width: 100%;
  height: 100%;
}

.layer-2 .mountain-1 {
  position: absolute;
  width: 100%;
  height: 20rem;
  background-color: #4f4975;
  -webkit-transform: rotate(27deg);
  -ms-transform: rotate(27deg);
  -o-transform: rotate(27deg);
  transform: rotate(27deg);
  top: 27rem;
  left: -11rem;
}

.layer-2 .mountain-2 {
  position: absolute;
  width: 100%;
  height: 20rem;
  background-color: #4f4975;
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  transform: rotate(-25deg);
  top: 31.5rem;
  right: -11rem;
}

.layer-2 .tree-1 {
  position: absolute;
  left: 0.7rem;
  bottom: 29rem;
}

.layer-2 .tree-1 .triangle-1 {
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 23px 46px 26px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-1 .triangle-2 {
  bottom: 3rem;
  left: 0.9rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 17px 34px 17px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-1 .triangle-3 {
  bottom: 5rem;
  left: 1.4rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 24px 12px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-2 {
  position: absolute;
  left: 6rem;
  bottom: 26.8rem;
}

.layer-2 .tree-2 .triangle-1 {
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 19px 38px 19px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-2 .triangle-2 {
  bottom: 2.5rem;
  left: 0.6rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 13px 26px 13px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-2 .triangle-3 {
  bottom: 4rem;
  left: 1.1rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 16px 8px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-3 {
  position: absolute;
  left: 39rem;
  bottom: 21.2rem;
}

.layer-2 .tree-3 .triangle-1 {
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 16px 32px 16px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-3 .triangle-2 {
  bottom: 1.9rem;
  left: 0.2rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 28px 14px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-3 .triangle-3 {
  bottom: 3.5rem;
  left: 0.7rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9px 18px 9px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-4 {
  position: absolute;
  left: 44.7rem;
  bottom: 23.8rem;
}

.layer-2 .tree-4 .triangle-1 {
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 22px 44px 22px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-4 .triangle-2 {
  bottom: 2.2rem;
  left: 0.5rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 17px 34px 17px;
  border-color: transparent transparent #4f4975 transparent;
}

.layer-2 .tree-4 .triangle-3 {
  bottom: 4.4rem;
  left: 1rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 24px 12px;
  border-color: transparent transparent #4f4975 transparent;
}

.moon {
  position: absolute;
  z-index: 99;
  width: 7rem;
  height: 7rem;
  background-color: white;
  border-radius: 50%;
  top: 6rem;
  right: 12rem;
}

.layer-3 {
  position: absolute;
  z-index: 97;
  width: 100%;
  height: 100%;
}

.layer-3 .mountain-1 {
  position: absolute;
  width: 100%;
  height: 20rem;
  background-color: #a49fc7;
  top: 24rem;
  left: -12rem;
  -webkit-transform: skew(-72deg, 19deg);
  -ms-transform: skew(-72deg, 19deg);
  -o-transform: skew(-72deg, 19deg);
  transform: skew(-72deg, 19deg);
}

.layer-3 .mountain-2 {
  position: absolute;
  width: 100%;
  height: 20rem;
  background-color: #9c9bc3;
  top: 28rem;
  left: 8rem;
  -webkit-transform: skew(-74deg, 24deg);
  -ms-transform: skew(-74deg, 24deg);
  -o-transform: skew(-74deg, 24deg);
  transform: skew(-74deg, 24deg);
}

.layer-3 .cloud-1 {
  position: absolute;
  left: 0;
  top: 13rem;
}

.layer-3 .cloud-circle {
  position: absolute;
  background-color: #cbc6e6;
  border-radius: 50%;
}

.layer-3 .cloud-circle-1 {
  width: 4.5rem;
  height: 4.5rem;
  left: 0;
  top: 0;
}

.layer-3 .cloud-circle-2 {
  width: 2.1rem;
  height: 2.1rem;
  left: 4.3rem;
  top: 2.4rem;
}

.layer-3 .cloud-circle-3 {
  width: 3rem;
  height: 3rem;
  left: 6rem;
  top: 1rem;
}

.layer-3 .cloud-circle-4 {
  width: 3rem;
  height: 3rem;
  left: 6rem;
  top: 1rem;
}

.layer-3 .cloud-circle-5 {
  width: 2.2rem;
  height: 2.2rem;
  left: 8.5rem;
  top: 1.7rem;
}

.layer-3 .cloud-circle-6 {
  width: 2.5rem;
  height: 2.5rem;
  left: 10rem;
  top: 2.2rem;
}

.layer-3 .cloud-bg-1 {
  position: absolute;
  background-color: #cbc6e6;
  left: 0;
  width: 11rem;
  height: 5rem;
  bottom: -8rem;
}

.layer-4 {
  position: absolute;
  z-index: 97;
  width: 100%;
  height: 100%;
}

.layer-4 .star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
}

.layer-4 .star-1 {
  height: 0.5rem;
  width: 0.5rem;
  top: 11rem;
  left: 6rem;
}

.layer-4 .star-2 {
  height: 0.3rem;
  width: 0.3rem;
  top: 7rem;
  left: 10rem;
}

.layer-4 .star-3 {
  height: 0.3rem;
  width: 0.3rem;
  top: 9rem;
  left: 12rem;
}

.layer-4 .star-4 {
  height: 0.3rem;
  width: 0.3rem;
  top: 12rem;
  left: 11rem;
}

.layer-4 .star-4 {
  height: 0.3rem;
  width: 0.3rem;
  top: 2.3rem;
  left: 47rem;
}

.layer-4 .star-5 {
  height: 0.3rem;
  width: 0.3rem;
  top: 3.3rem;
  left: 27rem;
}

.layer-4 .star-6 {
  height: 0.3rem;
  width: 0.3rem;
  top: 3.5rem;
  left: 24.5rem;
}

.layer-4 .star-7 {
  height: 0.3rem;
  width: 0.3rem;
  top: 6rem;
  left: 30rem;
}

.layer-4 .star-8 {
  height: 0.3rem;
  width: 0.3rem;
  top: 16rem;
  left: 28rem;
}

.layer-4 .star-9 {
  height: 0.3rem;
  width: 0.3rem;
  top: 9rem;
  left: 24.5rem;
}

.layer-4 .star-10 {
  height: 0.3rem;
  width: 0.3rem;
  top: 10.7rem;
  left: 29.6rem;
}

.layer-4 .star-11 {
  height: 0.3rem;
  width: 0.3rem;
  top: 6rem;
  left: 39.2rem;
}

.layer-4 .star-12 {
  height: 0.3rem;
  width: 0.3rem;
  top: 10.9rem;
  left: 42.3rem;
}

.layer-4 .star-13 {
  height: 0.5rem;
  width: 0.5rem;
  top: 11.7rem;
  left: 41.1rem;
}

.layer-5 {
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
}

.layer-5 .smoke {
  position: absolute;
  top: 0;
  left: 14.5rem;
  width: 13rem;
  height: 17.4rem;
  opacity: 0.7;
}

.layer-5 .smoke .smoke-circle {
  position: absolute;
  border-radius: 50%;
  background-color: #ebe9f6;
}

.layer-5 .smoke .smoke-circle-1 {
  width: 1rem;
  height: 1rem;
  bottom: 0;
  left: 5.1rem;
}

.layer-5 .smoke .smoke-circle-2 {
  width: 1.7rem;
  height: 1.7rem;
  bottom: 0.5rem;
  left: 4.7rem;
}

.layer-5 .smoke .smoke-circle-3 {
  width: 3rem;
  height: 3rem;
  bottom: 1.7rem;
  left: 4rem;
}

.layer-5 .smoke .smoke-circle-4 {
  width: 3rem;
  height: 3rem;
  bottom: 1.7rem;
  left: 4rem;
}

.layer-5 .smoke .smoke-circle-5 {
  width: 2.5rem;
  height: 2.5rem;
  bottom: 3.7rem;
  left: 2.5rem;
}

.layer-5 .smoke .smoke-circle-6 {
  width: 2.5rem;
  height: 2.5rem;
  bottom: 3.7rem;
  left: 2.5rem;
}

.layer-5 .smoke .smoke-circle-7 {
  width: 3rem;
  height: 3rem;
  bottom: 4.4rem;
  left: 5.2rem;
}

.layer-5 .smoke .smoke-circle-8 {
  width: 2.4rem;
  height: 2.4rem;
  bottom: 5.6rem;
  left: 2rem;
}

.layer-5 .smoke .smoke-circle-9 {
  width: 2.5rem;
  height: 2.5rem;
  bottom: 7.1rem;
  left: 5.7rem;
}

.layer-5 .smoke .smoke-circle-10 {
  width: 5rem;
  height: 5rem;
  bottom: 7.7rem;
  left: 0rem;
}

.layer-5 .smoke .smoke-circle-11 {
  width: 6.5rem;
  height: 6.5rem;
  bottom: 9rem;
  left: 5rem;
}

.layer-5 .smoke .smoke-circle-12 {
  width: 1.7rem;
  height: 1.7rem;
  bottom: 12.4rem;
  left: 1.5rem;
}

.layer-5 .smoke .smoke-circle-13 {
  width: 3rem;
  height: 3rem;
  bottom: 14.7rem;
  left: 8.1rem;
}

.layer-5 .smoke .smoke-circle-14 {
  width: 2.4rem;
  height: 2.4rem;
  bottom: 15.3rem;
  left: 3rem;
}

.layer-5 .smoke .smoke-circle-15 {
  width: 3.3rem;
  height: 3.3 rem;
  bottom: 16.4rem;
  left: 9.1rem;
}

.layer-5 .smoke .smoke-circle-16 {
  width: 3.4rem;
  height: 3.4rem;
  bottom: 12.6rem;
  left: 2.1rem;
}

.layer-5 .smoke .smoke-bg-1 {
  position: absolute;
  background-color: #ebe9f6;
  width: 2.3rem;
  height: 14.6rem;
  left: 4rem;
  bottom: 3rem;
}

.layer-5 .smoke .smoke-bg-2 {
  position: absolute;
  background-color: #ebe9f6;
  width: 2.3rem;
  height: 7.6rem;
  left: 3rem;
  bottom: 6rem;
}

.layer-5 .smoke .smoke-bg-3 {
  position: absolute;
  background-color: #ebe9f6;
  width: 3.3rem;
  height: 7.6rem;
  left: 6rem;
  bottom: 11rem;
}

.layer-5 .smoke .smoke-bg-4 {
  position: absolute;
  background-color: #ebe9f6;
  width: 1.3rem;
  height: 7.6rem;
  left: 6rem;
  bottom: 9rem;
}


.link-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
  position: absolute;
}

.link-icon img {
  width: 60px;
  height: 60px;
}

.link-icon.maps {
  bottom: 1rem;
  left: 1rem;
}

.link-icon.map {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.link-icon.quiz {
  bottom: 1rem;
  right: 1rem;
}

.title {
  font-family: 'Caveat', cursive;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
}

.date {
  font-family: 'Outfit', sans-serif;
  position: absolute;
  bottom: 5rem;
  width: 100%;
  text-align: center;
}


.link-icon.gift {
  bottom: 28%;
  left: 0.8rem;
  transform: rotate(45deg);
}