@keyframes anim { 0% {color: black;} 50% {color: azure;} 100% {color: black;}}
@keyframes anim1 { 0% {font-size: 50px;} 50% {font-size: 56px;} 100% {font-size: 50px;} }
@keyframes anim2 { 0% {border: 2px double gray;} 50% {border: 3px double darkgray;} 100% {border: 2px double gray;}
}
@keyframes anim3 { 0% {transform: rotate3d(0, 1, 0, 0deg);}  50% {transform: rotate3d(0.1, 1, 0, 179deg);} 100% {transform: rotate3d(0, 1, 0, 0deg);} 
}
@keyframes anim8 { 0% {color: black;} 50% {color: white;} 100% {color: black;}
}
@keyframes anim9{ 0% {color: white;} 50% {color: black;} 100% {color: white;}
}
@font-face {
    font-family:"Cinzel Decorative";
    src: url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Forum&display=swap"),
    url("./fonts/CinzelDecorative-Regular.ttf"),
    url("./fonts/CinzelDecorative-Regular.woff2");
}
}
@font-face {
    font-family:"Forum";
    src: url("./fonts/Forum-Regular.woff2"),
         url("./fonts/Forum-Regular.ttf");
}
html {
    font-size: 16px;
  }
  h1 {font-size: calc(1rem + 2.3vw);
  }
  h2 {font-size: calc(1rem + 1.3vw);
  width: 100%;
  text-align: right;
  }
  a:link {font-size: calc(1rem + 0.25vw);
  }
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }  
  body {
      background-color: black;
      overflow: auto;
  }
  .container:first-of-type {
      max-width: 1100px;
  }
  h1, h2 {
      color: azure;
      font-family: "Forum", sans-serif;
      letter-spacing: 0.5px;
  }
  h1 {
    animation: anim1 8s linear infinite;
  }
  h2 {
    animation: anim 8s linear infinite;
  }



.container {
    max-width: 1100px;
    display: grid;
    grid-template-columns:(repeat 10, 1fr);
    margin: auto;
    overflow: hidden;
}
#item1 {
    display: flex;
    background-image: linear-gradient(35deg, rgb(0, 28, 0), rgb(0, 18, 0));
  	background-image: -moz-linear-gradient(35deg, rgb(0, 28, 0), rgb(0, 18, 0));
  	background-image: -webkit-linear-gradient(35deg, rgb(0, 28, 0), rgb(0, 18, 0));
    color: black;
    
    /*grid-column-start: 1;
    grid-column-end: 11;
    grid-row-start: 1;
    grid-row-end: 2;*/
    grid-area: 1/1/2/11;
    height: 15vh;
    justify-content: left;
    align-items: center;
    padding-left: 1em;
}
#item2 {
    background-color: black;
    /*grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 3;*/
    grid-area: 2/1/3/7;
    height: 72.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    overflow: hidden;
}
img{
  width: 35vh;
}
#svg {
    background:black;
    margin: 0 auto;
    animation: anim3 8s linear infinite;
    border: 3px solid lightgreen;
}
#png {
  display: none;
  border: 3px solid lightgreen;
  transition: all 1.2s linear;
  -webkit-transition: all 1.2s linear;
}
#png:hover {transform: rotate3d(0, 0, 1, -359deg);
           -webkit-transform: rotate3d(0, 0, 1, -359deg);
}
#cssTransition {
  display: none;
  color: white;
  height: 100%;
  width: 35vh;
  align-items: center;
}
ul {
  list-style: none;
  font-family: "Cinzel Decorative", sans-serif;
  padding: 0px;
  margin: 0px;
  padding-top: 3vh;
  padding-right: 1.5vw;
  letter-spacing: -4.9vw;
  background: black;
}

#ul1 {
  font-size: 40vh;
  animation: anim8 17s linear infinite;
  /*background: green;*/
}
#ul2 {
  font-size: 3vh;
  animation: anim9 17s linear infinite;
  padding-left: 1.5vw;
  /*background: blue;*/
}



#item3 {
    background-color: black;
    /*grid-column-start: 7;
    grid-column-end: 11;
    grid-row-start: 2;
    grid-row-end: 3;*/
    grid-area: 2/7/3/11;
    height: 72.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
}
#item4 {
    background-image: linear-gradient(35deg, rgb(0, 18, 0), rgb(0, 28, 0));
  	background-image: -moz-linear-gradient(35deg, rgb(0, 18, 0), rgb(0, 28, 0));
  	background-image: -webkit-linear-gradient(35deg, rgb(0, 18, 0), rgb(0, 28, 0));   
  	color:black;
    
    grid-column-start: 1;
    grid-column-end: 11;
    height: 12.5vh;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 1em;
    width:100%;
}

