@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

body {
    margin: 0px;
    background-color: #3D3B40;
    color: #FAF7F0;
    overflow-x: hidden;

    font-family: "EB Garamond", serif;
}

a {
    text-decoration: none;
}

nav {
    z-index: 10;
    font-size: 24px;
}

#navbar-mobile, #navbar-open, #li-navbar-close {
    display: none
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}


#skills {
    height: 350vh;
    align-items: center;
}

#skills h2 {
    margin-top: 0px;
    height: 10vh;
}

#skills h3 {
    margin-top: 2vh;
    font-size: 2.2rem;
}

#softeng-skills {
    height: 200vh;
}

#lang-skills {
    height: 100vh;
}

#softeng-skills, #lang-skills {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

#softeng-skills div, #lang-skills div {
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;
    height: 12.5vw;
    width: 12.5vw;
    margin: 2.5vw;
}

#lang-skills div {
    height: 15vw;
    width: 15vw;
    margin: 1vw 5vw;
}

#softeng-skills img, #lang-skills img {
    object-fit: contain;
    height: 10vw;
    width: 10vw;
    padding: 1vw;
    background-color: #181C14;
    border-radius: 15px;
}

#lang-skills img {
    padding: 0.5vw;
}

.container-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

#skill-icons {
    align-items: center;
    height: 300vh;
}

#softeng-skills div, #lang-skills div {
    position: relative;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}

#softeng-skills div::after, #softeng-skills div::before, #lang-skills div::after, #lang-skills div::before {
    content:'';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle) ,transparent, #006AFF);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    border-radius: 16px;
    animation: 1.5s spin linear infinite;
}

.project {
    position: relative;
}

.project::before, .project::after {
    content:'';
    position: absolute;
    height: 102%;
    width: 102%;
    background-image: conic-gradient(from var(--angle), #006AFF ,transparent, #006AFF);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    border-radius: 10vw 0px 10vw 0px;
    animation: 1.5s spin linear infinite;
    filter: blur(1.5rem);
    opacity: 0.6;
}

.project:hover::before {
    background-image: conic-gradient(from var(--angle), #FF4545, #00FF99, #006AFF, #FF0095, #FF4545);
}

#softeng-skills div:hover {
    background-image: conic-gradient(from var(--angle), #FF4545, #00FF99, #006AFF, #FF0095, #FF4545);
    border-radius: 16px;
    animation: 1.5s spin linear infinite;
}

#lang-skills div::after, #lang-skills div::before {
    height: 77%;
    width: 77%;
    background-image: conic-gradient(from var(--angle), #FF4545, #00FF99, #006AFF, #FF0095, #FF4545);
    border-radius: 18px;
}

#softeng-skills div::before, #lang-skills div::before {
    filter: blur(1.5rem);
    opacity: 0.6;
}

#projects {
    height: auto;
    align-items: center;
}

#project-list {
    flex-direction: row;
    justify-content: space-around;
    align-items: start;
    flex-wrap: wrap;
    height: auto;
}

.project {
    width: 80vw;
    height: 70vh;
    background-image: linear-gradient(to top right, rgb(90, 114, 160, 1), rgb(61, 59, 64));

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    padding: 1vw;
    margin-bottom: 5vw;

    border-radius: 10vw 15px 10vw 15px;
}

.even-project {
    background-image: linear-gradient(to bottom left, rgb(90, 114, 160, 1), rgb(61, 59, 64));
}

.project-detail {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 40vw;
}

.thumbnail {
    width: 30vw;
    height: 30vw;
    display:flex;
    justify-content: center;
    align-items: center;
}

.thumbnail img {
    object-fit: contain;
    height: 30vw;
    width: 30vw;
}

.tech-used-icons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.tech-used-icons img {
    width: 10vh;
    height: 10vh;
    object-fit: contain;
}

.project-detail .project-title {
    font-size: 2.2rem;
    text-align: center;
}

.button-visit-project, .button-view-project {
    background-color: #54C392;
    color: #FAF7F0;
    width: 30vw;
    text-align: center;
    padding: 1vw;
    margin-top: 3vw;
    border-radius: 15px;
    font-size: 1.5rem;
    height: 3vh;
    display:flex;
    justify-content: center;
    align-items: center;
}

.button-visit-project:hover {
    background-color: #468585;
}

