/* v 21	© Rainer-Maria Hankel 12.2023 */
/*  https://desandro.mit-license.org/
opacity: 0;  /* Set initial opacity to 0  
   2s ease-in-out
     transition-delay: 3s;
   transition: opacity 2s; 
    */

* { box-sizing: border-box; }

body { 
font-family: sans-serif;
text-align: center; 
font-size: 14px;
}

.sceneCube {
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  /*border: 1px solid #CCC;*/
  perspective: 400px;
}

.cube {
  margin-top:30px;
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-right  { transform: translateZ(-100px) rotateY( -89.999deg); }
.cube.show-back   { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left   { transform: translateZ(-100px) rotateY(  89.999deg); }
.cube.show-top    { transform: translateZ(-100px) rotateX( -89.999deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX(  89.999deg); }

.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube__face--front  { background: hsla(  0, 100%, 50%, 0.7); }
.cube__face--right  { background: hsla( 60, 100%, 40%, 0.7); }
.cube__face--back   { background: hsla(120, 100%, 50%, 0.7); }
.cube__face--left   { background: hsla(180, 100%, 50%, 0.7); }
.cube__face--top    { background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.cube__face--front  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  { transform: rotateY( 89.999deg) translateZ(100px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left   { transform: rotateY(-89.999deg) translateZ(100px); }
.cube__face--top    { transform: rotateX( 89.999deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-89.999deg) translateZ(100px); }

label { margin-right: 10px; }

.sceneCarousel {
  position: relative;
  width: 210px;
  height: 140px;
  margin: 80px auto;
  perspective: 1000px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 2s;
}

.carousel__cell {
  position: absolute;
  width: 189px;
  height: 120px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 35px;
  font-weight: bold;
  color: white;
  text-align: center;
  transition: transform 1s, opacity 1s;
}

.carousel__cell:nth-child(9n+1) { background: hsla(  0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+5) { background: hsla(160, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+6) { background: hsla(200, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+7) { background: hsla(240, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+8) { background: hsla(280, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+0) { background: hsla(320, 100%, 50%, 0.8); }

.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(288px); }
.carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); }
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(288px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(288px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(288px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(288px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(288px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }

.carousel-options {
  text-align: center;
  position: relative;
  z-index: 2;
  background: hsla(0, 0%, 100%, 0.8);
}

/******************************************************************************/

html {
  scroll-behavior: smooth;
}

.fade-in {
    opacity: .6 !important; /* Use !important to ensure override */
        }
	
#languageChoice{ 
	float: left;
  }
  
.button 	{ 
  	margin: 10px;
    background: #0084ff;
  	border: none;
  	border-radius: 5px;
  	padding: 7px 10px;
  	margin-bottom:2px;
  	color: #fff;
  	text-decoration: none;
  	outline: none;
  	cursor:pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }

.button a 	{ 
  	color: #fff;
  }
  
div.button:hover {
    background: #0021ff94	;
    box-shadow: 0 3px 16px 0 rgba(0,0,0,0.20), 0 6px 20px 0 rgba(0,0,0,0.5);        }
        
div.button.selected
{
    background: #0021ff;
        }
  
#clickMe {
  	font-size: 20px;
  	    margin: 20px;
  	    letter-spacing: 3px;	
  }
  
#inputButton {
    font-size: 16px;
    letter-spacing: 5px;
  }
  
#clickMe:hover,
#inputButton:hover {
    box-shadow: 0 3px 16px 0 rgba(0,0,0,0.20), 0 6px 20px 0 rgba(0,0,0,0.5);      
  }

#result {
   opacity: 0;  
   transition: opacity; 
    margin-left:10px;
   	font-size:30px;
  }
  
#pronoun {
   opacity: 0;  /* Set initial opacity to 0  
   2s ease-in-out
     transition-delay: 3s;
    */
   transition: opacity; 
   font-size:20px;

        }
.conjugated
{
	color: red; 
	display:inline;

        }

#notiz{ 
  	color: #bbb;
  } 

 #orientation,
 .previous-button,
 .next-button {
	display:none;
 }
 
 /********************** table  */
#table
{ 
    width: 50%;
    margin: auto;
	opacity: 0;  /* Set initial opacity to 0  */
    transition: opacity 1s; 
 }

     
.tr {    
    display: table-row;
    border: 1px solid;
     font-size: 14px;
     
    
    }
    
   
.tr :nth-child(1) {
	 cursor: copy;
      color:black;
      transition:
    	color 1s;
    	
      }
      

  
    
.tr:hover
           {background-color: #faff004d;}

.aux:hover
           {background-color: #33ff004d;}
.m:hover
           {background-color: #000fff33;}
.u:hover
           {background-color: #FFEEEE;}

     
     
    .td {
      display: table-cell;
      padding: 8px;
      border: 1px solid;
    border-color: #dddddd;
    color: gray;

      }
     

/* Not necessary for table styling */
.div-table, .table-tag {
  margin: auto;
  width: 57%;
  }
  
  .title {
    text-align:center;
    padding-bottom:.5em;
  }

.hide
{
  color:#dddddd;
  transition-property: color;
  transition-duration: 1s;
}

.myVerb:hover + .hide {
  color: red;
  
}
    
#inputDiv	{
    position: sticky;
    float: left;
    margin: 20px;
    
    }




/******************* table    */

 
 
@media (min-width: 375px) and (orientation: portrait){
body {
    font-size: 16px; /* Adjust font size for better mobile readability */
  }

#table {
	float: left;

}

.sceneCarousel {
  margin: 80px auto 10px;
  margin-bottom: 0px;
	}

}

@media (min-width: 375px) and (orientation: landscape){

body {
    font-size: 16px; /* Adjust font size for better mobile readability */
  }

#button {
  	font-size: 20px;
    position: relative;
    top: -50px;
  }  

#conjugatedVerb {
	position: relative;
    top: -350px;
    right: -415px;
    width:200px;
        } 
        
#input {
    float:left;
    
 } 

.sceneCarousel {
  margin: 80px auto 10px;
  margin-bottom: 0px;
	}
	
#options	{
  margin-top: -30px;
	}

}

@media (min-width: 930px) and (orientation: landscape){

body {
    font-size: 16px; /* Adjust font size for better mobile readability */
  }
 
.sceneCarousel {
  margin: 80px auto 10px;
	}
	
 #result {
	position: initial;
    width:initial;
        } 

#button {
  	font-size: 20px;
  	float: none;
    position: initial;
  }  

#conjugatedVerb {
	position: initial;
	margin: 10px auto;
    
        } 
#options	{
  margin-top: initial;
	}



 }