* {
  margin: 0;
  padding: 0;
  list-style: none;
}


.top {
  background-image: url(../img/bg.jpg);
  background-size: 100%;
  height: 150px;
}

#title {
  color: white;
  position: absolute;
  font-size: 35pt;
  font-weight: bold;
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-left: 44.4%;
  margin-top: 40px;
}

#content {
  background-color: #CCDBE2;
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 900px;
}

#teachphoto {
  height: 270px;
  width: 360px;
  position: absolute;
  display: flex;
  flex-direction: row;
  margin-left: 38.5%;
  margin-top: 50px;
}

.introduce {
  color: blue;
  font-size: 14pt;
}

#name {
  font-size: 20pt;
}

#word {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-top: 350px;
  margin-left: 27%;
}

.footer {
  margin-top: 580px;
}

#fir {
  text-decoration: underline 5px yellow;
}

#word1 {
  display: flex;
  flex-direction: column;
  margin-top: 600px;
}

#sec {
  text-align: center;
  font-size: 24pt;
  font-weight: bold;
  padding: 10px;
  color: blue;
}

#thir {
  color: blue;
  font-weight: bold;
  font-size: 20pt;
  text-decoration: underline 5px yellow;
}

.introduce1 {
  color: black;
  font-size: 14pt;
}

#introduce {
  font-size: 16pt;
  color: blue;
}

#word1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-left: 20%;
  margin-right: 50px;

}

#four {
  text-decoration: underline 5px yellow;
  text-align: center;
  font-size: 24pt;
  padding: 20px;
  color: blue;
  margin-top: 50px;
}

#five {
  text-decoration: underline 5px yellow;
  text-align: center;
  font-size: 24pt;
  padding: 20px;
  color: blue;
}

.footer {
  margin-top: 880px;
}