* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000 !important;
    color: #cc9100;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: bold;
    min-height: 100vh;
}


#app{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 55%; 
    margin: 3.5% 0;   
}

.main .logo {
    width: 37%;
}

/* -----------------------------head content----------------------------------- */

.gamecode{
    color: #ffcb48;
    margin: 5% 0 4% 0;
    font-size: 270%;
}

.badge{
    border: 1px solid;
    border-radius: 100rem;
    font-size: 160%;
    letter-spacing: 0.2rem;
    padding: 2% 7%;
}

.title{
    margin: 5% 0 4% 0;
    letter-spacing: 0.5rem;
    font-size: 270%;
}


/* -------------------------------carousel----------------------------- */

.carousel-container {
    position: relative;
    width: 33%;
    /* Show only 1/3 of the screen width */
    margin: 0 auto;
    overflow: hidden;
    display: block;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    transition: opacity 1s ease;
    display: none;
    /* Hide all carousel items by default */
}

.carousel-item.active {
    display: block;
    /* Show the active item */
}

.carousel img {
    width: 100%;
    height: 39rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    object-fit: cover;
}

/* ------------------------------bottom section-------------------------------- */


.desc{
    font-size: 189%;
}

.container{
    width: 90%;
    margin: 8% 0;
}

.container .text-center1{
    width: 100%;
    border: 1px solid;
    border-radius: 4px;
    background: #ffea00;
    color: black;
    margin: -3% 0 5% 0;
    font-size: 170%;
    padding: 3.5% 0;
    box-shadow: 0px -6px 10px rgb(255, 2, 2), 0px 6px 8px rgb(255, 0, 0), 6px 0 8px rgb(255, 6, 6), -6px 0 8px rgba(255, 3, 3, 0.959);
    animation: shine 1s infinite linear;
}

.umur{
    margin-bottom: 6%;
    font-size: 140%;
    color: red;
}

.text-center2 .keren{
    font-size: 170%;
}

.bottom_text1{
    color: red;
    font-size: 140%;
    margin-bottom: 1.1%;
    text-decoration: none;
}

a{
    text-decoration: none;
}
a:visited{
    text-decoration: none;
}
a:checked{
    text-decoration: none;
}

.bottom_text2{
    font-size: 170%;
}

@media (max-width:800px) {

    .main {
        max-width: 96%; 
    }

    .carousel img {
        height: 19rem;
        object-fit: fill;
    }

    .gamecode{
        font-size: 170%;
    }

    .badge{
        font-size: 120%;
    }

    .title{
        font-size: 170%;
    }

    .desc{
    font-size: 110%;
    }
    .umur{
        font-size: 120%;
    }

    .text-center2 .keren{
        font-size: 150%;
    }
    .bottom_text1{
        font-size: 120%;
    }
    .bottom_text2{
        font-size: 140%;
    }

    .container .text-center1{
        font-size: 120%;
        padding: 4% 0;
    }
}

@keyframes shine {
    0%{
         box-shadow: 0px -2px 10px rgb(255, 2, 2), 0px 2px 8px rgb(255, 0, 0), 2px 0 8px rgb(255, 6, 6), -2px 0 8px rgba(255, 3, 3, 0.959);
    }

    50%{
         box-shadow: 0px -5px 10px rgb(255, 20, 235), 0px 5px 8px rgb(255, 20, 235), 5px 0 8px rgb(255, 20, 235), -5px 0 8px rgb(255, 20, 235);
    }

    100%{
         box-shadow: 0px -2px 10px rgb(255, 2, 2), 0px 2px 8px rgb(255, 0, 0), 2px 0 8px rgb(255, 6, 6), -2px 0 8px rgba(255, 3, 3, 0.959);
    }
}