:root{
    --color0:#fff !important;
    --color1:orange !important;
    --color2:#222 !important;

}



html,body{
    margin: 0 !important;
    padding: 0 !important;
    min-height: 600px;
    background-color: black;

}

body {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode:forwards;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
   }
}

*{
    overflow: hidden !important;
    
}

#container0{
position:absolute !important;
top: -0% !important;
left: -0% !important;
width: 100% !important;
height: 100% !important;
display: flex !important;


}
#container{
position:absolute !important;
top: -75% !important;
left: -10% !important;
width:120% !important;
height: 250% !important;
display: flex !important;
overflow: hidden !important;
transform:rotateZ(45deg) !important;
}
.rect{

    
    flex-grow: 1 !important;
    text-align: center !important;
     transform: scaleX(1.01) !important; 
     transition: transform 400ms cubic-bezier(1.000, 0.010, 0.535, 1.020) !important; /* custom */
     transition-timing-function: cubic-bezier(1.000, 0.010, 0.535, 1.020) !important; /* custom */
     background-color:var(--color0)  !important;
}
.rect2{
   
        height: 100% !important;
        
        flex-grow:1 !important;
        text-align: center !important;
         transform: scaleX(0) !important; 
         background-color:var(--color1)  !important;
         transition: background-color 0.2s ease !important; 
         transition: transform 400ms cubic-bezier(1.000, 0.010, 0.535, 1.020),background-color 0.2s ease !important; /* custom */
         transition-timing-function: cubic-bezier(1.000, 0.010, 0.535, 1.020) !important; /* custom */

    }


#openclose{
    position:absolute !important;
    float: left !important;
    top: 0 !important;
    left: 0 !important;
   
    z-index: 100 !important;
}


.ham {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 400ms !important;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    
}
.ham:active{
    transform: scale(0.8);
}


.hamRotate180.active {
    transform: rotate(180deg) !important;
}

body {
  align-items: center !important;
  display: flex !important;
  height: 100% !important;
  justify-content: center !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 100% !important;
}
.ham {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 400ms !important;
  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.hamRotate.active {
  transform: rotate(45deg) !important;
  
}
.hamRotate180.active {
  transform: rotate(180deg) !important;
 
}
.line {
  fill:none !important;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms !important;
  stroke:var(--color0) !important;
  stroke-width:5.5 !important;
  stroke-linecap:round !important;
  transition: 0.3s !important;
}

.linew{
    stroke:var(--color1) !important;
    transition: 0.3s !important;
}
.ham1 .top {
  stroke-dasharray: 40 139 !important;
}
.ham1 .bottom {
  stroke-dasharray: 40 180 !important;
}
.ham1.active .top {
  stroke-dashoffset: -98px !important;
}
.ham1.active .bottom {
  stroke-dashoffset: -138px !important;
}
#mcontainer{

position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10 !important;
display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: space-around !important;
  align-items: center !important;
  align-content: stretch !important;

}

#menu{
  visibility: visible !important;

list-style: none !important;
margin: 0 !important;
z-index: 10 !important;
text-align: left !important;
padding: 0 !important;
border: 0 !important;

display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: space-around !important;
  align-items: left !important;
  align-content: stretch !important;


}
@font-face { font-family: "Noto Sans" !important; src: url("https://fonts.gstatic.com/s/notosans/v14/o-0IIpQlx3QUlC5A4PNr5TRA.woff2") format("woff2") !important; font-style: normal !important; font-weight: 400 !important; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD !important; }

.menuitem{
  text-align: left !important;
display: block !important;
padding: 0px 0 !important;
color:var(--color2) !important;
z-index: 11 !important;
font-size: 2em !important;
font-family:"Noto Sans" !important;
transition: 0.1s !important;
}

.menuitem:active{
    transform: scale(0.95) !important;
    transition: 0.1s !important;
}

#menu a::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 5px !important;
    opacity: 0 !important;
    background-color: #222222 !important;
    transform: translateX(-200px) !important;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1) !important;
}
#menu a {
    text-decoration: none !important;
    color: #222222 !important;
    display: inline-block !important;
    padding: 10px 0 !important;
    position: relative !important;
}
#menu a:hover::before {
    opacity: 1 !important;
    transform: translateX(0px) !important;
    background-color: var(--color1) !important;
}
#menu a:active::before {
    opacity: 1 !important;
    transform: translateX(0px) !important;
    background-color: var(--color1) !important;
}

.hiden{
visibility:hidden !important;
opacity: 0 !important;
transform: translateX(25%) !important;
transition: 0.4s 0.4s 0.4s !important;
} 
.visible{
visibility: visible !important;
opacity: 1 !important;
transform: translateX(0) !important;
transition: 0.4s 0.4s !important;
}
#page_content{
width: 100% !important;
height: calc(100% - 0px) !important;
position: absolute !important;
top: 0px !important;
}

.index99{
    z-index: 99 !important;
}

.index1{
    z-index: 1 !important;
}

#title{
    position:absolute !important;
    
    top: 0 !important;
    margin: 20px auto !important;
    color:var(--color0) !important;
    
    font-size: 2em !important;
    font-family:"Noto Sans" !important;
    z-index: 100 !important;
}
.showtitle{
    opacity: 1 !important;
    transform: translateY(0) !important;
transition: 0.2s !important;
}
.hidetitle{
    opacity: 0 !important;
    transform: translateY(-25%) !important;
    transition: 0.2s !important;
}