.cube-container {
margin: 5px;
width: 150px;
perspective: 150px !important;
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 14px;
cursor: pointer
}

.studentname{
padding-top: 30px;
padding-bottom: 30px;
text-align: center;  
font-family: 'Inter', sans-serif;
line-height: 14px;
}

.name{
padding-left: 8px;
padding-right:8px;
}

.studentname-highlight{
  line-height: 14px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;  
  font-family: 'Inter', sans-serif;
  display: none;
  }

a{
text-decoration:none !important
}

.material-symbols-outlined {
  height: 0px !important;;
  width: 0px !important;;
  line-height: 0px !important;
  font-size: 18px !important;;
  color: #7655D4;
  font-variation-settings:
  'FILL' 0,
  'wght' 600,
  'GRAD' 0,
  'opsz' 48
}

.cubes{
width: 150px;
height: 150px;
transform-style: preserve-3d;
transform: translateZ( -100px )rotateY( 0deg );
transition: transform 2s;
}


.cubes figure {
margin: 0;
width: 150px;
height: 150px;
display: flex;
font-family: 'Inter', sans-serif;
font-size: 14px;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
}

.will-remember  {
text-align: center;
transform: rotateY(45deg)translateZ(75px); 
background-color: #EC90AF;
color: white;
z-index: 0;
border-radius: 500px;
padding-left: 8px;
padding-right:8px;
}

.inner-will-remember{
    color: black;
}

/* .cubes .will-remember:hover  {
text-align: center;
background-color: white;
color: #303236;
z-index: 0;
border-radius: 500px;
} */


.cubes .will-remember:hover  {
z-index: 1000000;
}
.cubes .thinking  { 
text-align: center;
transform: rotateY(  -45deg ) translateZ( 75px ); 
line-height: 120%;
z-index: 0;

}


.cubes .practicing  { 
transform: rotateY( 225deg ) rotateX( -90deg )translateZ( 75px ); 
background-color: transparent;
z-index: 0;
text-align:center;
}

.cubes .listening-to { 
transform: rotateY( 45deg ) rotateX( +90deg )translateZ( 75px ); 
color: white;
background-color: #127F48;
z-index: 0;
text-align: center;
border-radius: 500px;
padding-left: 8px;
padding-right:8px;

}


.cubes .thinking:hover  { 
z-index: 1000000;
}
.cubes .reading  { 
transform: rotateY(  135deg ) translateZ( 75px ); 
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #37B4D5;
text-align: center;

}

.tags{
text-align: center;

}

.tag{
background-color: #E05B63;
color: white;
display: inline-block;
padding: 5px;
margin-bottom: 5px;
line-height: 100%;
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
}

.cubes .reading:hover  { 
z-index: 1000000;
}

.cubes .working-with{ 
transform: rotateY(  -135deg ) translateZ( 75px ); 
z-index: 0;
display: flex;
justify-content: center;
align-items: center;

}



.tools{
text-align: center;
line-height: 120%;
}

.tool{
background-color: rgb(255, 255, 255);
display: inline-block;
padding: 5px;
margin-bottom: 5px;
cursor: pointer;
margin-right: 5px;
}

.toolhighlight{
background-color: black;
color: white;
display: inline-block;
padding: 5px;
margin-bottom: 5px;
cursor: pointer;
margin-right: 5px;
}

.tool:hover{
display: inline-block;
padding: 5px;
margin-bottom: 5px;
}

.tag:hover{

display: inline-block;
padding: 5px;
margin-bottom: 5px;
cursor: pointer;
}

.taghighlight{
background-color: black;
color: rgb(191, 0, 255);
display: inline-block;
padding: 5px;
margin-bottom: 5px;
line-height: 100%;
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
cursor: pointer;
}


.cubes .working-with:hover  { 
z-index: 1000000;

}


.cubes.show-reading  { 
transform: translateZ( -75px ) rotateY(   -135deg );
z-index: 100000;
}

.cubes.show-will-remember  { 
transform: translateZ( -75px ) rotateY(  -45deg );
z-index: 100000;
}

.cubes.show-thinking   { 
transform: translateZ( -75px ) rotateY(   45deg );
z-index: 100000;
}

.cubes.show-working-with    {
transform: translateZ( -75px ) rotateY(  -225deg );
z-index: 100000;
}

.cubes.show-listening-to    {
transform: translateZ( -75px ) rotateY(0deg) rotateZ(45deg) rotateX( -90deg );
z-index: 100000;
}

.cubes.show-practicing  {
transform: translateZ( -75px ) rotateY(180deg) rotateZ(45deg) rotateX( -90deg );
z-index: 100000;
}

