/* custom css for home page */

/* home settings */
#home {
  /*background-image: linear-gradient(180deg, var(--light90) 0%, transparent 200px, transparent 100%), var(--bg-img-dark);*/
  background-image: var(--bg-img-dark);
  background-repeat: no-repeat;
  background-size: cover;
}

#home .content {
  background-color: transparent;
  color: var(--light);
  border-radius: 4px;
  box-shadow: none;
  text-align: center;
  margin-top: 0;
}

#home .article-title {
  color: var(--light);
}

#home h2 {
  color: var(--light);
  font-weight: normal;
  font-size: 2em;
}

#home .article-content a {
  text-decoration: underline var(--cont);
  transition: color 150ms ease;
  color: inherit;
  border-bottom: none;
  box-shadow: none;
}

#home .article-content a:hover, .article-content a:focus {
  color: var(--cont);
  background: transparent;
}



/* Cube */
.img-cube {
  width: var(--cube-width);
  height: calc(var(--cube-width) * 0.5625);
  perspective: calc(var(--cube-width) * 3 / 2);
  margin: 4em auto 4em auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: all 1.0s ease-in-out;
  /*animation: rotate 20s ease-in-out infinite; */
}

.face {
  position: absolute;
  width: var(--cube-width);
  height: calc(var(--cube-width) * 0.5625);
  border-radius: 4px;
  border: 2px solid var(--light);
  line-height: calc(var(--cube-width) * 0.5625);
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  opacity: var(--cube-opacity);
}

.front  { 
  background-image: var(--cube-img1);  
  background-size: contain; 
}
.right  { 
  background-image: var(--cube-img2);  
  background-size: contain; 
}
.back   { 
  background-image: var(--cube-img3);  
  background-size: contain; 
}
.left   {
  background-image: var(--cube-img4);  
  background-size: contain; 
}

.front  { transform: rotateY(  0deg) translateZ(calc(var(--cube-width) / 2)); }
.right  { transform: rotateY( 90deg) translateZ(calc(var(--cube-width) / 2)); }
.back   { transform: rotateY(180deg) translateZ(calc(var(--cube-width) / 2)); }
.left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-width) / 2)); }


/* Set a max size for cube if screen gets big */
@media (min-width: 1000px) {
  .img-cube {
    width: var(--cube-width-alt);
    height: calc(var(--cube-width-alt) * 0.5625);
    perspective: calc(var(--cube-width-alt) * 3 / 2);
    margin: 4em auto 4em auto;
  }

  .face {
    position: absolute;
    width: var(--cube-width-alt);
    height: calc(var(--cube-width-alt) * 0.5625);
    border-radius: 4px;
    border: 2px solid var(--light);
    line-height: calc(var(--cube-width-alt) * 0.5625);
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-align: center;
    opacity: var(--cube-opacity);
  }

.front  { transform: rotateY(  0deg) translateZ(calc(var(--cube-width-alt) / 2)); }
.right  { transform: rotateY( 90deg) translateZ(calc(var(--cube-width-alt) / 2)); }
.back   { transform: rotateY(180deg) translateZ(calc(var(--cube-width-alt) / 2)); }
.left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-width-alt) / 2)); }

}