#br {
    margin: auto;
    max-width: 800px;
    width: 800px;
    text-align: center;
    background-color: #13131b;
    color: white;
    border-radius: 10px;
}

.brIcon {
    width: 50px;
    height: auto;
}

.brItems {
    margin-top: 20px;
    width: 140px;
    height: auto;
}

.sp1 {
    display: flex;
    align-items: center; 
    gap: 20px; 
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.sp1 > p{
    font-size: 50px;
    margin-bottom: 0px;
}

#storms {
    color: #aa2ffd;
}

#rangletrasok {
    width: 800px;
}

#itemek, #rangletrasok {
    margin: 20px auto;
    border: none;
    text-align: center;
    font-size: 20px;
    border-radius: 10px;
}

#itemek td, #itemek th, #rangletrasok td,  #rangletrasok th {
    height: 35px;
    width: 25%;
}
#itemek tr:nth-child(3n+1), #rangletrasok tr:nth-child(3n+1) {
    background-color: #7e4b7f;
    color: black;
}
#itemek tr:nth-child(3n+2), #rangletrasok tr:nth-child(3n+2){
    background-color: #4e0ea7;
    color: rgb(230, 230, 230);
}
#itemek tr:nth-child(3n+3), #rangletrasok tr:nth-child(3n+3){
    background-color: #4958ff;
}

h2 {
    margin-top: 150px;
    text-align: center;
    color: #ffffff;
}

#br > h2 {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    background-color: #230b41;
    min-height: 200px;
    height: 200px;
    margin: auto;
    line-height: 1.2;
    white-space: pre-wrap;
    text-overflow: ellipsis;
}

#game {
    max-width: 800px;
    width: 800px;
    height: auto;
    border-radius: 20px;
    margin: auto;
}

#health {
    height: 50px;
    background-color: rgb(0, 177, 15) !important;

    font-size: 25px;
}

.progress {
    height: 50px;
}

#b1, #b2, #b3 {
    display: flex;
    border-radius: 10px;
    background-color: white;
    border: none;
    width: auto;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    padding: 5px;
    min-width: 100px;
    height: 50px;
    justify-content: center;
    align-items: center;


    transition: background-color .2s;
}


#b1:hover, #b2:hover, #b3:hover {
    background-color: rgba(150, 0, 191, 0.77);
    color: white;
}

#b3 {
    display: none;
}

body {
    background: linear-gradient(to right, #191a29 0%, #2d1f3e 20%, rgb(68, 48, 82) 40%, #191a29 80%,  #2d1f3e 100%);
    background-size: 500% auto;
    animation: storm 20s ease-in-out infinite;
}

@keyframes storm {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}


@media screen and (max-width: 768px) { 
    #rangletrasok {
        width: 350px;
    }

    #br {
        width: 350px;
    }

    #game {
        width: 350px;
    }

    #b1, #b2, #b3 { 
        font-size: 15px;
    }

    .brIcon, #storms, #elims {
        width: 40px;
        height: auto;
        font-size: 30px;
    }

    #gameText {
        font-size: 16px !important;
    }

    .brItems {
        width: 60px;
        height: auto;
    }

    .sp1 {
        gap: 10px;
    }

}