* {
    margin: 0;
    padding: 0;    
    box-sizing: border-box;
    text-decoration: none;
    /* border: solid 1px #fff; */
    outline: none;
    scroll-behavior: smooth;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    background-color: #f3f3f3;
    color: white;
}

section {
    min-height: 100rem;
    padding: 10rem 9% 2rem;
}

header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    background-color: #151515;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

header .logo {
    display: flex;
    align-items: center;
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    cursor: default;
    margin-left: -3%;
}

header i {
    color: white;
    margin-right: 0.8rem;
}

.navbar a {
    color: white;
    margin-left: 4rem;
    font-size: 1.4rem;
    transition: .5s;
    font-weight: 500;
}

.navbar a:hover,
.navbar .active {
    color: #F8BD00;
    text-shadow: 0 0 0.3em #F8BD00;
}

.logo .dot {
    color: #4359FF;
    font-size: 1.6rem;
}

.logo .ku {
    color: #F8BD00;
}

.btn {
    display: inline-block;
    padding: 1rem 2.8rem;
    background-color: white;
    border: solid white .2rem;
    border-radius: 4rem;
    font-size: 1.6rem;
    color: #151515;
    letter-spacing: .01rem;
    font-weight: 700;
    transition: .5s ease;
    filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.25));
}

.btn:hover {
    background-color: #F8BD00;
    box-shadow: 0 0 1rem #F8BD00;
    border: solid #F8BD00 .2rem;
}

.home {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url('/img/main-bg.png') no-repeat center center/cover;;
}

.home-container {
    width: 100rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-img {
    width: 50%;
}

.home-img img {
    max-width: 100%;
}

.home-content {
    width: 50%;
}

.home-content h1 {
    color: white;
    font-size: 5.6em;
    font-weight: 700;
    line-height: 1.2;
    text-align: start;
}

.home-content #baris1 {
    color: #151515;
}

.home-content #baris3 {
    color: #F8BD00;
}

.home-content p {
    margin-top: 1.5rem;
    color: white;
    font-size: 2.3rem;
    font-weight: 300;
    text-align: justify;
}

.main-button a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    font-weight: 600;
    margin: 3rem 1.5rem 3rem 0;
    transition: .5s ease;
}

#download {
    background-color: #151515;
    border: solid #151515 .2rem;
    color: white;
}

#download:hover {
    box-shadow: 0 0 1rem white;
    border: solid #151515 .2rem;
}

#download i {
    margin-right: 1rem;
}

.streak {
    display: flex;
    position: relative;
}

.streak-image {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 1rem;
}

.streak-image img {
    height: 50%;
    margin-left: 0.1em;
    object-fit: cover;
}

.streak h1 {
    color: #151515;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.2;
    align-items: end;
    text-align: end;
}

.streak p {
    color: #151515;
    font-size: 2.3rem;
    font-weight: 300;
    align-items: start;
    text-align: justify;
}

.streak span {
    color: #ff6f00;
    text-shadow: #ff6f00;
}

.streak-container {
    width: 100rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.streak-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.streak-fire {
    margin-top: 5rem;
    filter: drop-shadow(0px 0px 100px rgba(255, 111, 0, 100));
    text-align: center;
}

.streak-fire img {
    width: 30em;
    filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.25));
}

.streak-fire p {
    margin-top: 2rem;
    font-size: 3.6rem;
    font-weight: 600;
}

.streak-fire span {
    font-size: 6rem;
    font-weight: 700;
}

.kategori {
    background: linear-gradient(to bottom, #151515, #3c3c3c);
    display: flex;
    position: relative;
}

.kategori-container {
    backdrop-filter: blur(128.8px);
    box-shadow: 0px 0px 30px rgba(227, 228, 237, 0.37);
    border: 2px solid rgba(255, 255, 255, 0.18);
    width: 100rem;
    height: 50rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3.5rem;
    box-shadow: 
        inset 64.4px -64.4px 64.4px rgba(165, 165, 165, 0.1),
        inset -64.4px 64.4px 64.4px rgba(255, 255, 255, 0.1);
    gap: 3rem;
}

.kategori-icon {
    display: flex;
    position: absolute;
    bottom: -12rem;
    left: 25%;
    height: 60%;
    transform: rotate(-5deg);
}

.kategori-content {
    display: flex;
    flex-direction: column;
    width: 32rem;
}

.kategori-content h1 {
    color: white;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.kategori-content p {
    margin-top: 2rem;
    font-size: 1.6rem;
    font-weight: 300;
    text-align: justify;
}

.kategori-image img {
    width: 60rem;
}

.kalender {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 12rem;
}

.kalender-container {
    display: flex;
    flex-direction: column;
    width: 55rem;
    gap: 1.5rem;
}

.kalender-title h1 {
    color: #151515;
    font-size: 4.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.kalender-title span {
    color: red;
}

.kalender-image img {
    width: 35rem;
}

.kalender-content {
    display: flex;
}

.kalender-content p {
    color: #151515;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 2.9rem;
}

.kalender-content img {
    min-width: 25rem;
    height: auto;
}

.banner {
    background: linear-gradient(to bottom, #f3f3f3, #F8BD00);
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
}

.banner h1 {
    margin-top: 15rem;
    color: white;
    text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.banner-image {
    display: flex;
    position: absolute;
    bottom: 0rem;
}

.banner img {
    width: 100%;
    max-width: 200rem;
}

.footer {
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem 9%;
    background: #151515;
}

.footer-text p {
    font-size: 1.6rem;
}

.footer-iconTop a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .8rem;
    background: white;
    border-radius: 50%;
    transition: .5s ease;
}

.footer-iconTop a:hover {
    box-shadow: 0 0 1rem #F8BD00;
    background-color: #F8BD00;
}

.footer-iconTop a i {
    font-size: 2.4rem;
    color: #151515;
}

@media screen and (max-width: 768px) {
    .navbar {
        display: none;
    }

    /* Home Page */
    .home-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .home-content {
        width: 100%;
    }
    .home-img {
        order: -1;
        width: 80%;
    }
    .home-content h1 {
        font-size: 4.6rem;
    }
    .home-content p {
        font-size: 1.5rem;
    }
    .main-button a {
        display: flex;
        gap: 0rem;
    }

    /* Streak */
    .streak-image {
        display: none;
    }
    .streak-fire img {
        width: 20rem;
    }
    .streak-fire p {
        font-size: 2.6rem;
    }
    .streak-fire span {
        font-size: 3.8rem;
    }
    .streak-content h1 {
        font-size: 3.2rem;
    }
    .streak-content p {
        font-size: 1.5rem;
    }

    /* Kategori */
    .kategori-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height:fit-content;
        padding: 3rem;
    }
    .kategori-image img{
        order: -1;
        width: 30rem;
    }
    .kategori-icon {
        height: 40%;
        left: -15%;
    }

    /* Kalender */
    .kalender {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5rem;
        width: 100%;
    }
    .kalender-image {
        order: -1;
    }
    .kalender-image img {
        width: 20rem;
    }
    .kalender-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .kalender-content {
        max-width: 40rem;
    }
    .kalender-content img {
        display: none;
    }

    /* Banner */
    .banner-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }

    .footer-text p {
        font-size: 1rem;
    }
}