.department{
    line-height: 120%;
    background-color: #4953AF;
    height: fit-content;
    width: fit-content;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 500px;
    cursor: pointer;
    color:  white;;
   
  }

  .department:hover{

  }

  .song{
    line-height: 120%;
  }

  /* Dimming styles */



  .cubes.show-working-with > .reading{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-working-with > .thinking{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-working-with > .will-remember{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-working-with > .will-remember> .inner-will-remember{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-practicing> .will-remember> .inner-will-remember{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-practicing> .thinking > .tags> .tag{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-thinking> .will-remember> .inner-will-remember{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-thinking> .reading{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-thinking> .practicing > .department{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-working-with > .listening-to{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-working-with > .practicing{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-working-with > .thinking > .tags> .tag{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-working-with > .practicing > .department{
    color: rgb(12, 0, 79, 0);
  }

  .cubes.show-working-with > .practicing > .ceramics{
    color: rgb(12, 0, 79, 0);
  }

  .cubes.show-working-with > .practicing > .graphicdesign{
    color: rgb(238, 18, 209, 0)
  }

  .cubes.show-working-with > .practicing > .industrialdesign{
    color: rgba(255, 255, 255, 0);
  }


  .cubes.show-working-with > .practicing > .printmaking{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-working-with > .practicing > .furniture{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-working-with > .practicing > .digitalmedia{
    color: rgb(0, 0, 0, 0);
  }

  .cubes.show-working-with > .practicing > .architecture{
    color: rgb(255, 255, 255, 0);
  }

  .cubes.show-working-with > .practicing > .landscapearchitecture{
    color: rgb(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .thinking{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .working-with{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .listening-to{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .practicing{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .will-remember{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .practicing > .ceramics{
    color: rgb(12, 0, 79, 0);
  }

  .cubes.show-will-remember > .practicing > .graphicdesign{
    color: rgb(238, 18, 209, 0)
  }

  .cubes.show-will-remember > .practicing > .industrialdesign{
    color: rgba(255, 255, 255, 0);
  }


  .cubes.show-will-remember > .practicing > .printmaking{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .practicing > .furniture{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .practicing > .digitalmedia{
    color: rgb(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .practicing > .architecture{
    color: rgb(255, 255, 255, 0);
  }

  

  .cubes.show-practicing > .thinking{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-practicing > .working-with{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-practicing > .listening-to{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-practicing > .reading{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-practicing > .will-remember{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-practicing > .reading > .tags > .tag{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-working-with > .reading > .tags > .tag{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .thinking{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .working-with{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .listening-to{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .practicing{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .will-remember{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .practicing > .ceramics{
    color: rgb(12, 0, 79, 0);
  }

  .cubes.show-will-remember > .practicing > .graphicdesign{
    color: rgb(238, 18, 209, 0)
  }

  .cubes.show-will-remember > .practicing > .industrialdesign{
    color: rgba(255, 255, 255, 0);
  }


  .cubes.show-will-remember > .practicing > .printmaking{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .practicing > .furniture{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .practicing > .digitalmedia{
    color: rgb(0, 0, 0, 0);
  }

  .cubes.show-will-remember > .practicing > .architecture{
    color: rgb(255, 255, 255, 0);
  }

  .cubes.show-will-remember > .practicing > .landscapearchitecture{
    color: rgb(255, 255, 255, 0);
  }

  .cubes.show-thinking > .thinking{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-thinking> .working-with{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-thinking > .listening-to{
    color: rgba(0, 0, 0, 0);
  }

  .cubes.show-thinking > .practicing{
    color: rgba(0, 0, 0, 0);
  }


  .cubes.show-thinking > .practicing > .ceramics{
    color: rgb(12, 0, 79, 0);
  }

  .cubes.show-thinking > .practicing > .graphicdesign{
    color: rgb(238, 18, 209, 0)
  }

  .cubes.show-thinking > .practicing > .industrialdesign{
    color: rgba(255, 255, 255, 0);
  }


  .cubes.show-thinking > .practicing > .printmaking{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-thinking > .practicing > .furniture{
    color: rgba(255, 255, 255, 0);
  }

  .cubes.show-thinking > .practicing > .digitalmedia{
    color: rgb(0, 0, 0, 0);
  }

  .cubes.show-thinking > .practicing > .architecture{
    color: rgb(255, 255, 255, 0);
  }

  .cubes.show-thinking > .practicing > .landscapearchitecture{
    color: rgb(255, 255, 255, 0);
  }

  .cubes.show-thinking > .reading > .tags > .tag{
    color: rgba(255, 255, 255, 0);
  }