*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* I. Homepage Animation */
h2 {
    font-family: 'Permanent Marker', cursive;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to left, #1a2033, #526181);
    z-index: -1;
}

#logo {
    grid-column: 2/4;
    font-size: 32px;
}

section {
    display: flex;
    height: 80vh;
    justify-content: center;
    align-items: center;
}

.hero {
    height: 90%;
    width: 100%;
    position: relative;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Make the homepage image a little bit darker */
.hero::after {
    content: "";
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    opacity: 0.2;
    top: 0;
}

.headline {
    position: absolute;
    top: 85%;
    left: 18%;
    font-size: 75px;
    transform: translate(-20%, -70%);
    color: white;
    z-index: 3;
    font-family: 'Lobster', cursive;
}


/* II. Top Navigation Bar */
.topnav {
    background-color: transparent;
    overflow: hidden;
    padding-right: 10%;
    padding-left: 10%;
}

/* Sticky Top Navbar */
.sticky {
    background: linear-gradient(to left, #1a2033, #526181);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 4;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    border: 0px;
    color: turquoise;
}

#brand {
    font-size: 20px;
    font-weight: bold;
}
  
/* Hide the hamburger button on large screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("brand"). 
   Show the hamburger button (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        display: block;
    }
}

/* Animated Responsive Hamburger Navbar */
.hamburger-links {
    display: none;
    list-style: none;
    width: 50%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
}

.hamburger-links li a {
    color: #f2f2f2;
    text-decoration: none;
    font-size: 22px;
}

.hamburger-links li a:hover {
    border: 0px;
    color: turquoise;
}

@media screen and (max-width: 600px) {
    .hamburger-links {
        display: flex;
        position: fixed;
        background:  #191D2B;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(100px at 90% -20%);
        -webkit-clip-path: circle(100px at 90% -20%);
        transition: all 1s ease-out;
        pointer-events: none;
        z-index: 5;
    }
    .hamburger-links.open {
        clip-path: circle(1200px at 90% -20%);
        -webkit-clip-path: circle(1200px at 90% -20%);
        pointer-events: all;
    }
    /*Fading of hamburger-links*/
    /* .hamburger-links li {
        opacity: 1;
    }
    .hamburger-links li a {
        font-size: 25px;
    }
    .hamburger-links li:nth-child(1) {
        transition: all 0.5s ease 0.2s;
    }
    .hamburger-links li:nth-child(2) {
        transition: all 0.5s ease 0.4s;
    }
    .hamburger-links li:nth-child(3) {
        transition: all 0.5s ease 0.6s;
    }
    li.fade {
        opacity: 1;
    } */
    /*Fading of hamburger-links*/
}


/* III. About Me */
.about-me {
    margin: auto;
    margin-top: 13%;
    max-width: 1000px;
}

.about-body {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "me-img me-text";
}

.me-img {
    grid-area: me-img;
}

.me-text {
    grid-area: me-text;
}

/* photo */
#tony {
    width:300px;
    height:337px;
    margin-right:30px;
}

#resume-button {
    margin: auto;
}

#cv-button-border {
    border-radius: 1em;
}

@media screen and (max-width: 600px) {
    .about-me {
        margin-top: 20%;
        margin-left: 12%;
        margin-right: 12%;
    }
    .about-body {
        grid-template-columns: 1fr;
        grid-template-areas:
          "me-img"
          "me-text";
        grid-gap: 0.8rem;
    }
    .me-img {
        margin: auto;
        position: relative;
    }
    #tony {
        width:100%;
        height:100%;
    }
}


/* IV. My Projects */
.my-projects-slider {
    background: linear-gradient(to left, #1a2033, #526181);
}

.my-projects {
    margin: auto;
    margin-top: 5%;
    max-width: 1000px;
}

.my-projects > h2 {
    color: white;
}

.my-projects-title {
    padding-top: 5%;
}

.projects-body {
    display: grid;
    grid-gap: 50px;
    padding: 0% 5% 5% 5%;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.projects-item {
    background: white;
    overflow: hidden;
    text-decoration: none;
    color: black;
    font-weight: 900;
    border-radius: 1rem;
    /* For image fade animation */
    position: relative;
}

.projects-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    padding: 2% 2% 2% 2%;
}

.projects-item:focus {
    position: relative;
    z-index: 2;
}

.projects-item > p {
      text-align: center;
}

.projects-body > a:hover {
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .my-projects {
        margin-top: 5%;
        margin-left: 12%;
        margin-right: 12%;
    }
}

/* Projects item fade animation */
.projects-fade::after {
    /* Project Description Styling */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5% 5% 5% 5%;
    /* Fading */
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.projects-fade:hover::after {
    opacity: 0.85;
}

/* Project Description Content */
.project-1::after {
    content: "Built a single-page web application with a RESTful API server to manage the progress of job application by using MongoDB, Express, React, and Node.js (deployed on AWS)";
}

.project-2::after {
    content: "Compared the behavior between two distributed big data processing frameworks, Apache Heron and Dragon, by using Java and InfluxDB  (deployed on Nectar Research Cloud)";
}

.project-3::after {
    content: "Developed a motion-controlled gaming App with a user-friendly interface and handled application data via Firebase Real-time Database";
}

.project-4::after {
    content: "Implemented an information retrieval system with a self-trained deep learning model by utilizing AllenNLP and PyLucene";
}

.project-5::after {
    content: "Built a distributed system based on TCP/UDP protocol to achieve efficient file sharing and synchronization among users by using Java";
}


/* V. Contact */
.contact {
    margin: auto;
    padding-top: 5%;
    max-width: 1000px;
}

@media screen and (max-width: 600px) {
    .contact {
        margin-top: 5%;
        margin-left: 12%;
        margin-right: 12%;
    }
}


/* VI. Footer */
#footer {
    padding-top: 5%;
}

#footer a:hover {
    color:#41d684;
}

#to-top {
    font-weight: bold;
    border-radius: 1em;
}

#to-top:hover {
    text-decoration: none;
}