@font-face{
  font-family: Bebas;
  src: url('../fonts/BebasNeue-Regular.otf');
}

@font-face{
  font-family: Blogger;
  src: url('../fonts/BloggerSans.ttf')
}

@font-face{
  font-family: Roboto-Bold;
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face{
  font-family: Roboto-Light;
  src: url('../fonts/Roboto-Light.ttf');
}


p{
  font-family: Roboto-Light;
  color:black;
  text-decoration: none;
  text-align: center;
  margin: 0;
  margin-top: 5px;
  font-size: 10px;
}

a:hover{
  color:black;
  text-decoration: none;
}

.content{
  padding-top: 100px;
}

.name{
  font-family: Bebas;
  letter-spacing: 0.01em;
  word-spacing: 0.1em;
  text-align:center;
  font-size: 70px;
}

.row{
  text-align: center;
}

.name-div{
  height:90px;
}

.title{
  font-family: Roboto-Light;
  text-align:center;
  font-size: 19px;
  margin-bottom: 1em;
}

.line{
  border-top: 3px solid black;
  text-align: center;
}

.boxed{
  text-align: center;
  margin-bottom: 15px;
  margin-top:1.5em;
  font-size: 16px;
  font-family: Roboto-Bold;
}

.fab, .fas, .far{
  font-size: 42px;
  color: black;
}

.img-responsive{
  height: 40px;
  margin-left:auto;
  margin-right:auto;
  float:none;
}

.border{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  float:none;
}

.top-seperator{
  height:100px;
}

.class-bottom-seperator{
  padding-top: 250px;
}

#weChat-mobile-text{
  text-align:left;
  float: left;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .name{
    font-size:6.5vw;
  }

  .title{
    font-size:2vw;
  }

  .class-bottom-seperator{
    padding-top: 200px;
  }

  #weChat-mobile-text{
    display:none;
  }

  .modal-header{
    border-bottom: 2px solid black;
    font-family: Blogger;
  }

  .modal-footer{
    border-top: 2px solid black;
  }

  .modal-content{
    border: 2px solid black;
  }

  .btn{
    border: 2px solid black;
    font-family: Blogger;
  }

  .btn:hover{
    border-color: black;
  }

  .modal-dialog{
    margin-top: 100px;
  }

  .close{
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .border{
    display: none;
  }
  .content{
    padding-top:20px;
  }

  .name{
    position: static;
    font-size: 9vw;
  }

  .title{
    position: static;
    margin-bottom: 10px;
    font-size: 2.5vw;
  }

  .class-bottom-seperator{
    padding-top: 30%;
  }

  .name-div{
    height: 75px;
  }
}