body {
  font-family: Consolas, Microsoft JhengHei;
  display: flex;
  flex-direction: column;
  color: #646464;
  margin: 0 10 0 10;
  width: 1100px;
}
body, html {
  height: 100%;
  display: flex;
  justify-content: center;
}

banner {
  font-size: 16px;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0vw 2vw 0vw 2vw;
}
banner left {
  color: #646464;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#fun_fact {
  color: #646464;
  width: min(max_width, 20%);
}


a:link, a:visited, a:hover, a:active {
  color: #646464;
  background-color: transparent;
  text-decoration: none;
  border: 0px transparent;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.2s;
}
a:hover {
  border-bottom: 2px solid #969696;
}
links {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
links input {
  margin-right: 15px;
  height: 25px;
  font-family: Consolas, Microsoft JhengHei;
  font-size: 18px;
  background-color: transparent;
  border: 0px transparent;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.5s;
  color: #969696;
}
links input:hover {
  border-bottom: 2px solid #969696 ;
}


hr {
  border: 0px;
  display: block;
  width: 100%;    
  background-color: #c8c8c8;
  height: 1px;
}


down {
  height: 80%;
  display: flex;
  margin: 10px;
}

down left {
  width: 60%;
  display: flex;
  border: 0px;
  padding: 0 0 0 2%;
  border-right: 1px solid #c8c8c8;
}
down right {
  height: 100%;
  width: 40%;
  padding: 0 0 0 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
down right info {
  font-size: 18px;
}
down hr {
  width: 0px;
}


post {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
}
post subtitle {
  height: fit-content;
  width: fit-content;
  font-size: 24px;
  margin: 5 5 0 5;
}
post content {
  height: fit-content;
  width: fit-content;
  font-size: 16px;
  color: #969696;
  margin: 0 0 0 10;
}


@media (width <= 1100px) {
  banner {
    font-size: 12px;
  }
  post subtitle {
    font-size: 18px;
  }
  post content {
    font-size: 12px;
  }
  down right {
    width: 440px;
  }
  down right info {
    font-size: 16px;
  }
}
@media (width <= 768px) {
  down {
    flex-direction: column;
  }
  down left, down right, down hr {
    width: 100%;
  }
  down left {
    border-right: 0px;
  }
}
@media (width <= 450px) {
  links input {
    font-size: 4vw;
  }
}