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

*{  
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html {
    scroll-behavior: smooth;
}
body{
    background: url(/Esport/oldalak/img/Szabalyzat.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.wrapper{   
    justify-content: center;
    align-items: center;
    min-height: 110vh;
    background: rgba(0, 0, 0, 0.4);
}
.nav{
    font-size: 0.8vw;
    position: fixed;
    display: flex;
    justify-content: space-around;
    width: 100vw;
    height: 5.2vw;
    line-height: 5.2vw;
    background: linear-gradient(rgb(0, 0, 0), transparent);
    backdrop-filter: blur(3px) ;
    z-index: 100;
}
.nav-logo img{
    width: 8.3vw;
    height: 5.7vw;
    margin-right: 17.7vw;
    margin-top: -0.1vw;
}
.nav-menu ul{
    margin-left: -13vw;
    display: flex;

}
.nav-menu ul li{
    list-style-type: none;
}
.nav-menu ul li .link{
    text-decoration: none;
    color: #fff;
    padding-bottom: 0.7vw;
    margin: 0 1.3vw;
}
.nav a.active {
    border-bottom: 0.13vw solid white;
}
.link:hover, .active{
    border-bottom: 0.14vw solid #fff;
}
.nav-button .btn{
    width: 6.7vw;
    height: 2vw;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    border-radius: 1.5vw;
    cursor: pointer;
    transition: .3s ease;
}
.btn:hover{
    background: rgba(255, 255, 255, 0.2);
}
.btn.white-btn{
    font-size: 0.7vw;
    background: rgba(255, 255, 255, 0.8);
}
.btn.btn.white-btn:hover{
    background: rgba(255, 255, 255, 0.5);
}
.nav-menu-btn{
    display: none;
}
.linkregisztracio{
    text-decoration: none;
    color: #fff;
    padding-bottom: 15px;
    margin: 0 25px;
    visibility:hidden;
}
.cím{
    font-size: 3.5vw;
    color: white;
    text-align: center;
    margin-top: 15vw
}
.flex-container{
    gap: 1vw;
    margin-top: 10vw;
    color: white;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.Szabalyok-cím{
    text-align: center;
    margin-left: 1.5vw;
    width: 48%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4vw;
    padding: 2vw;
    border: 0.2vw dashed rgba(255, 255, 255, 0.7);
    font-size: 2.5vw;
} 
.szabalyok{
    text-align: left;
    margin-left: 3vw;
    font-size: 0.9vw;
}
.Vs-cím{
    text-align: center;
    width: 48%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4vw;
    padding: 2vw;
    border: 0.2vw dashed rgba(255, 255, 255, 0.7);
    font-size: 2.5vw;
}
.Vs{
    text-align: left;
    margin-left: 3vw;
    font-size: 1vw;
}
.Termi-cím{
    text-align: center;
    margin-left: 1.5vw;
    width: 48%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4vw;
    padding: 2vw;
    border: 0.2vw dashed rgba(255, 255, 255, 0.7);
    font-size: 2.5vw;
}
.Termi{
    text-align: left;
    margin-left: 3vw;
    font-size: 1vw;
}
.Eltiltasok-cím{
    text-align: center;
    width: 48%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4vw;
    padding: 2vw;
    border: 0.2vw dashed rgba(255, 255, 255, 0.7);
    font-size: 2.5vw;
}
.Eltiltasok{
    text-align: left;
    margin-left: 3vw;
    font-size: 1vw;
}
.Jatekmenet-cím{
    text-align: center;
    margin-left: 1.5vw;
    width: 48%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4vw;
    padding: 2vw;
    border: 0.2vw dashed rgba(255, 255, 255, 0.7);
    font-size: 2.5vw;
}
.Jatekmenet{
    text-align: left;
    margin-left: 3vw;
    font-size: 0.81vw;
}
.Pause-cím{
    text-align: center;
    width: 48%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4vw;
    padding: 2vw;
    border: 0.2vw dashed rgba(255, 255, 255, 0.7);
    font-size: 2.5vw;
}
.Pause{
    text-align: left;
    margin-left: 3vw;
    font-size: 0.81vw;
}
.Surrender-cím{
    text-align: center;
    margin-left: 1.5vw;
    width: 48%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4vw;
    padding: 2vw;
    border: 0.2vw dashed rgba(255, 255, 255, 0.7);
    font-size: 2.5vw;
}
.Surrender{
    text-align: left;
    margin-left: 3vw;
    font-size: 1vw;
}
@media only screen and (max-width: 886px){
    body{
        min-height: 194vh;
        background-position: -170vw;
        background-size: 470vw;
        background-repeat: no-repeat;
        background-attachment:fixed;
    }
    .wrapper{   
        justify-content: center;
        align-items: center;
        min-height: 195vh;
        background: rgba(0, 0, 0, 0.4);
    }
    .nav{
        height: 27vw;
        line-height: 100px;
    }
    .nav-button{
        display: none;
    }
    .nav-menu.responsive{
        margin-top: 130vw;
        border-bottom: 0.7vw solid white;
    }
    .nav a.active {
        border-bottom: 0.5vw solid white;
    }
    .nav-menu{
        position: absolute;
        display: flex;
        justify-content: center;
        top: -130vw;
        background: rgba(0, 0, 0, 0.821);
        width: 100vw;
        height: 79vw ;
        transition: .3s;
        border-radius: 6vw;
    }
    .nav-logo img{
        margin-left: -5vw;
        width: auto;
        height: 28vw;
        margin-top: -0.5vw;
        margin-right: 80.5vw;
    }
    .nav-menu ul{
        font-size: 4vw;
        flex-direction: column;
        text-align: center;
        margin-left: 0vw;
        margin-top: 2vw;
    }
    .nav-menu ul li{
        height: 17vw;
    }
    .nav-menu-btn{
        margin-top: 2vw;
        z-index: 999;
        display: block;
        margin-left:-70vw;
    }
    .nav-menu-btn i{
        font-size: 8vw;
        color: #fff;
        cursor: pointer;
        transition: .3s;
    }
    .nav-menu-btn i:hover{
        background: rgba(255, 255, 255, 0.15);
    }
    .link:hover, .active{
        border-bottom: 0.5vw solid #fff;
    }
    .linkregisztracio{
        text-decoration: none;
        font-weight: 0vw;
        color: #ffffff;
        margin: 0 25vw;
        visibility: visible;
    }
    .cím{
        font-size: 10vw;
        color: white;
        text-align: center;
        margin-top: 35vw;
        margin-bottom: 20vw;
    }
    .flex-container{
        display: flex;
        flex-wrap: wrap;
    }
    .flex-container > div {
        padding: 4vw;
        margin: 2vw;
        height: 40vw;
      }
      .flex-container ul {
        padding-left: 6vw;
      }
    .Szabalyok-cím{
        text-align: center;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4vw;
        padding: 2vw;
        border: 0.4vw dashed rgba(255, 255, 255, 0.7);
        font-size: 6vw;
    } 
    .szabalyok{
        text-align: left;
        font-size: 1.8vw;
    }
    .Vs-cím{
        text-align: center;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4vw;
        padding: 2vw;
        border: 0.4vw dashed rgba(255, 255, 255, 0.7);
        font-size: 6vw;
    }
    .Vs{
        text-align: left;
        font-size: 1.8vw;
    }
    .Termi-cím{
        text-align: center;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4vw;
        padding: 2vw;
        border: 0.4vw dashed rgba(255, 255, 255, 0.7);
        font-size: 6vw;
    }
    .Termi{
        text-align: left;
        font-size: 1.8vw;
    }
    .Eltiltasok-cím{
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        text-align: center;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4vw;
        padding: 2vw;
        border: 0.4vw dashed rgba(255, 255, 255, 0.7);
        font-size: 6vw;
    }
    .Eltiltasok{
        text-align: left;
        font-size: 1.8vw;
    }
    .Jatekmenet-cím{
        text-align: center;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4vw;
        padding: 2vw;
        border: 0.4vw dashed rgba(255, 255, 255, 0.7);
        font-size: 5vw;
    }
    .Jatekmenet{
        text-align: left;
        font-size: 1.8vw;
    }
    .Pause-cím{
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        text-align: center;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4vw;
        padding: 2vw;
        border: 0.4vw dashed rgba(255, 255, 255, 0.7);
        font-size: 6vw;
    }
    .Pause{
        text-align: left;
        font-size: 1.8vw;
    }
    .Surrender-cím{
        text-align: center;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4vw;
        padding: 2vw;
        border: 0.4vw dashed rgba(255, 255, 255, 0.7);
        font-size: 6vw;
    }
    .Surrender{
        text-align: left;
        font-size: 1.8vw;
    }
}