* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
    user-select: none;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a {
    text-decoration: none;
}

body {
    background: linear-gradient(135deg, #0a0f2c, #1c2340);
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Header */
header {
    background: rgba(10, 15, 44, 0.9);
    padding: 20px;
}

.logo {
    max-width: 200px;
}

/* Hero */
.hero {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px 20px;
    background: rgba(10, 15, 44, 0.85);
    box-shadow: 0px 0px 20px gold;
}

.banner_container {
    width: 40%;
}

.banner_container img {
    width: 100%;
    border-radius: 10px;
    border: 2px solid #d4af37;
}

.hero h1 {
    font-size: 42px;
    color: gold;
    text-shadow: 3px 3px 15px gold;
}

/* Button */
.button_container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.btn {
    width: 17.5%;
    display: inline-block;
    padding: 15px 30px;
    margin-top: 20px;
    font-size: 20px;
    background: linear-gradient(135deg, #f1c40f, #ffdd44);
    color: navy;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0px 0px 15px gold;
}

/* Sosmed */
.sosmed {
    width: 10%;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0.5%;
}

.sosmed a {
    width: 100%;
}

.sosmed img {
    width: 100%;
}

/* Content */
.content {
    padding: 50px 20px;
    text-align: left;
    max-width: 800px;
    margin: auto;
}

.content h2 {
    color: gold;
}

.content p {
    text-align: justify;
}

@media screen and (max-width: 1020px) {




    /* Hero */


    .banner_container {
        width: 100%;
        max-width: 500px;
    }


    .hero h1 {
        font-size: 30px;
    }

    /* Button */


    .btn {
        width: 100%;
    }

    /* Sosmed */
    .sosmed {
        width: 60%;
        max-width: 175px;
    }


    /* Content */
    .content {
        padding: 50px 20px;
        text-align: left;
        max-width: 800px;
        margin: auto;
    }

    .content h2 {
        margin-bottom: 1%;
    }
}