/*
The style start with the desktop style
*/

/* Define color variables */
:root {
    --primary-white: #FDFDFD;
    --secondary-white: #D4D4D4;
    --primary-black: #070707;
}

/* Basic seting for the body section */
body {
    font-family: 'Arial', sans-serif, 'Inter', 'JetBrains Mono';
    background-color: var(--primary-black);
    max-width: 1600px;
    padding-left: 160px;
    padding-right: 160px;
    padding-bottom: 183px;
    margin: 0 auto;
}

/* 
====================================
Header Section
====================================
*/

header {
    color: var(--primary-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-left: -160px;
    margin-right: -160px;
    padding-left: 160px;
    padding-right: 160px;
}

.profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.profile-name {
    font-family: 'JetBrains Mono';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: inherit;
    text-decoration: none;
}

.profile-nav {
    gap: 40px;
    display: flex;
    align-items: center;
}

.profile-nav > a[class$="text"] {
    color: var(--primary-white);
    text-decoration: none;
    font-family: 'JetBrains Mono';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    gap: 40px;
}
nav .say-hi-text {
    color: var(--primary-white);
    padding: 10px 20px;
    border-radius: 43px;
    border: 1px solid;
    font-family: 'JetBrains Mono';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.profile-nav > a[class$="icon"], a[class$="phone"] {
    display: none;
}


/* 
====================================
Intro Section
====================================
*/

.intro {
    padding-top: 140px;
    padding-bottom: 160px;
}

.intro-hi {
    gap: 20px;
    color: var(--primary-white);
    display: flex;
    text-align: left;
    align-items: center;
    font-family: 'Inter';
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.intro-hi-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.intro-code {
    padding-top: 20px;
    color: var(--secondary-white);
    font-size: 24px;
    text-align: left;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    font-family: "JetBrains Mono";
}

.intro-arrow {
    padding-top: 65px;
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 400;
}

/* 
====================================
Video Section
====================================
*/

.videos,
.thoughts,
.code {
    color: var(--primary-white);
    padding-bottom: 160px;
}

.videos-title,
.thought-title,
.code-title {
    padding-bottom: 40px;
    color: var(--secondary-white);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: "JetBrains Mono";
}

.video-grid {
    display: flex;
    align-items: center;
    justify-items: center;
    gap: 20px;
}

.video-container1,
.video-container2 {
    position: relative;
    top: 0;
    bottom: 0;
    width: 50%;
}

.video-frame-1,
.video-frame-2 {
    position: relative;
    top: 0;
    bottom: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* 
====================================
Post Section
====================================
*/

.thought-list {
    color: var(--primary-white);
    text-align: flex-start;
    padding-top: 20px;
}

.thought-item {
    color: var(--primary-white);
    display: flex;
    font-family: "JetBrains Mono";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* 
====================================
Code Section TODO(xinlongyi): Set up display project
====================================
*/

.code-grid {
    padding-top: 160px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.code-grid div {
    background-color: #333;
    width: 200px;
    height: 150px;
}


/* 
====================================
Footer Section
====================================
*/

footer:before {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid var(--secondary-white); /* This creates the border. Replace black with whatever color you want. */
}


.footer-p1,
.footer-p2,
.email {
    text-align: center;
    font-style: normal;
    line-height: normal;

}

.footer-p1 {
    color: var(--primary-white);
    font-family: 'Inter';
    font-size: 24px;
    font-weight: 700;
}

.footer-p2,
.email {
    color: var(--secondary-white);
    font-family: "JetBrains Mono";
    font-size: 16px;
    font-weight: 400;
}

/*
Blow is view for TABLET. Breakpoint is 970px
*/

@media (max-width: 970px) {

    /* Basic seting for the body section */
    body {
        max-width: 1600px;
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 120px;
    }

    /* 
    ====================================
    Header Section
    ====================================
    */

    header {
        margin-left: -80px;
        margin-right: -80px;
        padding-left: 80px;
        padding-right: 80px;
    }
    
    /* Icon and text switch. Do nothing.*/

    .profile .profile-img .profile-name .profile-nav {
        gap: 24px;
    }

    .profile-nav {
        gap: 24px;
    }

    nav .say-hi-text
    /* 
    ====================================
    Intro Section
    ====================================
    */

    .intro {
        padding-top: 72px;
        padding-bottom: 120px;
    }

    .intro-hi {
        gap: 16px;
        font-size: 40px;
    }

    .intro-hi-img {
        width: 60px;
        height: 60px;
    }

    .intro-code {
        font-size: 18px;
    }

    .intro-arrow
    /* 
    ====================================
    Video Section
    ====================================
    */

    .videos,
    .thoughts,
    .code {
        padding-bottom: 120px;
    }

    .videos-title,
    .thought-title,
    .code-title .video-grid .video-container1,
    .video-container2 .video-frame-1,
    .video-frame-2
    /* 
    ====================================
    Post Section
    ====================================
    */

    .thought-list .thought-item
    /* 
    ====================================
    Code Section TODO(xinlongyi): Set up display project
    ====================================
    */

    .code-grid .code-grid div
    /* 
    ====================================
    Footer Section
    ====================================
    */

    .footer-p1,
    .footer-p2,
    .email .footer-p1 .footer-p2,
    .email
}

/*
Below is the view for PHONE. Breakpoint 680px
*/

@media (max-width: 720px) {

    /* Basic seting for the body section */
    body {
        font-family: 'Arial', sans-serif, 'Inter', 'JetBrains Mono';
        background-color: var(--primary-black);
        max-width: 1600px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 52px;
        margin: 0 auto;
    }

    /* 
    ====================================
    Header Section
    ====================================
    */

    header {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .profile {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .profile-img {
        display: none;
    }

    .profile-name {
        font-family: 'JetBrains Mono';
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .profile-nav {
        gap: 10px;
        display: flex;
        align-items: center;
    }
    
    .profile-nav > a[class$="icon"] {
        display: flex;
        width: 24px;
        height: 24px;
        color: var(--primary-white);
        padding: 8px 8px;
        border-radius: 43px;
        border: 1px solid var(--primary-white, #FDFDFD);
    }
    .profile-nav .say-hi-phone {
        display: flex;
        color: var(--primary-white);
        padding: 10px 20px;
        border-radius: 43px;
        border: 1px solid var(--primary-white, #FDFDFD);
        font-family: 'JetBrains Mono';
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    
    .profile-nav > a[class$="text"], a[class$="say-hi-text"] {
        display: none;
    }

    /* 
    ====================================
    Intro Section
    ====================================
    */

    .intro {
        padding-top: 40px;
        padding-bottom: 64px;
    }

    .intro-hi {
        gap: 8px;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .intro-hi-img {
        width: 44px;
        height: 44px;
    }

    .intro-code {
        font-size: 16px;
    }

    .intro-arrow {
        padding-top: 65px;
        font-size: 20px;
    }

    /* 
    ====================================
    Video Section
    ====================================
    */

    .videos,
    .thoughts,
    .code {
        color: var(--primary-white);
        padding-bottom: 60px;
    }


    .video-grid {
        all: initial;
        display: block;
        align-items: center;
        justify-items: center;
    }

    .video-container1,.video-container2 {
        all: initial;
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        padding-top: 20px;
    }

    .video-frame-1,
    .video-frame-2 {
        all: initial;
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        padding-top: 20px;
    }

    /* 
    ====================================
    Post Section
    ====================================
    */

    .thought-list {
        padding-top: 10px;
    }

    .thought-item

    /* 
    ====================================
    Code Section TODO(xinlongyi): Set up display project
    ====================================
    */

    .code-grid {
        padding-top: 160px;
        padding-bottom: 40px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .code-grid div {
        background-color: #333;
        width: 200px;
        height: 150px;
    }


    /* 
    ====================================
    Footer Section
    ====================================
    */

    .footer-p1,
    .footer-p2,
    .email {
        text-align: center;
        font-style: normal;
        line-height: normal;

    }

    .footer-p1 {
        color: var(--primary-white);
        font-family: 'Inter';
        font-size: 24px;
        font-weight: 700;
    }

    .footer-p2,
    .email {
        color: var(--secondary-white);
        font-family: "JetBrains Mono";
        font-size: 16px;
        font-weight: 400;
    }
}