body{
 font-family: "ZCOOL KuaiLe";
}

#textbox{
 position: relative;
 left: 10vw;
 top: 5vh;
 font-family: "Sofia", sans-serif;
 font-size: 5.5rem;
 width: 80vw;
}


.nav{
 /*font-family: "Open Sans", sans-serif;*/
 font-size: 4vw;
}

.nav-link{
  color: whitesmoke;
  background-color: #172429;
  border-radius: 10vw;
}

.nav-link:hover{
 color: #f1b15e;
}

.nav-link .active{
color: #f1b15e;
}

#textbox .name{
 /*font-family: "Sofia", sans-serif;*/
 color: brown;
}

#textbox .chinese{
 font-family: "ZCOOL KuaiLe";
}

/*put my cartoon on the bottom right*/
#profile{
 position: absolute;
 bottom:0;
 right:10vw;
 height: 50vh;
}

.vw-4{
 font-size: 4vw;
}
.vw-5{
 font-size: 5vw;
}

/* Footer styles: stick footer to bottom, center content, and prevent overlap */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  /* background: rgba(255,255,255,0.95); */
  padding: 1rem 0;
  z-index: 99999;
  display: block;
}

footer .footer-content {
  max-width: 1000px;
  margin: 0 auto;
  color: #333;
}

/* Add bottom spacing to the main textbox so it is not hidden behind the fixed footer */
#textbox{
  margin-bottom: 8rem;
}