html, body {
    min-height: 100%;
    width: 100%;
    text-align: center;
    background-color: #707375;
  }
  
  .title_1 div{
    text-align: center;
    font-family: "Microsoft YaHei";
    display: block;
    font-size: 1.2rem;
    padding: 10px;
  }
  
  .title_1 div hr{
    width: 80%;
    height:10px;
    background-color: #5d5bd200;
  }
  
  select{
    width: 30%;
    height:30px;
    margin:20px;
  }
  
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&display=swap');
  
  *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .navb{
    color:white
  }
  
  nav ,li, a ,button{
      font-family: 'Noto Serif TC', serif;
      font-weight: 500;
      font-size: 20px;
      text-decoration: none; 
      transition:width 3s,height 3s;
  }
  
  header {
      display: flex;
      justify-content: space-between;
      align-items:center;
      padding: 13p 15%;
      padding-top:8px;
      padding-bottom:8px;
      padding-left:5px;
      padding-right:5px;
  }
  
  .logo {
      cursor: pointer;
  }
  
  .nav_links li a {
      list-style: none;
      color: white;
  }
  
  .nav_links li {
      display: inline-block;
      padding: 0px 20px;
  }
  
  .nav_links li a {
      transition: all 0.3s ease;
      text-shadow:0px 0px 0px;
  }
  
  .nav_links li a:hover{
      color: #ff7300;
      font-size:33px;
      text-shadow:5px 5px 5px #000000;
  }
  
  .nav_links li a:active{
      font-size:25px;
      text-shadow:2px 2px 2px #000000;
  }
  
  button{
      padding: 9px 25px;
      background-color: rgba(0, 136,169,1);
      cursor:pointer;
      border-radius: 50px;
      transition: all 0.6s;
  }
  
  .navb{
    color: white;
  }
  
  button:hover{
      background-color: rgba(0, 136, 169, 0.6);
      color: #ff7300;
      font-size:23px;
      text-shadow:5px 5px 5px #000000;
  }
  
  button:active{
      font-size:17px;
      text-shadow:2px 2px 2px #000000;
  }
  
  header{
    background-image: url(images/background.jpg) ;
    opacity: 0.9;
  }
  
  @media (max-width:600px){
    .header{
      width: 100%;
      height: 30;
    }
  }
  .imgview div{
    text-align: center;
    max-width: 50%;
    height: auto;
  }
  #learn{
    font-weight: bolder;
    font-size: 40px;
    font-family: 'Noto Serif TC', serif;
  }
  #html{
    text-align: center;
    font-size: 50px;
  }
  article{
    text-align:left;
  }
  section a{
    color: #000000;
  }
  section{
    font-size: 30px;
    color: #000000;
    font-family: 'Alkatra', cursive;
    font-family: 'Noto Serif TC', serif;
  }
  #list{
    list-style-type: circle;
    margin-left: 40%;
    white-space: 45%;
    outline:none;
  }
  
  #part1 span{
    font-size: 20px;
  }
  
  #part2 span{
    font-size: 20px;
  }
  
  #red{
    color: #e71313;
  }
  
  #space{
    height: 30px;
  }
  
  footer{
    background-color:rgba(0, 136, 169, 0.6);
    height: 30px;
    width: 100%;
    bottom: 0;
    position: fixed;
  }
  
  footer address{
    font-size: 20px;
  }
  
  ///////以下是projects///////////
  
  .project {
    display:flex;
    justify-content: space-between;
    margin: 30px;
  }
  
  .project_1 ,.project_2 ,.project_3{
    margin: 20px;
  }
  
  .img_1{
    margin: 40px;
    padding:10px;
    
  }
  .img_2{
    margin: 50px;
    padding:10px;
    
  }
  .img_3{
    margin: 40px;
    padding:10px;
    
  }
  .fbimage {
    display: flex;
    /*justify-content: center;*/
    display: inline-block;
    }