@font-face {
  font-family: headFont;
  src: url("style/ARCADE.TTF");
  font-weight: bold;
}

@font-face{
  font-family: pixel;
  src: url("style/FOT-DOTGOTHIC12STD-M.ttf");
  font-weight: bold;
}

 body {
  --animate-delay: 0.3s;
  --animate-duration: 5s;
  background-color: #0c1461;
}

details[open]>summary{
transform: scale(1.3); 
}

details[open]{
  /* margin:20px;
  padding:5px;
  background-color: #52525234; */
}

details>summary {
  transform-origin: top left;
  list-style-type: none;
}

details>summary::-webkit-details-marker {
  display: none;
}


#video{
    margin: 35px;
}

#box{
  
}

.grow {
  transition: transform .5s;
}

.grow:hover {
  transform: scale(1.2);
  --animate-duration: 1s;
  --animate_animation: jello;
}

.growSmall {
  transition: transform .2s;
}

.growSmall:hover {
  transform: scale(1.001);
}

#menuGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 170px);
    margin: auto;
    max-width: 900px;
  }

#menuItemNull{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hand{
  position:fixed;
    right:10px;
    bottom: 10px; 
}
  #mainContainer {
    display: block;
    justify-items: center;   
}

  #mainContent {
    width: 800px;
    min-height: 200px;
    margin: 30px 20px;
    background-color: rgb(163, 163, 163);
    box-shadow: 5px 5px rgb(0, 0, 0);
    border-width:1px;
    border-color:#FFFFFF #525252 #525252 #FFFFFF;
    border-style:solid;
    padding:1px;
}

#headerTitle {
    width: 580px;
    height: 34px;
    background-color: #1e789c70;
    background-position: bottom 50px right 100px;
    margin: auto;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 1 2;

}
  h1   {
    color: rgb(255, 179, 37); 
    text-align: center; 
    font-family: headFont;
    text-shadow: 7px 5px rgb(0, 0, 0);
    font-size: 100pt
    
}
    
  h2  {
    color:rgb(255, 179, 37);
    font-family: pixel; 
    text-shadow: 2px 2px black;
    text-align: left; 
    margin-left: 20px;
    font-size: 20pt;
    transform-origin: top left;
}

  h2:hover{
  color:rgb(255, 227, 175);
  cursor: pointer;
  transform: scale(1.1);
  --animate_animation: jello;
  }
  
  p    {
    color: rgb(0, 0, 0); 
    text-align: left; 
    margin: 35px;
}

  a {
    color: rgb(0, 0, 255);
}
 
  a:hover {
    color: rgb(255, 179, 37);
}