h1 {
  display: block;
  margin: 50% auto;
  transform: translateY(-50%);
}

li a {
  text-decoration: none;
  color: #333;
}

.menu-bg {
  background: white;
  color: #333333;
}

#hamburger {
  height: 50px;
  width: 50px;
  background: white;
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:0px 0px 30px #000;  
  transition: all .2s ease;
  z-index: 9999;
}

#hamburger:hover {
    background: lighten(white, 10%);
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    transform: scale(1.1);
    transition: all .2s ease;
  }
  
span {
    display: block;
    position: absolute;
    height: 2px;
    width: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: #333333;
    border-radius: 10px;
    transition: all .15s ease;
}

span:first-child {
      top: 17px;
  }
    
span:nth-child(2) {
      top: 25px;
  }
    
span:last-child {
      top: 33px;
  }

  
#hamburger.close {
   
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
}


#hamburger.close span:first-child {
        top: 15px;
        transform: translate(-14px, 10px) rotate(135deg);
      }

#hamburger.close span:nth-child(2) {
        left: -20px;
        opacity: 0;
      }

#hamburger.close span:last-child {
        top: 15px;
        transform: translate(-14px, 10px) rotate(-135deg);
      }

  


.nav-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

#nav {
  position: absolute;
  top:0px;
  height: 100vh;
  right: -50px;
  background-color: rgba(255, 255, 255, 0.9);;
  color: #333333;
  width: 250px;
  box-shadow: 0 1px 20px rgba(0,0,0,0.25);
  
  z-index: 3000;  
  transform: translateX(200px);
  opacity: 0;
  transition: all .2s ease-in-out;
}
  
#nav ul {
    list-style: none;
    padding: 0;
	padding-top:70px;
}

#nav li {
      width: 100%;
      transition: all .15s ease;
}

#nav a {
        display: block;
        padding: 20px;
        width: 100%;
        height: 100%;
}

#nav li:hover {
        background: #333333;
        color: white;
}

#nav li:hover a{
        color: white;
}
  
#nav.visible {
    transform: translateX(0);
    opacity: 1;
}

.social{
	width: 40px;
	height: 40px;
	margin: 20px 10px 20px 20px;
	float: left;
	cursor: pointer;
}


.fb{
	background: url("/20230901000815oe_/https://www.ioa.cuhk.edu.hk/nutcrackers/images/facebook.svg") no-repeat;
	background-size: cover;
}

.fb:hover{
	background: url("/20230901000815oe_/https://www.ioa.cuhk.edu.hk/nutcrackers/images/facebook_on.svg") no-repeat;
}

.yt{
	background: url("/20230901000815oe_/https://www.ioa.cuhk.edu.hk/nutcrackers/images/youtube.svg") no-repeat;
	background-size: cover;
}

.yt:hover{
	background: url("/20230901000815oe_/https://www.ioa.cuhk.edu.hk/nutcrackers/images/youtube_on.svg") no-repeat;
}

.ig{
	background: url("/20230901000815oe_/https://www.ioa.cuhk.edu.hk/nutcrackers/images/instagram.svg") no-repeat;
	background-size: cover;
}

.ig:hover{
	background: url("/20230901000815oe_/https://www.ioa.cuhk.edu.hk/nutcrackers/images/instagram_on.svg") no-repeat;
}