@keyframes shake {
  0% { transform: translatex(1px)  }
  10% { transform: translate(-1px) }
  20% { transform: translate(-2px) }
  30% { transform: translate(2px) }
  40% { transform: translate(1px) }
  50% { transform: translate(-1px) }
  60% { transform: translate(-2px) }
  70% { transform: translate(2px) }
  80% { transform: translate(-1px)  }
  90% { transform: translate(1px)  }
  100% { transform: translate(1px) }
}
*{
  box-sizing: border-box;
}
h1{ font-size: 4.5em;  text-shadow: -2px -1px 0 var(--dark), -2px 0px 0 var(--dark), -2px 1px 0 var(--dark), -1px -2px 0 var(--dark), -1px -1px 0 var(--dark), -1px 0px 0 var(--dark), -1px 1px 0 var(--dark), -1px 2px 0 var(--dark), 0px -2px 0 var(--dark), 0px -1px 0 var(--dark), 0px 0px 0 var(--dark), 0px 1px 0 var(--dark), 0px 2px 0 var(--dark), 1px -2px 0 var(--dark), 1px -1px 0 var(--dark), 1px 0px 0 var(--dark), 1px 1px 0 var(--dark), 1px 2px 0 var(--dark), 2px -1px 0 var(--dark), 2px 0px 0 var(--dark), 2px 1px 0 var(--dark), 1px 5px 3px #2b3d54;
  z-index: 1000; }
h2{ font-size: 2em; text-shadow: -2px -1px 0 var(--dark), -2px 0px 0 var(--dark), -2px 1px 0 var(--dark), -1px -2px 0 var(--dark), -1px -1px 0 var(--dark), -1px 0px 0 var(--dark), -1px 1px 0 var(--dark), -1px 2px 0 var(--dark), 0px -2px 0 var(--dark), 0px -1px 0 var(--dark), 0px 0px 0 var(--dark), 0px 1px 0 var(--dark), 0px 2px 0 var(--dark), 1px -2px 0 var(--dark), 1px -1px 0 var(--dark), 1px 0px 0 var(--dark), 1px 1px 0 var(--dark), 1px 2px 0 var(--dark), 2px -1px 0 var(--dark), 2px 0px 0 var(--dark), 2px 1px 0 #004739, 1px 5px 3px #2b3d54;}
h3{ font-size: 2em;   text-shadow: 1px 1px 3px var(--basic);  }
h4{ font-size: 1.5em;}
h5{ font-size: 1.3em;  text-shadow: 1px 1px 3px var(--basic);}

#container{
  max-width: 1600px;
}
.Biglist{
  font-size:1.5em;
}
.NaviButton{
    font-size: 30px;
}

.title-box{
  max-height: 60px;
  min-height: 30px;
}
/* =========header section */
.textbubble{
  padding:0.5em;
  text-align: center;
  background-color: var(--secondary);
  border-radius: 2em;
  max-width: 400px;
  margin: 0 auto;
}

#bubblewrap{
filter: drop-shadow(0px 5px 3px rgba(1, 3, 19, 0.4));
text-align: center;
}

#bichito:hover{
    /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
/*sections*/
#SideL{
flex: 1.5 ;
min-width: 250px;
text-align: center;
}
#SideR{
flex: 1 ;

min-width: 200px;
}
#center{
flex: 3;
}

.ytvid{
  max-width:600px;
  height: 350px;
  border-width:9px;
border-style: solid;
border-image: url(/assets/common/00.png) 10 fill round;
padding:5px;
}

#intropic{
 object-fit: contain; 
 
}
#intropic:hover{
    content: url(/assets/images/dansch.png);
}

/* =====middle section end */

 /* footer section */

  /*========LANGUAGE POPUP======*/
#languagepopup {
  position:fixed;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
  width: 500px;
  height:min-content;
  margin:auto;
  border:1px ;
    transition: opacity 200ms;
  opacity: 0;
}
#close-popup{
    background: none;
    color: var(--hyperpop);
    border: none;
    line-height: 1;
    font-size: 30px;
    transition:  background 0.3s;
}
#close-popup:hover {
  background: rgba(0, 71, 57, .3);
}

label{
    color: var(--basic);
}
#no-mostrar:hover{
  text-decoration: underline;
}
/* footer section end*/
/* responsive layout*/
@media (max-width: 900px){

#languagepopup {
    width: 80%;
}

}

/* status.cafe*/

#statuscafe-username {
background-color: var(--pop);
border-radius: 1.7em 1.7em 0 0;
font-weight: bold;
margin-bottom: 5px;
text-transform: uppercase;
}
#statuscafe-content {
    margin: 0 0.5em 0em 0.5em;
}