/* I declare that the lab work here submitted is original
except for source material explicitly acknowledged,
and that the same or closely related material has not been
previously submitted for another course.
I also acknowledge that I am aware of University policy and
regulations on honesty in academic work, and of the disciplinary
guidelines and procedures applicable to breaches of such
policy and regulations, as contained in the website.
University Guideline on Academic Honesty:
https://www.cuhk.edu.hk/policy/academichonesty/
Student Name : Fong Ka Wai
Student ID : 1155177052
Class/Section : CSCI2720
Date : 18/10/2023 */
@font-face {
    font-family: 'f1font';
    src: url("font.ttf");
  }
  
  #fontset {
    font-size: 7vw;
  }
  .box_area{
    padding-bottom: 3%;
  }
  #bar {
    backdrop-filter: blur(15px);
    background: linear-gradient(60deg, rgba(92, 1, 48, 0.8) 0%, rgba(0, 30, 73, 0.8) 30%, rgba(57, 0, 117, 0.8) 100%);
  }
  
  .box_area {
    font-family: 'f1font';
  }
  
  .banner_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 50%;
    position: relative;
  }
  
  .banner_text h1 {
    color: #ffff;
    font-weight: bold;
    font-size: 320%;
  }
  
  .banner_text p {
    color: #ffff;
  
  }
  
  .banner_area {
    width: 100%;
    height: 500px;
    position: relative;
    top: 0px;
    background: url(https://www.thedrive.com/uploads/2022/10/09/Max-Verstappen-Suzuka-GP-3.jpg);
    background-size: cover;
    background-position: top center;
  }
  
  .gradient_area {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(69deg, rgba(92, 1, 48, 0.8) 0%, rgba(0, 30, 73, 0.8) 50%, rgba(57, 0, 117, 0.8) 100%);
    background-size: cover;
    background-position: top center;
  }
  
  .left-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  #abtpic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  
  .right-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 100%;
  }
  
  .subtitle h2 {
    text-decoration: underline;
  }
  
  .subtitle p {
    font-size: 130%;
  }
  
  th {
    font-weight: bold;
  }
  
  aside {
    max-width: 300px;
    float: right;
  }
  
  .asideimg {
    max-width: 10%;
  }
  
  asideimg img {
    object-fit: scale-down;
  }
  #biography{
    margin-bottom: 5%;
  }
  #achievement{
    margin-top: 3%;
    margin-bottom: 3%;
  }
  .achi_box{
    margin-top: 3%;
  }
  .track{
    padding-top: 2px;
    padding-bottom: 2px;
  }
  
  #qa.track{
    background-image:linear-gradient(69deg, rgba(32,40,69,0.8) 0%, rgba(0,34,82,0.8) 48%, rgba(34,0,70,0.8) 100%), url(https://media.formula1.com/image/upload/t_16by9Centre/f_auto/q_auto/v1696794651/trackside-images/2023/F1_Grand_Prix_of_Qatar/1724642638.jpg.transform/9col/image.jpg);
    background-size: cover;
  }
  
  #ja.track{
    background-image:linear-gradient(69deg, rgba(32,40,69,0.8) 0%, rgba(0,34,82,0.8) 48%, rgba(34,0,70,0.8) 100%),url(https://media.formula1.com/image/upload/t_16by9South/f_auto/q_auto/v1695532874/trackside-images/2023/F1_Grand_Prix_of_Japan/1698160804.jpg.transform/9col/image.jpg);
    background-size: cover;
    background-position: buttom center;
  }
  
  #ne.track{
    background-image:linear-gradient(69deg, rgba(32,40,69,0.8) 0%, rgba(0,34,82,0.8) 48%, rgba(34,0,70,0.8) 100%),url(https://media.formula1.com/image/upload/t_16by9North/f_auto/q_auto/v1692790100/fom-website/2023/Netherlands/GettyImages-1420788800.jpg.transform/9col/image.jpg);
    background-size: cover;
  }
  
  
  #it.track{
    
    background-image: linear-gradient(69deg, rgba(32,40,69,0.8) 0%, rgba(0,34,82,0.8) 48%, rgba(34,0,70,0.8) 100%),url(https://media.formula1.com/image/upload/f_auto/q_auto/v1693480999/fom-website/2023/Italy/Monza%202023%20-%20betting%20guide.jpg.transform/9col/image.jpg);
    background-size: cover;
  }
  .pic_filter{
    background-color: black;
    opacity: 1;
    width: 100%;
    height: 100%;
    position: relative;
    background-position: top center;
    background-size: cover;
  }
  
  #spotlight {
    padding: 1.5em;
    margin: 20px, 20px, 20px, 20px;
    background-color: transparent;
    border-radius: 25px;
  }
  
  #Card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
  }
  #Card p{
    font-size: 95%;
  }
  
  #pgsbar {
    background-color: #001e49;
    opacity: 0.9;
  }
  
  #blank {
    height: 50px;
  }
  
  #social {
    margin-bottom: 5%;
  }
  
  .socialbtn {
  
    padding-top: 1em;
    padding-bottom: 1em;
  
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 1%;
    margin-right: 1%;
  }
  
  .socialbtn a {
    font-size: 110%;
  }
  
  
  #instagram {
    border-radius: 15px;
    background: linear-gradient(43deg, rgba(252,175,69,1) 6%, rgba(193,53,132,1) 39%, rgba(131,58,180,1) 76%);
  }
  
  #facebook {
    border-radius: 15px;
    background: linear-gradient(43deg, rgba(67,142,240,1) 6%, rgba(24,119,242,1) 39%, rgba(21,99,198,1) 76%);
  }
  
  #twitterX {
    border-radius: 15px;
    background: linear-gradient(0deg, rgba(45,45,45,1) 23%, rgba(45,45,45,1) 30%, rgba(0,0,0,1) 76%);
  }
  
  #comment {
    padding: 1.5em;
    margin: 20px, 20px, 20px, 20px;
    border-radius: 15px;
    background: linear-gradient(69deg, rgba(60, 0, 31, 1) 0%, rgba(0, 30, 73, 1) 50%, rgba(34, 0, 70, 1) 100%);
  }
  
  #comment p {
    font-size: 95%;
    vertical-align: center;
    color: white;
    align-items: center;
  }
  
  #comment label {
    color: white;
  }
  
  #comment h4 {
    color: white;
  }
  
  .comment_area {
    margin: 2px;
    border-radius: 10px;
  }
  
  .comment_area #email {
    color: black;
    font-size: 110%;
  }
  
  .comment_area #cmt {
    color: gray;
  }
  
  #submitbtn {
    padding: 1em;
    border-radius: 15px;
    background-color: #700d2e;
  }
  
  .scrollbox {
    height: 400px;
    overflow-y: auto;
  }