:root {
  --font-color: rgb(42 58 123);
  --main-background: rgb(206 220 255);
  --layer-1-background: rgb(64 110 226);
  --layer-2-background: rgb(40, 71, 149);
  --layer-3-background: rgb(28, 55, 122);
  --layer-4-background: rgb(22, 38, 80);
  --stag-fill: rgb(255,255,255);
  --moon-fill: rgb(255,255,255);
  /* LAYER 1 */
  --layer-1-width: 700px;
  --layer-1-height: 500px;
  /* LAYER 2 */
  --layer-2-width: 600px;
  --layer-2-height: 450px;
  /* LAYER 3 */
  --layer-3-width: 540px;
  --layer-3-height: 400px;
  /* LAYER 4 */
  --layer-4-width: 480px;
  --layer-4-height: 350px;
  /* TREE 1 */
  --tree-1-fill: rgb(42 58 123);
  --tree-2-fill: rgb(42 58 123);
  --tree-3-fill: rgb(255, 255, 255);
  --tree-4-fill: rgb(190 208 246);
  --tree-5-fill: rgb(255, 255, 255);

}

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

html, body {
  width: 100%;
  height: 100%;
}

body, #container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-background);
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

.layer {
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
}

#layer-1 {
  width: var(--layer-1-width);
  height: var(--layer-1-height);
  background-color: var(--layer-1-background);
  border-radius: 51% 49% 34% 66% / 39% 66% 34% 61%;
  box-shadow: 3px 1px 7px 3px rgb(0 0 0 / 40%) inset;
  -webkit-box-shadow: 3px 1px 7px 3px rgb(0 0 0 / 40%) inset;
  -moz-box-shadow: 3px 1px 7px 3px rgb(0 0 0 / 40%) inset;
}

#layer-2 {
  width: var(--layer-2-width);
  height: var(--layer-2-height);
  background-color: var(--layer-2-background);
  border-radius: 41% 44% 45% 64% / 54% 65% 37% 57%;
  box-shadow: 3px 1px 8px 5px rgb(0 0 0 / 40%) inset;
  -webkit-box-shadow: 3px 1px 8px 5px rgb(0 0 0 / 40%) inset;
  -moz-box-shadow: 3px 1px 8px 5px rgb(0 0 0 / 40%) inset;
}

#layer-3 {
  width: var(--layer-3-width);
  height: var(--layer-3-height);
  background-color: var(--layer-3-background);
  border-radius: 61% 41% 45% 64% / 51% 68% 40% 54%;
  box-shadow: 1px 1px 13px 2px rgb(0 0 0 / 45%) inset;
  -webkit-box-shadow: 1px 1px 13px 2px rgb(0 0 0 / 45%) inset;
  -moz-box-shadow: 1px 1px 13px 2px rgb(0 0 0 / 45%) inset;
  overflow: hidden;
}

#layer-4 {
  background-color: var(--layer-4-background);
  width: var(--layer-4-width);
  height: var(--layer-4-height);
  box-shadow: 1px 1px 30px 7px rgb(0 0 0 / 42%) inset;
  -webkit-box-shadow: 1px 1px 30px 7px rgb(0 0 0 / 42%) inset;
  -moz-box-shadow: 1px 1px 30px 7px rgb(0 0 0 / 42%) inset;
}

svg {
  width: 270px;
  position: absolute;
  filter: drop-shadow(0px 3px 1px rgb(0 0 0 / 0.3));
  z-index: 2;
}

#front-tree-1 {
  width: 200px;
  bottom: 0px;
  right: 0;
  fill: var(--tree-5-fill);
  z-index: 4;
}

#front-tree-2 {
  width: 183px;
  bottom: 0;
  left: 16px;
  fill: var(--tree-3-fill);
  z-index: 4;
}

#tree-1 {
  fill: var(--tree-1-fill);
  top: 30px;
}

#tree-2 {
  fill: var(--tree-2-fill);
  right: 0px;
  top: 60px;
}

#stag {
  width: 200px;
  right: 150px;
  z-index: 4;
  bottom: -152px;
  fill: var(--stag-fill);
}

#moon {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--moon-fill);
  left: 87px;
  top: 49px;
}

/*  Particles JS */
#particles-js {
  height: 100%;
}