:root {
        --degrees: calc(360deg / 5);
        --skyboxSize: 10000px;
        --spin: 0;
        --fov: 100cm;
}

.bloom::before{
  --blurAmount: 2px;
  filter: blur(var(--blurAmount));
  background-color: inherit;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  display: block;
  position:absolute;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1000;
  overflow: visible;
}

.dMenu{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  width: 100px;
  height: 100px;
  transform-origin: 50% 50% -400px;
  transform-style: preserve-3d;
  transition: transform 1s;
  transform: perspective(var(--fov)) rotateY(calc(var(--degrees) * var(--spin))); 

  #inner{
    transition: transform 1s;
    width: 0px;
    height: 0px;
    transform-origin: 50% 50% -400px;
    position: absolute;
  }
}

body{
  background-color: lightblue;
  background-image: url("../assets/images/sky.jpg");
  overflow:hidden;
}

.dMenu > #inner > label > div{
  transform-origin: 50% 50% -400px;
  background-color: white;
  transform-style: preserve-3d;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
}
.dMenu > #inner > label div:nth-child(1){
  z-index: 100;
}
.dMenu > #inner > label div:nth-child(2){
  opacity: 0.5;
  filter: blur(10px);
}

.dMenu div{
  position: absolute;
  transform-style: preserve-3d;
}

.dMenu > #inner > label{
  position: absolute;
  opacity: 0.5;
  top: 100px;
  left: 0px;
  width: 100px;
  height: 100px;
  transform-origin: 50% 50% -400px;
  background-color: red;
  transform-style: preserve-3d;
}

.gramCont{
  transform: rotateY(calc(var(--degrees) * -1));
  transform-origin: 50% 50% -400px;
  transform-style: preserve-3d;
  display:block;
}

.compTainer{
  transform: rotateY(calc(var(--degrees) * -2));
  transform-origin: 50% 50% -400px;
  transform-style: preserve-3d;
  width: 100px;
  height: 100px;
  position: absolute;

  label.bloom{
    width: 200px;
    height: 500px;
    display: none;
    position: absolute;
    background-color: white;
    opacity: 0.5;
    transform: scale(10%);
    top: -200px;


    p{
      text-align: center;
      transform:perspective(var(--fov)) scale(1);
      font-size: 200px;
      backface-visibility:hidden;
    }
  }

  .left{
    left: -150px;

  }

  .right{
    right: -150px;
  }

  .left::before, .right::before{
    --blurAmount: 20px;
  }

}

.dMenu > #inner > label:hover{
  opacity: 1;
  cursor:pointer;
}

.dMenu input:checked + iframe{
  display:inline;
}

.dMenu > #inner > label:nth-child(1){
  transform: rotateY(calc(var(--degrees) * 2));
}
.dMenu > #inner > label:nth-child(2){
  transform: rotateY(calc(var(--degrees)));
}
.dMenu > #inner > label:nth-child(3){
  transform: rotateY(0deg);
}
.dMenu > #inner > label:nth-child(4){
  transform: rotateY(calc(var(--degrees) * -1));
}

.dMenu > #inner > label:nth-child(5){
  transform: rotateY(calc(var(--degrees) * -2));
}

input{
  z-index: 100;
}


input:checked#menu1 ~ div{
  --spin: -2;
  #inner{
    transform: rotateY(0deg);
  }
}
input:checked#menu2 ~ div{
  --spin: -1;
  #inner{
    transform: scaleX(1);
  }
}
input:checked#menu3 ~ div{
  --spin: 0;
  #inner{
    transform: scaleX(1);
  }
}
input:checked#menu4 ~ div{
  --spin: 1;
  #inner{
    transform: scaleX(1);
  }
}
input:checked#menu5 ~ div{
  --spin: 2;
  #inner{
    transform: rotateY(-360deg);
  }
}
input:checked#menu6 ~ div{
  --spin: 2;
  #inner{
    transform: rotateY(-360deg);
  }
}
input:checked#menu5 ~ div .right{
  display: block;
}
input:checked#menu5 ~ div .left{
  display: block;
}
input:checked#menu5 ~ .dMenu .menu5{
  pointer-events: none;
}
input:checked#menu5 ~ .dMenu .menu5 .menu6{
  width:100px;
  height:100px;
  display:block;
  pointer-events: auto;
}
input:checked#menu6 ~ .dMenu{
  transform: perspective(var(--fov)) translateZ(2600px) rotateY(calc(var(--degrees)*2)) translateY(25px);
}
.menu6{
  display: none;
}

div.ground{
  position:absolute;
  top:-100%;
  left:50%;
  width: 1000px;
  height: 1000px;
  transform-origin: 50% 50% 400px;
  transform: translate(-50%, -50%) translateZ(-800px) rotateX(90deg);
  background-image: url("../assets/images/record.png");
  background-size: 100%;
}