.button-view-project {
    background-color: #FFDC7F;
    color: #3D3B40;
    margin-top: 2vw;
}

.button-view-project:hover {
    background-color: #FFAD60;
}

.contact {
    width: 70vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2vw;
    margin-top: 3vw;
}

.contact a, .contact div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #FAF7F0;
}

.contact img {
    height: 50px;
    width: 50px;
    margin-right: 15px;
}

footer {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    background-color: #3D3B40;
    color: #FAF7F0;
    border-top: #FAF7F0 solid;
    height: auto;
}

@media screen and (max-width: 480px) {
    /* Smartphone */
    /* Styles for small screens */
    /* Tes: Galaxy S5 & iPhone 12 Pro*/

    h1 {
        font-size:60px;
        margin: 0px;
    }
    
    h2 {
        font-size: 40px;
        color: #FAF7F0;
    }
    
    #hero-title p, h3 {
        font-size: 20px;
        margin: 0px;
    }

    nav {
        height: 50px;
        width: 100vw;
        position: fixed;
        display: flex;
        justify-content: end;
        background-color: #3D3B40;
        border-bottom: 1px solid #FAF7F0;
    }
    
    nav > ul {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: #3D3B40;
        margin: 0px;
    }
    
    nav ul {
        display: none;
        list-style-type: none;
        z-index: 10;
    }

    #navbar-open, #navbar-close {
        display: block
    }

    #navbar-open {
        margin-right: 5vw;
        height: 50px;
        display: flex;
        align-items: center;
        position:fixed;
    }

    #li-navbar-close {
        display: flex;
        justify-content: end;
        padding-top: 20px;
    }

    #navbar-mobile:checked ~ ul {
        display: flex;
    }

    #navbar-mobile:checked ~ #overlay {
        height: 100%;
        width: 100%;
        position: fixed;
        top:0;
        left:0;
    }

    #navbar-open, #navbar-close {
        margin-right: 10vw;
        font-size: 20px;
    }

    #li-navbar-close:hover {
        color: #A04747;
        cursor: pointer;
        font-weight: bold;
    }

    nav li {
        padding-right: 30vw;
        background-color: #3D3B40;
        padding-top: 50px;
        width: 100%;
    }

    nav a {
        color: #FAF7F0;
        font-size: 25px;
    }
    
    nav a:hover {
        color: #D8D2C2;
    }
    
    #hero-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20px;
        width:600px;
        margin-top: 15vh;
        
        color: rgb(61, 59, 64);
    }

    #hero-title > h1 {
        width:500px;
    }

    #hero-title > p {
        width:210px;
    }
    
    main {
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 100vh;
        width: 100vw;
    
        overflow-x: hidden;
    }
    
    .hero-section {
        background-image: linear-gradient(to top, rgb(227,219,217,1) 15%, rgb(255,255,255,0.1) 79%, rgb(227,219,217,1)), url("asset/img/StevenTjhia.webp");
        background-size: cover;
        background-position: -200px 100px;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: start;
        overflow-x: hidden;
    
        background-attachment: fixed;
    
        scroll-snap-align: start;
    }
    
    .container-section {
        height: 100vh;
        padding-left: 60px;
        padding-right: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    
        scroll-snap-align: start;
    }

    #about-me {
        background-image: linear-gradient(to right, rgb(61, 59, 64), rgb(61, 59, 64, 0.5), rgb(61, 59, 64)), url("asset/img/Ven.webp");
        object-fit: cover;
        background-repeat: no-repeat;
        background-size: auto 100vh;
        background-position: right;

        background-attachment: fixed;
    }
    
    .container-section p {
        display: flex;
       font-size: 13px;
       text-align: justify;
    }
    
    .container-section h2 {
        margin-top: 5vh;
        margin-bottom: 2vh;
        height: 15vh;
    }
    
   .container-section header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
    }

   .container-section h2 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
    }
    
    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        scroll-snap-align: start;
        padding: 2vw;
    }

    #skills {
        height: auto;
        height: 115vh;
        justify-content: start;
    }

    #skills h2 {
        margin-top: 32px;
        margin-bottom: 0px;
    }

    #skills h3 {
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 1.5rem;
    }

    #softeng-skills, #lang-skills {
        height: auto;
        border-radius: 20px;
        overflow-y: scroll;
        height: 30vh;
        padding: 15px;
    }

    #softeng-skills div, #lang-skills div {
        height: 25vw;
        width: 25vw;
    }

    #lang-skills div {
        margin: 2.5vw;
    }

    #softeng-skills img, #lang-skills img {
        height: 20vw;
        width: 20vw;
        padding: 1.5vw;
    }
    
    #skill-icons {
        height: auto;
    }

    #lang-skills div::after, #lang-skills div::before {
        height: 100%;
        width: 100%;
    }
    
    .project {
        flex-direction: column;
        justify-content: start;
    }
    
    .thumbnail {
        width: 60vw;
        height: 60vw;
        margin-top: 3vh;
    }
    
    .thumbnail img {
        object-fit: contain;
        height: 60vw;
        width: 60vw;
    }
    
    .tech-used-icons {
        width: 80vw;
    }

    .tech-used-icons img {
        height: 15vw;
        width: 15vw;
        padding: 1vw;
        object-fit: contain;
    }
    
    .project-detail .project-title {
        font-size: 1.5rem;
        width: 70vw;
        justify-content: center;
    }
    
    .button-visit-project, .button-view-project {
        font-size: 1rem;
        width: 65vw;
        height: 3.5vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .contact {
        flex-direction: column;
    }
    
    .contact a, .contact div {
        padding: 1vw;
    }
    
    .contact img {
        height:20px;
        width:20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1020px) {
    /* Tablet */
    /* Styles for medium screens */
    /* Tes: iPad Air & iPad Mini */
    /* Hero & About Me tidak ada perubahan dengan yang laptop */

    h1 {
        font-size:80px;
        margin: 0px;
    }
    
    h2 {
        font-size: 30px;
        color: #FAF7F0;
    }
    
    #hero-title p, h3 {
        font-size: 15px;
        margin: 0px;
    }
    
    nav {
        height: 50px;
        width: 100vw;
        position: fixed;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color: #3D3B40;
        border-bottom: 1px solid #FAF7F0;
    }
    
    nav > ul {
        display: flex;
        justify-content: space-around;
        margin: 0px;
        width: 100vw;
    }
    
    nav ul {
        list-style-type: none;
    }
    
    nav a {
        color: #FAF7F0;
    }
    
    nav a:hover {
        color: #D8D2C2;
    }
    
    #hero-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 130px;
        width:420px;
        
        color: rgb(61, 59, 64);
    }

    #hero-title > p {
        width:300px;
    }
    
    main {
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 100vh;
        width: 100vw;
    
        overflow-x: hidden;
    
    }
    
    .hero-section {
        background-image: linear-gradient(to right, rgb(255,255,255,0.4), rgb(255,255,255,0.1)), url("asset/img/StevenTjhia.webp");
        background-size: cover;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        overflow-x: hidden;
    
        background-attachment: fixed;
    
        scroll-snap-align: start;
    }
    
    .container-section {
        height: 100vh;
        padding-left: 100px;
        padding-right: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    
        scroll-snap-align: start;
    }
    
    #about-me {
        background-image: linear-gradient(to right, rgb(61, 59, 64) 50%, rgb(255,255,255,0.1)), url("asset/img/StevenTjhia_AboutMe.webp");
        object-fit: cover;
        background-repeat: no-repeat;
        background-size: auto 100vh;
        background-position: right;

        background-attachment: fixed;
    }
    
    .container-section p {
       font-size: 2vh;
       text-align: justify;
    }
    
    .container-section h2 {
        margin-top: 10vh;
        margin-bottom: 2vh;
        height: 15vh;
    }
    
    #about-me p {
        width: 55vw;
    }
    
    footer {
        height: auto;
        padding-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        scroll-snap-align: start;
    }

    .tech-used-icons img {
        width:7vw;
    }
    
    .project-detail .project-title {
        font-size: 1.5rem;
    }
    
    .button-visit-project, .button-view-project {
        width:20vw;
        font-size: 20px;
    }

    .contact {
        width: 90vw;
    }

}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
    /* Laptop */
    /* Styles for large screens */
    /* Test: 1046 x 524 */
    
    h1 {
        font-size:80px;
        margin: 0px;
    }
    
    h2 {
        font-size: 30px;
        color: #FAF7F0;
    }
    
    #hero-title p, h3 {
        font-size: 15px;
        margin: 0px;
    }
    
    nav {
        height: 50px;
        width: 100vw;
        position: fixed;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color: #3D3B40;
        border-bottom: 1px solid #FAF7F0;
    }
    
    nav > ul {
        display: flex;
        justify-content: space-around;
        margin: 0px;
        width: 100vw;
    }
    
    nav ul {
        list-style-type: none;
    }
    
    nav a {
        color: #FAF7F0;
    }
    
    nav a:hover {
        color: #D8D2C2;
    }
    
    #hero-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 130px;
        width:420px;
        
        color: rgb(61, 59, 64);
    }

    #hero-title > p {
        width:300px;
    }
    
    main {
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 100vh;
        width: 100vw;
    
        overflow-x: hidden;
    
    }
    
    .hero-section {
        background-image: linear-gradient(to right, rgb(255,255,255,0.4), rgb(255,255,255,0.1)), url("asset/img/StevenTjhia.webp");
        background-size: cover;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        overflow-x: hidden;
    
        background-attachment: fixed;
    
        scroll-snap-align: start;
    }
    
    .container-section {
        height: 100vh;
        padding-left: 100px;
        padding-right: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    
        scroll-snap-align: start;
    }
    
    #about-me {
        background-image: linear-gradient(to right, rgb(61, 59, 64) 50%, rgb(255,255,255,0.1)), url("asset/img/StevenTjhia_AboutMe.webp");
        object-fit: cover;
        background-repeat: no-repeat;
        background-size: auto 100vh;
        background-position: right;

        background-attachment: fixed;
    }
    
    .container-section p {
       font-size: 2vh;
       text-align: justify;
    }
    
    .container-section h2 {
        margin-top: 10vh;
        margin-bottom: 2vh;
        height: 15vh;
    }
    
    #about-me p {
        width: 55vw;
    }
    
    footer {
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        scroll-snap-align: start;
    }

    .tech-used-icons img {
        width:7vw;
    }
    
    .project-detail .project-title {
        font-size: 1.5rem;
    }
    
    .button-visit-project, .button-view-project {
        width:20vw;
        font-size: 20px;
    }
}

