body {
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;
    margin: 0;
    
}

.nazwa {
    background-image: linear-gradient(to right, rgb(243, 215, 57), rgb(255, 157, 0));
    background-clip: text;
    color: transparent;
}
h1 {
    font-size: 100px;
    margin: 0;
}
h2 {
    font-size: 60px;
    margin: 0;
    margin-top: 5%;
}
h5 {
    font-size: 26px;
}
p {
    font-size: 24px;
    color: gray;
    margin: 0;
}
a {
    font-size: 16px;
}

@media (max-width: 968px) {
    h1 {
        font-size: 70px;
    }
    h2 {
        font-size: 30px;
    }
    h5 {
        font-size: 20px;
    }
    p {
        font-size: 18px;
    }
    .nazwa {
        background-image: linear-gradient(to right, rgb(255, 233, 161), rgb(255, 192, 90));
    }
    
    nav > div > a {
        font-size: 12px !important;
        margin-right: 14px !important;
    }
    nav > div > h5 {
        font-size: 0 !important;
    }

    .powitanie {
        min-height: auto;
    }
    .powitanie > img {
        width: 40% !important;
        margin: 10%;
        padding-top: 12%;
    }

    .trailer iframe {
        box-shadow: 0 0 250px 4px rgb(49, 2, 27) !important;
        margin-top: 15% !important;
    }

    .ogloszenia > div {
        width: 100% !important;
        margin: 5%;
        padding-bottom: 5%;
    }

    .regulamin > div > p {
        font-size: 15px !important;
    }
    .regulamin > div > h5 {
        margin-bottom: 7% !important;
    }
    .regulamin > div {
        width: 70% !important;
        margin: 2%;
        padding: 8% !important;
    }

    .rangi > table {
        font-size: 12px;
        width: 100%;
    }
    .rangi > table tr, .rangi > table tr td, .rangi > table tr th {
        display: block;
        box-sizing: border-box;
        padding: 6% 0;
    }
    .rangi > table tr {
        margin: 5%;
    }
    .rangi > table tr.sekcja {
        padding-top: 10%;
        padding-bottom: 0%;
    }
    .rangi > table tr td.lista {
        height: auto;
    }

    .rangi > table tr td.vip, .rangi > table tr th.vip {
        background-color: rgba(90, 190, 104, 0.9) !important;
    }
    .rangi > table tr td.vipplus, .rangi > table tr th.vipplus {
        background-color: rgba(178, 228, 87, 0.9) !important;
    }
    .rangi > table tr td.mvp, .rangi > table tr th.mvp {
        background-color: rgba(100, 208, 234, 0.9) !important;
    }
    .rangi > table tr td.mvpplus, .rangi > table tr th.mvpplus {
        background-color: rgba(112, 162, 243, 0.9) !important;
    }
    .rangi > table tr td.mvpplusplus, .rangi > table tr th.mvpplusplus {
        background-color: rgba(232, 123, 53, 0.9) !important;
    }
}