img.future{
  position: absolute;
  transform: translateY(-140px);
  left: 0px;
  transform-style: preserve-3d;
  animation-name: float;
  animation-duration: 2s;
	animation-iteration-count: infinite;
}

.floater{
  position: absolute;
  left: 0px;
  top: 0px;
  animation-name: float2;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

@keyframes float2{
  0% {transform: translateY(-0px);}
  50% {transform: translateY(-20px);}
  100% {transform: translateY(-0px);}
}

@keyframes float{
  0% {transform: translateY(-140px);}
  50% {transform: translateY(-160px);}
  100% {transform: translateY(-140px);}
}


.sky{
        --dayOp: calc(1 - (abs(calc(mod(var(--times) + var(--time), 1) - 1/2) * 2)));
        background-image: linear-gradient(black, indigo, darkviolet, orange, lightgreen, lightblue, lightgreen, orange, darkviolet, indigo, black);
        background-size: 1500% 1500%;
        background-position: calc(var(--spin) * 400%) 0%;
        width: 101%;
        height: 101%;
        position: absolute;
        left: 0px;
        top: 0px;
        transition: background-position;
        transition-duration: 1s;
        background-position: calc(var(--spin) * 400%) calc(100% * mod((var(--times) + var(--time)), 1));
        /*DAY NIGHT ANIMATION (:*/
        animation-name: day-cycle2;
        animation-duration: 86400s; 
        animation-timing-function: linear;
	animation-iteration-count: infinite;

  div{
          background-position: calc(var(--spin) * 800%) 0%;
          width: 101%;
          height: 101%;
          position: absolute;
          left: 0px;
          top: 0px;
          transition: background-position;
          transition-duration: 1s;
          background-size: 80%;
  }
  div.clouds{
          background-size: 80% 100vh;
          background-image: url("../assets/images/sky.jpg");
          opacity: calc(0.5 * var(--dayOp));
  }

  div.bigstars{
          background-image: url("../assets/images/sky/bigstars.png");
          opacity: calc(0.5 * (1 - var(--dayOp)));
  }
  div.smallstars{
          background-image: url("../assets/images/sky/smallstars.png");
          opacity: calc(0.5 * (1 - var(--dayOp)));
  }
  div.blinkstars1{
          background-image: url("../assets/images/sky/blinkstars1.png");
          opacity: calc(0.5 * (1 - var(--dayOp)) * var(--blinking1));
          animation: blink1 1s infinite;
  }
  div.blinkstars2{
          background-image: url("../assets/images/sky/blinkstars2.png");
          opacity: calc(0.5 * (1 - var(--dayOp)) * var(--blinking2));
          animation: blink2 0.55s infinite;
  }
  div.blinkstars3{
          background-image: url("../assets/images/sky/blinkstars3.png");
          opacity: calc(0.5 * (1 - var(--dayOp)) * var(--blinking3));
          animation: blink3 2.1s infinite;
  }
}


.article{
  transform: rotateY(calc(var(--degrees) * 1)) translateZ(20px);
  transform-origin: 50% 50% -400px;
  transform-style: preserve-3d;
  display:block;
  position: absolute;
  width: 0px;
  height: 0px;
  left: 50%;
  top: 50%;

  img{
    width: 80px;
  }

  div{
    transform-style: preserve-3d;
    background-color: white;
    transform: translateY(-10px) rotateX(5deg);
    font-size:2px;
    width: 80px;
  }

  div p{
    margin: 2px;
  }

  .articlePage{
    width: 1000px;
    height: 1200px;
    transform: translateY(20px) translate(-50%, -50%) scale(0.08);
    position: absolute;
  }
}





@keyframes day-cycle{
        0%   {background-position: calc(var(--spin) * 400%) calc(0% +   (4.166% * var(--timeset)));}
        100% {background-position: calc(var(--spin) * 400%) calc(101% + (4.166% * var(--timeset)));}
}

@property --time{
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
}

@property --times{
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
}
@property --blinking1{
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
}
@property --blinking2{
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
}
@property --blinking3{
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
}
@keyframes blink1{
  0%    {--blinking1: 0.2};
  50%    {--blinking1: 1};
  100%  {--blinking1: 0.2};
}
@keyframes blink2{
  0%    {--blinking2: 0.2};
  50%    {--blinking2: 1};
  100%  {--blinking2: 0.2};
}
@keyframes blink3{
  0%    {--blinking3: 0.2};
  50%    {--blinking3: 1};
  100%  {--blinking3: 0.2};
}
@keyframes day-cycle2{
        0%      {--time: 0};
        100%    {--time: 1};
}