body, html{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-width: 100%vh;

          background-image: url('Background.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
              min-height: 100vh;
    min-width: 100%vh;
          margin: 0;
    overflow-x: hidden;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#container {
    display: flex;
    flex-direction: column;

    min-height: 100vh;

}
header {
    background-color: rgba(23, 23, 123, 0.2);
    backdrop-filter: blur(10px);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.left {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
       font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.right a {
    color: white;
    text-decoration: none;
    margin-left: 30px;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.dolacz {
    font-size: 30px;
    font-family: ui-sans-serif, system-ui, sans-serif;
    text-align: center;
    color: white;
    margin-top: 10px;
    font-weight: bold;
    background: linear-gradient(90deg, #f39c12, #e74c3c, #8e44ad, #3498db, #2ecc71);
    background-size: 500% 500%;
    background-clip: text;
    -webkit-background-clip: text; /* <--- Zeby na chromie dzialalo */
    animation: rainbow 3s ease infinite ;
}


.right a:hover {
    text-decoration: underline;
}


.Welcome {
font-size: 90px;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: bold;
width: 100%;
margin-top: 24px;
text-align: center;
color: white;
}

.Gradient-Riskmc
{


    background: linear-gradient(90deg, #f39c12, #e74c3c, #8e44ad, #3498db, #2ecc71);
    background-size: 500% 500%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: rainbow 3s ease infinite;





}


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

.info-boxes {
display: flex;
gap: 150px;
padding: 50px 50px;

width: auto;
justify-content: center;
flex-wrap: wrap;
text-align: center;
}

.info-box{
    background-color: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 6px 60px;
    text-align: center;
    color: white;
    font-family: ui-sans-serif, system-ui, sans-serif;
    transition: transform 0.3s ease;
    flex: 1 0 auto;

}
.info-box:hover{
transform: scale(1.05);
}

.rozowy{
font-size: 50px;
font-weight: bold;
color: #c62cf1;
padding: 20px 10px 5px 20px;
}

.zielony{
font-size: 50px;
font-weight: bold;
color: #00ff11;
padding: 20px 10px 5px 20px;
}

.innyrozowy{
font-size: 50px;
font-weight: bold;
color: #8c0780;
padding: 20px 10px 5px 20px;
}

.info-title{
font-size: 18px;

margin: 13px 2px 2px 2px;
color: #b8bbe7;
}





#content {
    padding: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.administracja{
margin: 50px 20px;
text-align: center;
}

.administracja-title{
color: #ff0038;
font-weight: bold;
font-size: 30px;
margin-bottom:30px;
transition: transform 0.3s ease;
}
.administracja-title:hover{
transform: scale(1.25)

}



.admin-boxes{
display: flex;
flex-wrap: wrap;
gap: 120px;

}

.admin-box {
    background-color: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 5px;
    width: 150px;

    transition: transform 0.3s ease;
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: left;
    justify-content: left;
    min-width: 380px
}
.admin-box:hover {
    transform: scale(1.05);
}


.admin-avatar {
    width: 130px;
    height: 130px;
    object-fit: cover;
    margin-bottom: 15px;
    justify-content: righ;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.admin-nick{
font-size: 16px;
font-weight: bold;
color: #ffffff;
text-align: end;
}

.admin-ranga
{
font-size: 16px;
font-weight: bold;
color: red;
margin-top: 5px;
}

.admin-discord{
    font-size: 16px;
    color: #9fa6b2;
    margin-top: 5px;

}



#footer {
    text-align: center;
    background-color: rgba(23, 23, 123, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    margin-top: auto;
    padding: 10px;
}
.divider {
    border-top: 2px solid lime;
    margin: 20px 0;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.divider2 {
    border-top: 2px solid violet;
    margin: 10px 0;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.moderators-title {
    color: #ff0038;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
}

.Naglówek{
color: #f0335c;
font-size: 30px;
font-weight: bold;
font-family: 'Minecraft', sans-serif;
padding: 10px 0px;

}
.Media-menagment
{
background: linear-gradient(90deg, #e83e8c, #ff8c00);
background-size: 500% 500%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: menagment 3s ease infinite;
font-size: 20px;
font-weight: bold;

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

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

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

}

.Aktualnosc-box{
    background-color: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 10px 0px;
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    min-height: 90px;
    min-width: 90px;
    color: white;
    font-family: ui-sans-serif, system-ui, sans-serif;
    transition: transform 0.3s ease;
}
.Aktualnosci-tekst
{
color: #ffdc11;
text-align: center;
justify-content: center;
font-weight: bold;


}

/*----------------------------------------------------------------------------------------------------------------
Style do rang*/
.OWNER-NICK
{
font-weight: bold;
color: #e2f115;
font-size: 26px;
text-align: right;
display: flex;
flex-direction: column;
text-align: right;
justify-content: right;
}

.OWNER-RANGA
{
color: #eb5f1c;
font-weight: bold;
font-size: 16px;
text-align: left;


}



.OWNER-DC {
background: linear-gradient(90deg, #ffa100, #aaff00, #00ff1d, #00f6ff);
font-weight: bold;
font-size: 16px;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: kontaktAnim 3s ease infinite;
background-size: 500% 500%;
display: flex;
justify-content: left;
text-align: left;
width: auto;

}
.WEB_DEVELOPMENT
{
color: #00ffe3;
font-weight: bold;
font-size: 16px;
text-align: left;

}
.DCPNG
{
width: 20px;
height: 20px;
}

.kontakt {
background: linear-gradient(90deg, #ffa100, #aaff00, #00ff1d, #00f6ff);

background-size: 500% 500%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: kontaktAnim 3s ease infinite;
font-size: 20px;
font-weight: bold;
}

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

.ticket {
background: linear-gradient(90deg, #ffa100, #aaff00, #00ff1d, #00f6ff);

background-size: 500% 500%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: kontaktAnim 3s ease infinite;
font-size: 18px;
font-weight: bold;
}
.Technik
{
font-size: 18px;
font-weight: bold;
color: #c800ff;
}
.Ha-nick
{
font-weight: bold;
color: #ed1616;
font-size: 26px;
text-align: right;
display: flex;
flex-direction: column;
text-align: right;
justify-content: right;
}

.Ha-ranga{
color: #f11562;
font-weight: bold;
font-size: 16px;
text-align: left;
}

.Admin-nick{
font-weight: bold;
color: #f1ba15;
font-size: 26px;
text-align: right;
display: flex;
flex-direction: column;
text-align: right;
justify-content: right;
}
.Admin-ranga{
color: #ce0dff;
font-weight: bold;
font-size: 16px;
text-align: left;
}
.Moderator-nick{
font-weight: bold;
color: #17ff04;
font-size: 26px;
text-align: right;
display: flex;
flex-direction: column;
text-align: right;
justify-content: right;
}
.Moderator-ranga{
color: #8dff04;
font-weight: bold;
font-size: 16px;
text-align: left;
}
.Pomocnik-nick{
color: #04fff3;
font-weight: bold;
font-size: 26px;
text-align: right;
display: flex;
flex-direction: column;
text-align: right;
justify-content: right;
}
.Pomocnik-ranga{
color:#00eeff;
font-weight: bold;
font-size: 16px;
text-align: left;
}
.Thelper-nick{
color: #159aff;
font-weight: bold;
font-size: 26px;
text-align: right;
display: flex;
flex-direction: column;
text-align: right;
justify-content: right;
}
.Thelper-ranga{
color: #05c2ff;
font-weight: bold;
font-size: 16px;
text-align: left;
}



















/* TITLE */




.Headadmin-title{
    color: #ff0573;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    transition: transform 0.3s ease;

}
.Headadmin-title:hover{
transform: scale(1.25)

}
.Administratorzy-title{
    color: #ff7705;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    transition: transform 0.3s ease;

}
.Administratorzy-title:hover{
transform: scale(1.25)

}
.Moderator-title{
    color: #05ff63;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    transition: transform 0.3s ease;

}
.Moderator-title:hover{
transform: scale(1.25)

}
.Pomocnik-title{
    color: #05fff2;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    transition: transform 0.3s ease;

}
.Pomocnik-title:hover{
transform: scale(1.25)

}
.Tpomocnik-title{
    color: #05a9ff;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    transition: transform 0.3s ease;

}
.Tpomocnik-title:hover{
transform: scale(1.25)

}