/* font-import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
    background: rgb(2, 2, 2) !important;
    color: rgb(231, 231, 255);
    font-family: poppins !important;
    user-select: none;
}

a{
    text-decoration:  none !important;
    color:rgb(231, 231, 255) !important;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: black
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(rgb(38, 0, 190), rgb(68, 0, 255));
    border-radius: 10px;
}


/* bg's */

.bg{
    background: url(../img/bg.png);
    background-size: cover;
    top:0; left:0; right:0; bottom:0;
    position: absolute;
    z-index: -1;

}


.bg-2{
    background: url(../img/bg-2.png);
    background-size: cover;
    position: absolute;
    z-index: -2;
    height: 4040px;
    width: 100%;
}

/* header */



.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150px;
}

.header .nav {
    padding: 0 175px;
    z-index: 500;
}

.header .logo{
    padding: 0 175px;
}

.header .logo img{
    width: 100px;
    height: 100px;
}

.header .nav h2{
    color: rgb(225, 225, 225);
    font-size: 20px;
    font-weight: 500;
    padding: 0 20px;
    text-transform: uppercase;
    transition: 200ms;

}

.header .nav h2:hover{
    transition: 200ms;
    color: rgb(84, 84, 84);
    cursor: pointer;
}



/* main */


.main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 75vh;
}

.main .left{
    position: absolute;
    left: 175px;
    color: white;
}

.main .left h2{
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 700;
}

.main .left h3{
    font-weight: 300;
    font-size: 20px;
}

.main .left .btns {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.main .left .btns button{
    background: linear-gradient(90deg, rgb(19,19,19), rgb(35,35,35));
    border:0;
    margin-right: 10px;
    color: white;
    font-family: poppins;
    padding: 7px 50px;
    border-start-end-radius: 5px;
    border-start-start-radius: 5px;
    font-weight: 600;
    color: gray;
    border-bottom: 3px solid rgba(255, 255, 255, 0.246);
    transition: 200ms;

}
.main .left .btns button:hover{
    border-bottom: 3px solid rgb(255, 255, 255);
    transition: 200ms;
    color: white;
}
#primary{
    background: linear-gradient(90deg, rgb(82, 0, 190), rgb(51, 1, 125))
}

.main .right{
    position: absolute;
    right: 75px;
}

.main .right img{
    width: 1000px;
}

.main .scroll{
    position: absolute;
    bottom: 100px;
    left: 165px;
    display: flex;
    align-items: center;
}

.main .scroll .lf{
    color: white;
}

.main .scroll .lf span{
    font-size: 40px;
} 

.main .scroll .rg {
    display: flex;
    flex-direction: column;
}

.main  .scroll .rg h2{
    color: white;
    font-size: 16px;
    margin:0;

}
.main .scroll .rg span{
    margin:0;
    color: white;
    font-size: 18px;
    margin-left: -5px;

  
}
.main .scroll .rg:hover{
    cursor: pointer;
    transition: 200ms;
    background: rgb(76, 0, 255);
    -webkit-background-clip: text;
    cursor: pointer;

    -webkit-text-fill-color: transparent;
}

.main .scroll .rg span:hover{
    background: rgb(76, 0, 255);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 200ms;

}


.main .scroll:hover{
    background: rgb(76, 0, 255);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
}


.main .online{
    display: flex;
    align-items: center;
}

.main .online .dot{
    width: 7px;
    height: 7px;
    background:rgb(76, 0, 255);
    border-radius: 100%;
    margin-right: 7.5px;
}
.main .online{
    display: flex;
    align-items: center !important;
    margin-top: 10px;
}
.main .online h2{
    font-size: 16px;
    font-weight: 300;
    text-transform: none;
    margin-top: 7px;
}
.main .online b{
    font-weight: 600;
}


/* section */

.section{
    display: flex;
    flex-direction: column;
    color: white;

    height: 900px;
    justify-content: center;
}

.section .title{
    padding: 0 150px;
}

.section .title h2{
    font-weight: 600;
    font-size: 40px;
    margin:0;
}

.section .title h3{
    font-weight: 400;
    font-size: 20px;
    margin:0;

}


.section .content{
    display: flex;
    justify-content: center;
    width: 100%;
}
/* tops */