.menu {
	  height: 25%;
        width: 95%;
	  overflow: hidden;
    display: grid;
    grid-template-columns: 50% 50%;
    padding-right:6.7em;
}
.menu-item {
    background-color: black;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px double white;
    animation: anim2 8s linear infinite;
}

.menu-item:nth-child(1){
  color: darkred;
}
.menu-item:nth-child(1):hover {
  color: red;
}
.menu-item:nth-child(5){
  color: darkred;
}
.menu-item:nth-child(5):hover {
  color: red;
}
.menu-item:nth-child(7){
  color: darkred;
}
.menu-item:nth-child(7):hover{
    color: red;
}
.menu-item:nth-child(8){
    color: darkred;
}
.menu-item:nth-child(8):hover{
    color: red;
}
/*
.menu-items:visited {
	color:#6b0801;
}
.menu-items:active {
	color:lightgray;
}*/
::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #000000; 
  }
  ::-webkit-scrollbar-thumb {
    background: #000000; 
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #330000; 
  }
  



@media only screen and (max-width: 576px) {
    #item2 {
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 3;
        grid-row-end: 4;
        height: 52.5vh;
      }
    

      #item3 {
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 2;
        grid-row-end: 3;
        height: 20vh;
      }
      .menu {
        height: 80%;
        width: 80%;
        padding-right: 0;
      }
      h1 {font-size: calc(1rem + 2.5vw);
      }
      h2 {font-size: calc(1rem + 0.25vw);
      }
      a:link {font-size:calc(1rem + 0vw);
      }
      img {
        height: 35vh;
      }
      ul {
        padding-left: 5.25vw;
        letter-spacing: -13.4vw;
      }
      #ul2 {
          padding-left: 3.5vw;
      }
     
  }
  
  
  /* Tablet Styles */
  @media only screen and (min-width: 577px) and (max-width: 991px) {
      #item2 {
        /*grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 3;
        grid-row-end: 4;*/
        grid-area: 3/1/4/11;
        height: 52.5vh;
      }
    
      #item3 {
        /*grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 2;
        grid-row-end: 3;*/
        grid-area: 2/1/3/11;
        height: 20vh;
      }
      .menu {
        width: 80%;
        height: 80%;
        padding-right: 0;
      }
      h1 {font-size: calc(1rem + 3vw);
      }
      h2 {font-size: calc(1rem + 1vw);
      }
      a:link {font-size: calc(1rem + 0.8vw);
      }
      img {
        height: 35vh;
      }
      ul {
        padding-left: 2vw;
        letter-spacing: -11.4vw;
      }
      #ul2 {
         padding-left: 2.5vw;
      }
  }
  
   @media only screen and (max-height: 576px) and (orientation : landscape) {
    #item2 {
        grid-area: 2/1/3/7;
    height: 72.5vh;
    }
    #item3 {
       grid-area: 2/7/3/11;
    height: 72.5vh; 
    }
    ul {
        padding-right: 0;
        letter-spacing: -3.4vw;
    }
    #ul2{
        padding-left: 1.5vw;
        padding-right: 0;
    }
    
    .menu {
        height: 45%;
    }
   }
   
    
    
    /*cssAnimation*/
    @keyframes anim11 {
    0% {
        opacity: 0; 
        animation-timing-function: ease-in;
    }
    10% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        animation-timing-function: ease-out;
    }
}
@keyframes anim12 {
    0% {
        opacity: 0; 
        animation-timing-function: ease-in;
    }
    10% {
        opacity: 0%;
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        animation-timing-function: ease-out;
    }
}
@keyframes anim13 {
    0% {
        opacity: 0; 
        animation-timing-function: ease-in;
    }
    20% {
        opacity: 0%;
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        animation-timing-function: ease-out;
    }
}
@keyframes anim14 {
    0% {
        opacity: 0; 
        animation-timing-function: ease-in;
    }
    30% {
        opacity: 0%;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        animation-timing-function: ease-out;
    }
}
@keyframes anim15 {
    0% {
        opacity: 0; 
        animation-timing-function: ease-in;
    }
    40% {
        opacity: 0%;
    }
    50% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        animation-timing-function: ease-out;
    }
}
#ul2 li {
    /*opacity: 1;*/
    opacity: ;
}

#ul2 li:nth-child(1) {
    animation: anim11  30s linear infinite;
}
#ul2 li:nth-child(2) {
    animation: anim12  30s linear infinite;
}
#ul2 li:nth-child(3) { 
    animation: anim13  30s linear infinite;
}
#ul2 li:nth-child(4) { 
    animation: anim14  30s linear infinite;
}
#ul2 li:nth-child(5) { 
    animation: anim15  30s linear infinite;
}