@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

* {
    margin: 0px;
    box-sizing: border-box;
    color: black;
    text-decoration: none;
    /* font-family: 'Times New Roman', Times, serif; */
    font-family: 'Poppins', Tahoma ,sans-serif;
}

body {
    width: 100%;
    height: auto;
    display: flexbox;
    overflow-x: hidden;
}

/* ###################################################################################################### */
/* header */
header {
    z-index: 10;
    background-color: #0a8f85;
    width: 100%;
    height: 50px;
    padding: 0px 2%;
    margin-top: 0px;
    position: fixed;
    top: 0px;
    display: grid;
    align-items: center;
    grid-auto-flow: column;
}

.header-back {
    width: 15%;
    height: 70%;
    padding: 10px;
    position: absolute;
    text-align: center;
    left: 2%;
}

.header-title{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}

.header-back, .header-back a, .header-title {
    color: white;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-back a {
    font-size: 30px;
    font-weight: bold;
    padding: 0px 20%;
    border-radius: 20px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1);
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    background-color: #008081;
}

/* ###################################################################################################### */
/* main */
main {
    background-color: #efefef;
    width: 100%;
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 50px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-template-rows: auto;
    grid-auto-flow: row;
    row-gap: 50px;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: flex-start;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* container */
.container {
    width: auto;
    height: 300px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1);
}

.container-image img {
    height: 200px;
}

.container-text {
    width: auto;
    height: 100%;
}

.container-text h1, .container-text h4 {
    width: auto;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-text h4 {
    height: 10%;
    justify-content: left;
}

.container-text p {
    text-align: justify;
    padding-right: 5%;
    color: rgba(0, 0, 0, 0.8);
}

/* span-1 */
.span-1 .container-image {
    display: flex;
    justify-content: center;
}

.span-1 .container-text p {
    display: none;
}

.span-1 .container-text h4 {
    display: flex;
    justify-content: center;
}

/* span-2 */
.span-2 {
    grid-column: span 2;
}

.span-2 img {
    height: 300px;
    float: left;
}

/* span-4 */
.span-4 {
    grid-column: span 4;
}

.span-4 .container-image {
    width: 30%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.span-4 img {
    height: 100%;

}

.span-4 .container-text h1 {
    height: 100%;
    font-size: 100px;
    text-align: center;
}

.project {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ###################################################################################################### */
/* footer */
footer {
    background-color: #1e293b;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon {
    width: auto;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: width 0.3s ease;
    gap: 15px;
}

.icon a, .icon i {
    color: white;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon a {
    width: 80px;
    height: 40px;
    padding: 0px 10px;
    font-size: 24px;
    border-radius: 30px;
    /* border: 1px solid; */
}

.icon i {width: 40px; opacity: 0.5; transition: all 0.5s ease;}

.icon a p {
    display: none;
    color: white;
    opacity: 0;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

.icon a:hover {
    /* width: 150px; */
    background-color: #2c3d57c9;
}

.icon a:hover p {
    /* display: flex; */
    opacity: 1;
}

.icon a:hover i {
    opacity: 1;
}

/* ###################################################################################################### */
/* sudo */
.container, .header-back {
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* agar lebih halus */
} 
.container:hover {
    background-color: darkgrey;
    transform: scale(0.9); /* mengubah ukuran div menjadi lebih kecil */
}
.container.active {
    background-color: darkgrey;
    transform: scale(0.9); /* mengubah ukuran div menjadi lebih kecil */
}

.header-back a:hover {
    background-color: #0081818c;
    transform: scale(0.95);
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.05);
}

header .header-title a {
    opacity: 100%;
    color: white;
    transition: color 0.3s ease;
}
header .header-title a:hover {
    color: red;
}

/* menhilangkan efek biru pada saat klik link di mobile */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

/* media */
@media only screen and (max-width:1200px) {
    .span-1 {
        grid-column: span 2;
    }
    .span-2 {
        grid-column: span 4;
    }

    .span-1 .container-image {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .span-4 {grid-column: span 4;overflow: scroll;display: flex;flex-wrap: wrap;flex-direction: column;}
    .span-4 .container-image img {height: 300px;padding: 8%;float: left;}
    .span-4 .container-text {width: 100%;}
    .span-4 .container-image {width: 300px;}
    .span-4 .container-image img {padding: 8%;width: 300px;}
    .container {display: grid;grid-template-columns: auto auto;justify-content: flex-start;overflow: hidden;}
    .span-4 .container-text h1 {width: auto;height: 20%;font-size: 2em;display: flex;align-items: center;justify-content: center;}

    .span-1 .container-text p {
        display: block;
    }

}

@media only screen and (max-width:900px) {
    .span-1, .span2, .span-4 {
        grid-column: span 4;
        overflow: scroll;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    
    .span-1 .container-image {
        height: auto;
    }

    .span-1 .container-image img, .span-4 .container-image img {
        height: 300px;
        padding: 8%;
        float: left;
    }

    .span-1 .container-image, .span-4 .container-image {
        display: flex;
        justify-content: flex-start;
    }

    .container {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: flex-start;
        overflow: hidden;
    }

    .span-1 .container-text, .span-4 .container-text {
        width: 100%;
    }

    .span-1 .container-text p {
        display: block;
    }
    
    .span-1 .container-text h4 {
        display: block;
        justify-content: center;
    }

    .span-4 .container-image {
        width: 300px;
    }

    .span-4 .container-image img {
        padding: 8%;
        width: 300px;
    }

    .span-4 .container-text h1 {
        width: auto;
        height: 20%;
        font-size: 2em;
        display: flex;
        align-items: center;
        justify-content: center;    
    }
}


@media only screen and (max-width:700px) {
    .container {
        height: 100px;
    }

    .span-1 .container-image, .span-2 .container-image, .span-4 .container-image {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .span-1 .container-image img, .span-2 .container-image img, .span-4 .container-image img {
        width: 100px;
        height: 100px;
    }

    .container-text {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;

        /* border: 1px solid; */
    }
    
    /* h1 */
    .container-text h1, #h1 {
        width: 100%;
        height: 50px;
        font-size: 28px;
    }

    #h1 {
        font-size: 24px;
    }

    /* h4 */
    .span-1 .container-text h4, .span-2 .container-text h4 {
        display: flex;
        align-items: center;
    }

    .container-text h4 {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    /* p */
    .container-text p, .span-1 .container-text p {
        display: none;
    }

    .container {
        display: grid;
        grid-template-columns: 30% 70%;
        padding: 0px;
    }

    /* footer */
    .icon {
        justify-content: space-evenly;
    }

    .icon a {
        border-radius: 90px;
        width: 40px;
    }

    .icon a:hover {
        width: 40px;
        transform: scale(1.2);
    }

    .icon a:hover p {
        display: none;
        opacity: 1;
    }
}