.tops{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


.tops .tables{
    display: flex;
    justify-self: center;
    flex-direction: column;   
    width: 44.5%;
    align-items: center;
    margin-top: 25px;
}

.tops .tables .table {
    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid rgb(98, 0, 255);
    background: linear-gradient(90deg, rgba(98, 0, 255, 0.678) 10%, rgb(5,5,5));
    border-radius: 10px;
    padding: 10px 0px;
    width: 90%; 
}

.tops .tables .table .left {
    display: flex;
    align-items: center;
}

.tops .tables .table .left img{
    width: 40px;
    border-radius: 10px;;
}

.tops .tables .table .left h2{
    font-size: 20px;
    margin: 0 15px;
    color: white;
    font-weight: 600;
}



.tops .tables .table .left h3{
    font-size: 25px;
    margin: 0 15px;
    color: white;
    font-weight: 600;
}

.tops .tables .table right{
    display: flex;
    align-items: center;
}

.tops .tables .table .right h3{ 
    margin:0;
    font-size: 20px !important;
    color: white !important;
    margin-right: 20px;
}

#reversed .table{
    background: linear-gradient(240deg, rgba(98, 0, 255, 0.678) 10%, rgb(5,5,5));

}

/* administracja */
.cnt{
    display: flex !important;
    justify-content: center !important;
}
#administration{
    display: flex !important;
    justify-content: center !important;
    width: 86.5% !important;
}
.col{
    padding:10PX !important;
    margin:0 !important;
}

.cnt .card{
    padding:0 !important;
    margin:0 !important;
    border: 1px solid rgb(98, 0, 255) !important; 
    background: linear-gradient(90deg, rgba(98, 0, 255, 0.678) 10%, rgb(5,5,5)) !important;

    display: flex !important;
    align-items: center !important;
    flex-direction: unset !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 190px !important;

}

.cnt .card .left{
    padding: 0 10px;
}


.cnt .card .right{
    padding: 0 10px;
}

.cnt .card .right h2{
    margin:0;
    font-size: 25px;
    text-align: center;
}

.cnt .card .right h3{
    margin:0;
    font-size: 16px;
    text-align: center;
    font-weight: 200;
}


 .row{
    margin-top: 25px !important;
    margin-left: unset !important;
    margin-right: unset !important;

}
/* media */

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

.media .icon svg{
    width: 30px;
    height: 30px;
    fill: white;
    margin: 0 5px;
}





/* mode */




.modes{
    width: 85.5%;
}

.modes h2 {
    margin:0;
     font-weight: 500;
     font-size: 30px;

}

.modes h3{
    font-weight: 300;
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
    color: rgb(182, 182, 182);
}


.modes .card {
    padding:0 !important;
    margin:0 !important;
    border: 1px solid rgb(98, 0, 255) !important; 
    background: linear-gradient(90deg, rgba(98, 0, 255, 0.678) 10%, rgb(5,5,5)) !important;

    display: flex !important;
    align-items: center !important;
    flex-direction: unset !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 100px 190px !important;
    flex-direction: column !important;

}

.modes .card button{
    margin-top: 15px;
    border:0;
    border: 2px solid rgb(66, 0, 190);
    border-bottom: 0px solid black !important;
    background: none;
    color: rgb(255, 255, 255);
    font-weight: 600;
    font-family: poppins;
    padding: 2.5px 40px;
    position: absolute;
    bottom: 0px;
    font-size: 20px;
    border-start-end-radius: 10px;
    border-start-start-radius: 10px;
    transition: 200ms;
}



.modes .card button:hover{
    background: rgb(73, 0, 190);
    cursor: pointer;
    transition: 200ms;
    color: white;
}





/* footer */

.footer{
    height: 300px;
    width: 100%;
    background-color: rgb(4, 0, 10);
    display: flex;
    align-items: center;
    filter: opacity(80%)
}
.media{
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}
.evenly{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}
.footer .logo {
    padding: 0 100px;
}
.footer .logo img{
    width: 250px;
}

.media h3{
    text-align: left !important;
}
.media h3 a{
    color: gray !important;
}

.media h3 a:hover{
color: white !important; 
}

.footer h2{
    margin:0;
    font-size: 30px;
    color: white;


}

.footer h3{
    margin:0;
    font-weight: 300;
    color: gray;
    font-size: 18px;
}

.footer h3:hover{
    color:white;
}

.creator{
    height: 80px;
    width: 100%;
    background-color: rgb(4, 0, 10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 20px 0;
    filter: opacity(80%)
}

.creator .box{
    width: 90%;
    border-radius: 2px;
    padding: 5px 10px;
    background: linear-gradient(90deg, rgba(76, 0, 255, 0.834), rgba(55, 0, 255, 0.434));
    margin-bottom: 50px;
}


.creator h2{
    font-weight: 300;
    margin:0;
    line-height: 20px;
    font-size: 16px;
    color:rgb(255, 255, 255);
}

.creator b {
    color: white;
}



.mojang {
    background-color: rgb(4, 0, 10);
    filter: opacity(80%);
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    text-align: left;
    flex-direction: column;
    align-items: center;
}

.mojang h2{
    font-weight: 300;
    color: gray;
    width: 90%;
    line-height: 17px;
    margin:0;
    font-size: 14px;
}