:root{
  /* --box-width: 300px; */
  --hover-color: #f4793b;
  --floating-duration: 3s;
  --floating-delay: 0s;
  /* --image: url(https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80) */
}
html {
  /* height: 100%; */
}

body {
  /* height: 100%; */
  /* color: #FFF; */
  /* text-align: center; */
  /* font-family: Arial; */
  /* background: linear-gradient(to bottom, #FFF 50%, #BBB 100%); */
}


.table-of-content ul li{
  padding: 0 0 1rem 0;
  position: relative;
}
.table-of-content ul li:hover a{
  color: var(--hover-color);
}

.table-of-content ul li:hover::before{
  content: "";
  position: absolute;
  left: -2rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  background-image: url(./assets/images/hover-cube.svg);
  background-repeat: no-repeat;
}

.full-download{
  background-image: url(./assets/images/full-download.svg);
  background-repeat: no-repeat;
  background-position: 0 4px;
}

.full-download:hover{
  background-image: url(./assets/images/full-download-hover.svg);
}

.cube-container{

}
#cube{
  animation: fadeInDown 800ms 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
  opacity: 0;
}
@keyframes fadeInDown {
  0% {
    transform: translateY(-500%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.floating{
  animation: floating var(--floating-duration) var(--floating-delay) ease-in-out infinite;
}
@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
} 
#cube--shadow{
  animation: shadow 1s 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes shadow {
  0% {
    transform: scale(.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
#cube--face{
  
}
#cube--face image{
  opacity: 0;
}

.showFace{
  animation: showFace 1s ease-out;
  opacity: 1;
}
@keyframes showFace {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slowFlashing{
  animation: slowFlashing 5s ease-in-out infinite forwards;
  opacity: 1;
}
@keyframes slowFlashing {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#image{
  animation: fadeInImage 300ms 5s ease-in forwards;
  opacity: 0;
  transform-origin: 0 0;
}
@keyframes fadeInImage {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}


.cube-text-top{
  animation: fadeInTextLeft 1s 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeInTextLeft {
  0% {
    transform: translateX(-700px) translateY(-250px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.cube-text-left{
  animation: fadeInTextLeft 1s 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeInTextLeft {
  0% {
    transform: translateX(-700px) translateY(-250px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.cube-text-right{
  animation: fadeInTextRight 1s 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeInTextRight {
  0% {
    transform: translateX(400px) translateY(-350px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animated_flash_light{
  animation: flashLight 800ms 5.3s cubic-bezier(.43,1.98,.47,.62) forwards;

  opacity: 0;
}

@keyframes flashLight {
  0% {
    /* transform: scale(0); */
    opacity: 0;
  }
  100% {
    /* transform: scale(1); */
    opacity: 1;
  }
}



/* 3D Cube */
.space3D {
  perspective: 1000px;
  width: 600px;
  height: 600px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  display: inline-block;
}
.space3D .side {
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  z-index: 1;
  transform: rotate(45deg);
}
.space3D .side.top {
  top: -50%;
  top: -70.5%;
}
.space3D .side.bottom {
  bottom: -50%;
  bottom: -70.5%;
}
.space3D .side.left {
  left: -50%;
  left: -70.5%;
}
.space3D .side.right {
  right: -50%;
  left: auto;
  right: -70.5%;
}
.space3D .side.top:hover ~ .box {
  transform: rotateX(-90deg) rotateY(0);
}
.space3D .side.bottom:hover ~ .box {
  transform: rotateX(90deg) rotateY(0);
}
.space3D .side.left:hover ~ .box {
  transform: rotateX(0) rotateY(90deg);
}
.space3D .side.right:hover ~ .box {
  transform: rotateX(0) rotateY(-90deg) rotateZ(10deg);
}
.space3D .side:hover {
  z-index: 100;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transform: none;
}
.space3D #easter:checked ~ .box {
  transform: rotateX(0) rotateY(180deg);
}

.box {
  pointer-events: none;
  display: inline-block;
  transition: 0.85s cubic-bezier(0.17, 0.8, 0.3, 1.2);
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: var(--box-width);
  height: var(--box-width);
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(45deg);
}
.box .face {
  overflow: hidden;
  position: absolute;
  width: var(--box-width);
  height: var(--box-width);
  border-radius: 5px;
  outline: 1px solid transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #FFF;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-size: 0;
  background: #111;
}
.box .face div {
  width: 33.333%;
  height: 33.333%;
  box-shadow: 0 0 1px 2px #000 inset, 3px 3px 0px 1px inset;
  display: inline-block;
  border-radius: 5px;
}
.box .face.front {
  transform: translate3d(0, 0, calc( var(--box-width) / 2 ));
}
.box .face.front div {
  background: #CE263F;
}
.box .face.top {
  transform: rotateX(90deg) translate3d(0, 0, calc( var(--box-width) / 2 ));
}
.box .face.top div {
  background: #2671CC;
}
.box .face.bottom {
  transform: rotateX(-90deg) translate3d(0, 0, calc( var(--box-width) / 2 ));
}
.box .face.bottom div {
  background: #FFF;
}
.box .face.left {
  transform: rotateY(-90deg) translate3d(0, 0, calc( var(--box-width) / 2 ));
}
.box .face.left div {
  background: #F7E94C;
}
.box .face.right {
  transform: rotateY(90deg) translate3d(0, 0, calc( var(--box-width) / 2 ));
}
.box .face.right div {
  background: #6D8C44;
}
.box .face.back {
  background: #222;
  color: #FFF;
  font-size: 2em;
  transform: rotateY(180deg) translate3d(0, 0, calc( var(--box-width) / 2 ));
}
.box .face.back:before {
  content: "Made by";
  display: block;
  margin: 90px 0 0;
  font-size: 0.5em;
  opacity: 0.2;
}