body{
    background-color: #FFFFFF;
}
.NavBar{
    position: sticky;
    top: 0;
    display: flex;
    flex-flow: row;
    width: 100%;
    height: 100px;
    background-color: #89AEFF;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 6px solid #B8FFFF;
    z-index: 1;
}
.NavBarItem{
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    color: #4B4B5F;
    font-size: xx-large;
    margin: 15px;
    text-decoration: none;
    font-weight: 300;
    transition: 0.3s ease-in-out;
}
.NavBarItem:hover{
    color: #B8FFFF;
    font-size: 35px;
}
#spacer{
    flex-grow: 1;
}
#home{
    display: flex;
    height: 100px;
    transition: 0.3s ease-in-out;
}
#home:hover{
    scale: 1.1;
}
.content{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 1000px;
    background-color: #4B4B5F;
}
.banner{
    display: flex;
    width: 100%;
    height: 367px;
    justify-content: center;
    background-color: #4B4B5F;
}
hr{
    background-color: #B8FFFF;
    width: 100%;
    height: 5px;
    margin: 0px;
    padding: 0px;
    justify-self: center;
    border: 1px solid #B8FFFF;
}
.headr{
    display: flex;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    font-weight: 50;
    flex-flow: row nowrap;
    justify-content: start;
    font-size: 100px;
    color: #B8FFFF;
    align-items: start;
    padding: 25px;
}
.AboutDescript{
    color: #89AEFF;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    align-self: center;
    padding-right: 100px;
    padding-left: 100px;
    margin: 10px;
    text-align: center;
}
.headrII{
    display: flex;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    font-weight: 50;
    flex-flow: row nowrap;
    justify-content: start;
    font-size: 25px;
    color: #B8FFFF;
    align-items: start;
    padding: 25px;
}
.EggManButtonLink{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #B8FFFF;
    color: #4B4B5F;
    width: 20%;
    height: 50px;
    border: 5px solid #89AEFF;
    margin: 10px;
    margin-bottom: 50px;
    font-size: x-large;
    border-radius: 25px;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.EggManButtonLink:hover{
    background-color: #a1e0e0;
    border: 5px solid #7696db;
}
.wrapper{
    display: flex;
    flex-flow: column nowrap;
    margin: 20px;
    align-items: center;
    color: #89AEFF;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
  }
  .row{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
  }
  .card{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 300px;
    background-color: #89AEFF;
    margin: 20px;
    border: 5px solid #B8FFFF;
    border-radius: 20px;
    perspective: 1000px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    color: #4B4B5F;
    z-index: 0;
  }
  .cardII{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 300px;
    background-color: #89AEFF;
    margin: 20px;
    border: 5px solid #B8FFFF;
    border-radius: 20px;
    perspective: 1000px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    color: #4B4B5F;
    text-align: center;
    padding:10px;
    z-index: 0;
  }
  .cardIII{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 300px;
    background-color: #89AEFF;
    margin: 20px;
    border: 5px solid #B8FFFF;
    border-radius: 20px;
    perspective: 1000px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    color: #4B4B5F;
    text-align: center;
    padding:10px;
    z-index: 0;
  }
  .cardIIII{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 300px;
    background-color: #89AEFF;
    margin: 20px;
    border: 5px solid #B8FFFF;
    border-radius: 20px;
    perspective: 1000px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    color: #4B4B5F;
    text-align: center;
    padding:10px;
    z-index: 0;
  }
  .HobbyCard-Front{
    background-color: #89AEFF;
    padding:10px;
  }
  .HobbyCard-Back{
      background-color: #89AEFF;
      transform: rotatey(360deg);
      padding: 10px;
  }
  table{
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    font-size: xx-large;
    color: #4B4B5F;
    border: 5px solid #4B4B5F;
    margin: 25px;
    border-radius: 20px;
    background-color: #89AEFF;
    border-radius: 15px;
  }
  td{
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    border: 2px solid #4B4B5F;
    padding: 5px;
    background-color: white;
    border-radius: 10px;
    background-color: #89AEFF;
  }
  tr{
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    border: 2px solid #4B4B5F;
    padding: 5px;
      background-color: white;
      border-radius: 10px;
  }
  th{
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    border: 2px solid #4B4B5F;
    padding: 5px;
      background-color: white;
      border-radius: 10px;
      background-color: #B8FFFF;
  }
  .AchievementsCard-FrontI{
    background-color: #89AEFF;
    padding:10px;
  }
  .AchievementsCard-BackI{
    background-color: #89AEFF;
    transform: rotatey(360deg);
    padding: 10px;
  }
  .Aimg{
    justify-self: center;
    align-self: center;
    width: 90%;
    border: 3px solid #B8FFFF;
    border-radius: 5px;
  }
  .AimgII{
    justify-self: center;
    align-self: center;
    width: 100%;
    height: 125px;
    border: 3px solid #B8FFFF;
    border-radius: 5px;
  }
  #RandQuest{
    display: flex;
    flex-flow: column nowrap;
    margin: 20px;
    align-items: center;
    color: #89AEFF;
    background-color: #4B4B5F;
    border: #4B4B5F;
    font-size: xx-large;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
  }
  #Ans{
    color: #4B4B5F;
    background-color: #89AEFF;
    border: 5px solid #B8FFFF;
    border-radius: 10px;
    padding: 5px;
    font-size: large;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
  }
  label{
    font-size: larger;
    padding: 5px;
  }
  #Name{
    display: flex;
    flex-flow: row;
    color: #4B4B5F;
    background-color: #89AEFF;
    border: 5px solid #B8FFFF;
    border-radius: 10px;
    padding: 5px;
    font-size: large;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
  }
  #sbmt{
    display: flex;
    flex-flow: row;
    color: #4B4B5F;
    background-color: #89AEFF;
    border: 5px solid #B8FFFF;
    border-radius: 10px;
    padding: 5px;
    margin: 10px;
    font-size: large;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
  }
  #sbmt:hover{
    background-color: #7a9be2;
    border: 5px solid #9bd4d4;
  }
  .CTM{
    display: flex;
    flex-flow: column nowrap;
    margin: 20px;
    align-items: center;
    color: #89AEFF;
    font-size: xx-large;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
  }
  ul{
    display: flex;
    flex-flow: column nowrap;
    margin: 20px;
    color: #89AEFF;
    font-size: x-large;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
  }