html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.app {
  overflow: hidden;
  position: relative;

  width: 100%;
  height: 100%;

  /* Changed in each scene. */
  --color-moon: #ffffff;
  --color-moon-crater: #ffffff;

  /*
   * We use box-shadow to draw the clouds and reflected lights.
   * box-shadow can't draw anything inside the element, so it causes a 'hole' at the center.
   * So we use a trick: Draw the element far away from box-shadow.
   */
  --size-cloud-offset: 200px;
  --size-sea-reflect-offset: 100px;
}

.controls {
  position: absolute;
  display: flex;
  flex-direction: row;

  top: 4px;
  left: 4px;
}

.control {
  cursor: pointer;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: 44px;
  height: 44px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 44px;
  color: #aaaaff;
  background-color: #dddddd22;
  box-shadow: 0px 0px 10px #dddddd22;

  transition: background-color 0.5s, box-shadow 0.5s;

  -webkit-tap-highlight-color: transparent;
}

.scene-night .control-night,
.scene-strawberry .control-strawberry,
.scene-evening .control-evening {
  background-color: #ffffff88;
  box-shadow: 0px 0px 10px #ffffff88;
}

.sky {
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: #0d0f1a;
}

.sky-background {
  position: absolute;

  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  opacity: 0;

  transition: opacity 3s;
}

.star {
  position: absolute;

  border-radius: 50%;
  background-color: #c0cbe6;
  box-shadow: 0px 0px 4px #c0cbe6;

  transition: opacity 3s;
}

.moon {
  cursor: pointer;
  position: absolute;

  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--color-moon);
  box-shadow: 0px 0px 20px var(--color-moon);

  transition: background-color 3s, box-shadow 3s;

  -webkit-tap-highlight-color: transparent;
}

.moon-crater {
  position: absolute;

  border-radius: 50%;
  background-color: var(--color-moon-crater);

  transition: background-color 3s;
}

.moon-crater-1 {
  bottom: 10%;
  right: 35%;

  width: 23%;
  height: 23%;
}

.moon-crater-2 {
  bottom: 25%;
  right: 10%;

  width: 23%;
  height: 23%;
}

.moon-crater-3 {
  bottom: 40%;
  right: 35%;

  width: 15%;
  height: 15%;
}

.moon-crater-4 {
  top: 10%;
  right: 25%;

  width: 10%;
  height: 10%;
}

.sea {
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 30%;
  background-color: #161a2c;

  perspective: 100px;
}

.sea-background {
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;

  transition: opacity 3s;
}

.sea-reflect {
  position: absolute;

  top: 0%;
  left: calc(50% - var(--size-sea-reflect-offset));
  transform-origin: top;
  transform: translate3d(-50%, 9px, 10px) rotateX(15deg);
  width: 1px;
  height: 100%;
  opacity: 0;
  border-radius: 4px;

  transition: opacity 3s;
}

.sea-wave {
  position: absolute;

  height: 3px;
  border-radius: 2px;
  background-color: #b2c2de;
  box-shadow: 0 0 5px #b2c2de;
  transform: translateX(-50%);
  opacity: 0;

  transition: opacity 3s;
}

.cloud {
  position: absolute;

  opacity: 0;

  transition: opacity 2s, transform 2.5s;
}

.cloud .cloud-front,
.cloud .cloud-mid,
.cloud .cloud-back {
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}

.cloud1 {
  top: calc(35% - var(--size-cloud-offset));
  left: 50%;
  width: 120px;
  height: 1px;

  /*
   * Safari sometimes can't handle SVG-based filter correctly.
   * We can solve that problem by putting the element at the separate layer by setting z to any value.
   *
   * https://stackoverflow.com/a/58289524
   */
  transform: translate3d(-290px, 60px, 0);
}

.cloud1 .cloud-back {
  filter: url(#cloud1-filter-back);
  box-shadow: 0 var(--size-cloud-offset) 40px 80px #f5e2f8;
}

.cloud1 .cloud-mid {
  filter: url(#cloud1-filter-mid);
  box-shadow: 0 var(--size-cloud-offset) 60px 70px #ecc4e8;
}

.cloud1 .cloud-front {
  filter: url(#cloud1-filter-front);
  box-shadow: 0 var(--size-cloud-offset) 70px 45px #bd60a2;
}

.cloud2 {
  top: calc(35% - var(--size-cloud-offset));
  left: 50%;

  width: 100px;
  height: 1px;

  /* See cloud1... */
  transform: translate3d(190px, -20px, 0);
}

.cloud2 .cloud-back {
  filter: url(#cloud2-filter-back);
  box-shadow: 0 var(--size-cloud-offset) 40px 60px #f5e2f8;
}

.cloud2 .cloud-mid {
  filter: url(#cloud2-filter-mid);
  box-shadow: 0 var(--size-cloud-offset) 60px 55px #ecc4e8;
}

.cloud2 .cloud-front {
  filter: url(#cloud2-filter-front);
  box-shadow: 0 var(--size-cloud-offset) 70px 50px #bd60a2;
}