@font-face {
  font-family: LemonMilk;
  src: url(Assets/Fonts/LemonMilk.otf);
}

 @font-face {
  font-family: Azonix;
  src: url(Assets/Fonts/Azonix.otf);
 }

 @font-face {
  font-family: Elianto;
  src: url(Assets/Fonts/Elianto-Regular.otf);
 }

 /* div{
   border: 0px solid red;
 } */

 html, body {
   margin: 0;
   height: 100%;
   overflow: hidden
 }

 div.site {
   height: 100%;
   width: 100%
}

 div.Menu{
  height: 100%;
  width: 100%;
  /* background-image: url('Assets/Images/BG.png'); */
  background-repeat: no-repeat;
  /* border: 2px solid red; */
  flex-direction: row;
  align-items: flex-start;
  overflow: hidden;
  position: fixed;
  left: 0;
  bottom: 0;
  /* box-shadow: 0px 0px 20px 10px #242423 inset; */
 }

 div.name{
   height: 15%;
   width: 100%;
 }

 div.LeftMenu {
  /* border: 2px solid red; */
  /* border-radius: 5px; */
  /* background-image: url('Assets/Images/Blob.png'); */
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  display: flex;
  overflow: hidden;
  gap: 15px;
  position: relative;
  left: 0px;
  top: 0px;
  width: 20%;
  height: 100%;
  float: left;
  /* box-shadow: 10px 10px 20px #242423; */
}

 /* #HomeButton{
   background-image: url('Assets/Images/Blob1Test.svg');
   background-size: 330px 101px;
 }

 #CoursesButton{
   background-image: url('Assets/Images/Blob2.png');
 }

 #ProjectsButton{
   background-image: url('Assets/Images/Blob3.png');
 }

 #InterestsButton{
   background-image: url('Assets/Images/Blob4.png');
 }

 #SoftwareButton{
   background-image: url('Assets/Images/Blob5.png');
 }

 #AboutButton{
   background-image: url('Assets/Images/Blob6.png');
 } */

div.RightMenu {
 /* border: 2px solid red; */
 /* border-radius: 5px; */
 display: flex;
 flex-direction: column;
 align-items: stretch;
 justify-content: flex-start;
 /* flex-wrap: nowrap; */
 display: flex;
 /* overflow: hidden; */
 gap: 15px;
 position: relative;
 left: 0px;
 top: 0px;
 width: 80%;
 height: 100%;
 float: left;
 /* background-color: mediumpurple; */
}

 div.display{
   width: inherit;
   height: inherit;
   /* background-color: white; */
 }

 #home{
   display: block;
   width: 100%;
 }

 #courses{
   display: none;
   width: 100%;
 }

 #projects{
   display: none;
   width: 100%;
   height: 1100px;
   overflow: hidden;
 }

 #interests{
   display: none;
   /* overflow: hidden; */
   width: 100%;
 }

 #software{
   display: none;
   width: 100%;
 }

 #aboutme{
   display: none;
   width: 100%;
 }

 .display{
   height: inherit;
   width: inherit;
   overflow: hidden;
 }


 * {   /* This means everything */
  font-family: Azonix;
  color: #979eaa
}

 h1.name {
    text-align: Left;
    font-size: 70;
    color: black;
  }

.button {
  /* background: linear-gradient(90deg, #00966B, #4CAF50); */
  background: #2e6ca6;
  /* color:#979eaa ; */
   /* border: 2px hidden hidden hidden solid #00966B;  */
  border-style: hidden hidden hidden solid;
  border-width: 10px;
  border-color: #FFFFFF;
  color: black;
  padding: 32px 64px;
  text-align: left;
  text-indent: -50px;
  text-decoration: none;
  display: inline-block;
  width: 330px;
  height: 100px;
  font-size: 32px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  /* border-radius: 10px; */
}

/* .button:hover {
  /* background-color: #4CAF50;
  color: white; */
  /* animation-name: ButtonHover;
  animation-duration: 0.1s;
  animation-fill-mode: forwards; *//*
  background-position: 20 0;
} */

.button:hover {
  text-indent: 0px;
  border-color: #089cc9;
  height: 200px;
}

/* .button:hover::after{
    content: "\2192";
} */

 /* @keyframes ButtonHover {
  0% {background: linear-gradient(90deg, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B);}
  10% {background: linear-gradient(90deg, #4CAF50, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B);}
  20% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B);}
  30% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #4CAF50, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B);}
  40% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #00966B, #00966B, #00966B, #00966B, #00966B, #00966B);}
  50% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #00966B, #00966B, #00966B, #00966B, #00966B);}
  60% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #00966B, #00966B, #00966B, #00966B);}
  70% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #00966B, #00966B, #00966B);}
  80% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #00966B, #00966B);}
  90% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #00966B);}
  100% {background: linear-gradient(90deg, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50, #4CAF50);}
} */

.test {
  background: #00966B;
  color:#979eaa ;
  border: 2px solid #00966B;
  color: white;
  padding: 32px 64px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 330px;
  font-size: 32px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 10px;
  transition: background 3s;
}

 .test:hover{
   background: linear-gradient(to right, #00966B, #4CAF50);

 }