.kolumna {
    background-image: linear-gradient(rgb(16, 18, 34), rgb(30, 34, 61));
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kolumna > div {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin: 5% 2%; 
    gap: 2%;
}

nav {
    background-image: linear-gradient(to right, rgb(19, 21, 35), rgb(16, 18, 34));
    display: flex;
    justify-content: space-between;
    height: 80px;
}
nav > div {
    display: flex;
    align-items: center;
    margin: 10px;
}
nav > div > img {
    width: auto;
    height: auto;
    max-height: 45px;
    padding-left: 5%;
}
nav > div > h5 {
    padding: 5%;
}
nav > div > a {
    color: white;
    text-decoration: none;
    margin-right: 25px;
}
nav > div > a:hover {
    color: rgb(243, 215, 57);
    text-decoration: underline;
}

.powitanie {
    background-image: radial-gradient(circle, rgba(72, 72, 72, 0.5), transparent 100%), linear-gradient(rgba(77, 77, 77, 0.3), rgba(77, 77, 77, 0.4)), url("https://i.imgur.com/jWFFOV4.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;

    height: calc(100vh - 80px);
    min-height: 250px;
}
.powitanie > img {
    background-image: radial-gradient(circle, rgb(255, 213, 0), transparent 75%);
    width: 15%;
    margin-top: 5%;
}
.powitanie > h5 {
    margin: 0;
    margin-bottom: 2%;
}
.powitanie > a {
    background-image: linear-gradient(to right, rgb(243, 215, 57), rgb(234, 162, 47));
    color: rgb(87, 71, 2);
    font-size: 24px;
    border-radius: 10px;
    padding: 1% 3%;
    text-decoration: none;
}
.powitanie > a:hover {
    transform: scale(1.07);
    box-shadow: 0 0 10px 4px rgba(215, 96, 5, 0.5);
}

.trailer {
    background-image: linear-gradient(rgb(34, 37, 57), rgb(16, 18, 34));
    display: flex;
    flex-direction: column;
    align-items: center;
}
.trailer iframe {
    width: 75%;
    aspect-ratio: 16 / 9;
    border-radius: 30px;
    box-shadow: 0 0 250px 4px rgb(49, 2, 27);
    margin: 7%;
}

.ogloszenia {
    flex-wrap: wrap;
}
.ogloszenia > div {
    background-image: linear-gradient(rgb(28, 30, 42), rgb(28, 30, 42));
    width: 30%;
    border: 2px solid rgb(46, 40, 56);
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 5%;
    transition: transform 0.5s ease;
}
.ogloszenia > div:hover {
    border: 2px solid rgb(255, 157, 0);
    transform: scale(1.05);
}
.ogloszenia > div > img {
    mask-image: linear-gradient(to bottom, black, transparent);
    width: 100%;
}
.ogloszenia > div > h5 {
    margin: 7%;
    margin-bottom: 3%;
}
.ogloszenia > div > p {
    font-size: 16px;
    color: rgb(191, 188, 188);
    margin: 0 7%;
}


.regulamin > p {
    margin-bottom: 5%;
}
.regulamin > div {
    background-image: linear-gradient(rgb(39, 43, 62), rgb(42, 45, 68));
    width: 70%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 2px solid rgb(46, 48, 60);
    margin: 2%;
    padding: 2%;
}
.regulamin > div > h5 {
    text-align: center;
    margin: 2%;
}
.regulamin > div > p {
    font-size: 18px;
    color: white;
    margin: 5px;
}
.regulamin > div > p::before {
    content: '•';
    color: rgb(234, 162, 47);
    font-size: 24px;
    margin: 2%;
}

.rangi > table tr th.opis {
    background-color: rgb(168, 168, 168);
}
.rangi > table tr th.vip {
    background-color: rgb(90, 190, 104);
}
.rangi > table tr th.vipplus {
    background-color: rgb(178, 228, 87);
}
.rangi > table tr th.mvp {
    background-color: rgb(100, 208, 234);
}
.rangi > table tr th.mvpplus {
    background-color: rgb(112, 163, 243);
}
.rangi > table tr th.mvpplusplus {
    background-color: rgb(232, 123, 53);
}
.rangi > table tr th.przywileje {
    background-color: rgb(224, 57, 57);
}
.rangi > table tr th.dostawcahub {
    background-color: rgb(19, 133, 138);
}
.rangi > table tr th.dodatkihub {
    background-color: rgb(14, 134, 42);
}
.rangi > table tr th.oneblock {
    background-color: rgb(225, 32, 255);
}
.rangi > table tr th.garderoba {
    background-color: rgb(78, 49, 207);
}
.rangi > table tr th.emotikony {
    background-color: rgb(229, 134, 189);
}

.rangi {
    background-image: linear-gradient(rgb(28, 30, 42), rgb(28, 30, 42));
}
.rangi > table {
    width: 80%;
    text-align: center;
    border: 1px solid rgb(16, 18, 34);
    border-collapse: collapse;
    margin: 5% auto;
}
.rangi > table tr td, .rangi > table tr th {
    border: 1px solid rgb(72, 72, 72);
    color: white;
    height: 50px;
}
.rangi > table tr td.opis {
    background-color: rgb(39, 43, 62);
    padding: 2%;
}
.rangi > table tr td.lista {
    text-align: left;
    vertical-align: top;
    padding: 20px;
}
.rangi > table tr td p {
    font-size: 13px;
    margin: 6px;
    color: white;
}
.rangi > table tr td.lista p::before {
    content: '+ ';
    color: rgb(13, 203, 16);
}
.rangi > table tr td.plus::before {
    content: '✅';
}
.rangi > table tr td.iks::before {
    content: '❌';
}