* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  :root {
    font-size: 2.8vmin;
    --color-top: #AA4019;
    --color-shadow: #7B2E12;
    --color-front: #D24F1F;
    --font-color-front: #F9D9C0;
    --font-color-shadow: #645f3200;
    --is-mobile:false;
  }
  body {
    background: rgb(111,62,7);
    background: linear-gradient(45deg, #7B2E12 0%, #AA4019 50%, #D24F1F 100%);
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
  }
  :focus {
      outline: none;
  }
/*
**************
* CUBE STUFF *
**************
*/
 .cube-face.front .title {
    font-size: 2rem;
    position: absolute;
    top: -2.2rem;
    color: var(--color-shadow);
    padding-bottom:2em;
    font-weight: 700;
    pointer-events: none;
    -ms-user-select: none; 
    user-select: none;
  }
         
     
  .perspective {
      float: left;
      border: none;
      perspective-origin: 50% 50%;
      perspective: none;
      width: max(35%, 32rem);
      height: 100%;
      overflow: hidden;
    }
    
    .cube .toc button {
        margin: 1rem;
    }
    .cube {
      --cube-negative-half-width: -10rem;
      --cube-half-width: 10rem;
      --cube-width: 20rem;
      width: 20rem;
      height: 20rem;
      position: relative;
      transform-style: preserve-3d;
      transform: translateZ(var(--cube-negative-half-width));
      transform: translateZ(var(--cube-negative-half-width)) rotateX(-35) rotateY(25) rotateZ(0);
      transition: transform 1s ease-out;
      left: 5rem;
      top: 7rem;
      
    }
    .cube-face {
      position: absolute;
      width: var(--cube-width);
      height: var(--cube-width);
      text-align: left;
      transition: background-color 1s ease-out;
      margin-top: 1em;
      margin-left: .5em;
      animation-fill-mode: forwards;
      animation-duration: 1s;
      animation-timing-function: ease-out;
      margin-top: 1em;
      margin-left: .5em;
      
    }
    .cube .toc{
        list-style:none;
        padding-top: 1rem;
          
    }

    .cube .years {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 60%;
        max-width: 100%;
        

    }

    .cube h2{
           font-size: 1.75rem;
          font-weight: 700;
          margin: 1rem;
    }
    .cube p{
            font-size: .85rem;
          font-weight: 400;
          margin: 1rem;
    }
    .cube .inactive {
        pointer-events: none;
        background-color: var(--color-shadow);
        color: var(--font-color-shadow);
       
    }
    .cube .active {
        background-color: var(--color-front);
        color: var(--font-color-front);
        
      	
    }
    .cube-face button{
      background-color: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.75rem;
      font-weight: 200;
      font-family: inherit;
      color: inherit;
      padding-left: 2rem;
      padding-top: 0.5rem;
      text-align: left;
       transition: transform 0.1s, text-shadow 0.3s;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
      
    }

    .cube-face button:hover{
     
     transform: perspective(50rem) translateZ(5rem);
     text-shadow: -0.6rem -0.6rem 1px var(--color-shadow);
    }
        
    .cube-face button:active {
        transform: perspective(50rem) translateZ(2rem);
        text-shadow: -0.2rem -0.2rem 0px var(--color-shadow);
    }
        
          @keyframes dark-dark-light {
              0% {
                  background-color: var(--color-shadow);
                  color: var(--font-color-shadow);
              }
              50% {
                background-color: var(--color-shadow);
                color: var(--font-color-shadow);
              }
            100% {
                  background-color: var(--color-front);
                  color: var(--font-color-front);
            }
          }
          @keyframes light-dark-dark {
            0% {
                background-color: var(--color-front);
                color: var(--font-color-front);
          }
            50% {
                background-color: var(--color-shadow);
                color: var(--font-color-shadow);
            }
            100% {
                background-color: var(--color-shadow);
                color: var(--font-color-shadow);
            }
        }
        @keyframes dark-light-dark {
            0% {
                background-color: var(--color-shadow);
                color: var(--font-color-shadow);
          }
          50% {
            background-color: var(--color-front);
            color: var(--font-color-front);
          }
            100% {
                background-color: var(--color-shadow);
                color: var(--font-color-shadow);
            }
        }
        @keyframes dark-light {
            0% {
                background-color: var(--color-shadow);
                color: var(--font-color-shadow);
            }
            100% {
                background-color: var(--color-front);
            color: var(--font-color-front);
            }
        }
        @keyframes light-dark {
            0% {
                background-color: var(--color-front);
            color: var(--font-color-front);
            }
            100% {
                background-color: var(--color-shadow);
                color: var(--font-color-shadow);
            }
        }

   .cube div.top    {
   	 background-color: var(--color-top);}
   .cube div.bottom { background-color: rgba(255, 255, 0, 1); }
    
   .cube div.front  { transform: rotateY(  0deg) translateZ(var(--cube-half-width)); }
   .cube div.right  { transform: rotateY( 90deg) translateZ(var(--cube-half-width)); }
   .cube div.back   { transform: rotateY(180deg) translateZ(var(--cube-half-width)); }
   .cube div.left   { transform: rotateY(-90deg) translateZ(var(--cube-half-width)); }
   .cube div.top    { transform: rotateX( 90deg) translateZ(var(--cube-half-width)); }
   .cube div.bottom { transform: rotateX(-90deg) translateZ(var(--cube-half-width)); }