@media screen and (min-width: 1200px) {
    /* current dekstop */
    /* Styles for extra large screens */
    /* Test: original desktop */
    
    h1 {
        font-size:100px;
        margin: 0px;
    }
    
    h2 {
        font-size: 50px;
        color: #FAF7F0;
    }
    
    #hero-title p, h3 {
        font-size: 25px;
        margin: 0px;
    }
    
    nav {
        height: 55px;
        width: 100vw;
        position: fixed;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color: #3D3B40;
        border-bottom: 1px solid #FAF7F0;
    }
    
    nav > ul {
        display: flex;
        justify-content: space-around;
        margin: 0px;
        width: 100vw;
    }
    
    nav ul {
        list-style-type: none;
    }
    
    nav a {
        color: #FAF7F0;
    }
    
    nav a:hover {
        color: #D8D2C2;
    }
    
    #hero-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 130px;
        width:540px;
        
        color: rgb(61, 59, 64);
    }
    
    main {
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 100vh;
        width: 100vw;
    
        overflow-x: hidden;
    
    }
    
    .hero-section {
        background-image: linear-gradient(to right, rgb(255,255,255,0.4), rgb(255,255,255,0.1)), url("asset/img/StevenTjhia.webp");
        background-size: cover;
        background-position: 0px -150px;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        overflow-x: hidden;
    
        background-attachment: fixed;
    
        scroll-snap-align: start;
    }
    
    .container-section {
        height: 100vh;
        padding-left: 100px;
        padding-right: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    
        scroll-snap-align: start;
    }
    
    #about-me {
        background-image: linear-gradient(to right, rgb(61, 59, 64) 50%, rgb(255,255,255,0.1)), url("asset/img/StevenTjhia_AboutMe.webp");
        object-fit: cover;
        background-repeat: no-repeat;
        background-size: auto 100vh;
        background-position: right;

        background-attachment: fixed;
    }
    
    .container-section p {
       font-size: 20px;
       text-align: justify;
    }
    
    .container-section h2 {
        margin-top: 10vh;
        margin-bottom: 2vh;
        height: 15vh;
    }
    
    #about-me p {
        width: 55vw;
    }
    
    footer {
        font-size: 30px;
    }
}