/*Import Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Double:wght@100..900&family=Datatype:wdth,wght@50..150,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Silkscreen:wght@400;700&display=swap');

/*Styling scrollbar*/
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: darkgreen;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #4caf50;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #4caf50;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: darkgreen;
}

* {
    font-family: "Poppins", sans-serif;
}

body {
    overflow: hidden;
}

/*Put default css from assignment module 1*/

#profile img {
    max-width: 200px;
    max-height: 200px;
    height: auto;
}

.datatype-font-regular {
    font-family: "Datatype", monospace;
    font-weight: 400;
}

.datatype-font-bold {
    font-family: "Datatype", monospace;
    font-weight: 700;
}

.bitcount-font-bold {
    font-family: "Bitcount Prop Double", sans-serif;
    font-weight: 700;
}

.bitcount-font-regular {
    font-family: "Bitcount Prop Double", sans-serif;
    font-weight: 400;
}

.silkscreen-regular {
    font-family: "Silkscreen", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.silkscreen-bold {
    font-family: "Silkscreen", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.share-tech-mono-regular {
    font-family: "Share Tech Mono", monospace;
    font-weight: 400;
    font-style: normal;
}



/*Hero Section*/

#hero {
    background-image: url("pictures/hero_image_green.png");
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

/*Projects List*/
#project-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

#welcome_greet {
    white-space: nowrap;
    overflow: hidden;
    border-right: 0.1em solid darkgreen;
    animation: typing 3s steps(30, end), blink-caret 0.75s step-end infinite;
}

.fade {
    animation: fadeTransition 0.5s ease-in-out;
}

.fade-loading {
    animation: fadeLoading 0.5s ease-in-out forwards;
}

.dark .lampuRusak {
    animation: lampuMatiNyala 5s infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: darkgreen;
    }
}

@keyframes fadeTransition {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeLoading {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        display: none;
    }
}

@keyframes lampuMatiNyala {

    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        box-shadow: 0 0 10px 5px rgba(34, 197, 94, 0.5);
    }

    20%, 24%, 55% {
        box-shadow: none;
    }
}

/*Tablet*/
@media screen and (max-width: 768px) {
    #hero {
        height: auto;
        min-height: 350px;
    }

    #project-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    #welcome_greet {
        white-space: nowrap;
        overflow: hidden;
    }
}

/*Smartphone*/
@media screen and (max-width: 480px) {
    #project-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #welcome_greet {
        white-space: normal;
    }
}