@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --background-color: #0a0d16;
    --background-color-dark: #0d0d13;
    --font-color: #bcc4f1;
    --font-color-hover: #e6eeff;
    --font-family: 'Roboto';
    --image-brightness: brightness(65%);
    --image-grayscale: grayscale(70%);
    --image-blur: blur(6px);
    --image-opacity: 70%;
    --blur: blur(15px);
    --white: #fff;
    --dark: rgba(10, 13, 35, 100);
    --shadows: 0 0 4px rgba(0, 0, 0, 0.9);
    --shadows2: rgb(10 13 35 / 40%) 20px 20px 100px -20px inset, rgb(10 13 35 / 40%) -20px 0px 100px -20px inset, rgb(10 13 35 / 40%) 0px -20px 100px -20px inset;
    --shadows3: rgb(10 13 35 / 40%) 450px 0px 100px -100px inset;
    --shadows4: rgb(10 13 35 / 30%) 20px 20px 20px -30px inset, rgb(10 13 35 / 30%) -20px 20px 20px -30px inset, rgb(10 13 35 / 30%) 0px -20px 20px -20px inset;
    --transition-bounce: 700ms cubic-bezier(0.64,-0.55, 0.37, 1.55);
    --transition-bounce2: 1100ms;
    --main-color: rgb(211, 60, 65);
}


body {
    width: 100%;
    height: 100%;
    background-color: var(--dark);
    color: var(--white);
    font-family: var(--font-family);
    padding: 0;
    margin: 0;
    cursor: context-menu;
    -webkit-user-select: none;
    -moz-user-select: none;
    overflow-x: hidden;
    letter-spacing: 1px;
    text-shadow: var(--shadows);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    position: relative !important;
}

img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}



header {
    position: absolute;
    display: flex;
    z-index: 100;
    height: 100px;
}


nav a {
    font-size: 30px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    transform: skewX(-45deg);
    z-index: 2;
    text-shadow: none;
    color: var(--background-color) !important;
}




.nav-text {
    transform: initial;
    transform: skewX(45deg);
}


.nav-shape .nav-text {
    height: 36px;
}


.nav-shape-rombus {
    height: 200px;
    width: 300px;
    left: -102px;
    top: -100px;
    transform: rotate(-45deg);
    z-index: 1;
    box-shadow: var(--shadows4);
}

.nav-shape-rombus2 {
    height: 200px;
    width: 300px;
    right: -102px;
    top: -100px;
    transform: rotate(45deg);
    z-index: 1;
    box-shadow: var(--shadows4);
}

.nav-shape {
    display: inline-block;
    background: var(--main-color);
    text-shadow: none;
    padding: 10px 20px;
}



header a:hover .nav-text {
    color: white;
    transition: ease-in-out 100ms;
}

.nav-right > a {
    transform: skewX(45deg);
}

.nav-right > a .nav-text {
    transform: skewX(-45deg);
}

.nav-right > a .nav-text {
    padding-right: 50px;
    padding-left: 10px;
}

.nav-right > a {
    margin-right: -70px;
}

.nav-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-right: 25px;
}

nav, nav > div {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    margin-left: 15px;
}


.nav-menu {
    display: none;
}


.hide {
    display: none;
}

nav {
    position: relative;
    z-index: 100;
}

.nav-logo-link {
    margin: 114px 0px 0 -50px;
    position: relative;
    z-index: 200;
    transform: unset;
    border-radius: 0 85px 85px 0;
    background-color: var(--main-color);
    padding: 10px;
    padding-left: 60px;
    display: flex;
}

.nav-logo-image {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50%;
}

.nav-link {
    margin: 0 10px;
    z-index: 1;
}

.nav-text {
    transform: skewX(45deg);
}


.nav-links {
    margin-left: -120px;
}


.nav-links .nav-link:nth-child(1) .nav-text {
    padding-left: 100px;
}



main {
    width: 100vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative!important;
    left: 50%;
    transform: translateX(-50%);
}

.full-page {
    height: 100vh;
    width: 90%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

img {
    height: 100px!important;
    width: 100px!important;
}





.circle {
    position: absolute;
    display: flex;
    border-radius: 50%;
    background-color: var(--main-color);
    box-shadow: var(--shadows4);
}

.rombus {
    position: absolute;
    display: flex;
    background-color: var(--main-color);
}


.rombus-inner {
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.welcome-circle {
    position: absolute;
    width: 400px;
    height: 400px;
    padding: 100px;
    right: -200px;
    top: 75%;
    transform: translateY(-50%) rotate(-45deg);
    box-shadow: var(--shadows2);
}


.skin-image {
    height: auto !important;
    width: 600px !important;
    margin: -163px 0 0 -230px;
    z-index: 100;
}





.welcome-circle-second {
    width: 50px;
    height: 50px;
    padding: 20px;
    left: -30%;
    bottom: 25%;
    z-index: 0;
}
.welcome-circle-third {
    width: 20px;
    height: 20px;
    padding: 8px;
    left: -25%;
    top: -20%;
    z-index: -10;
}
.welcome-circle-fourth {
    width: 40px;
    height: 40px;
    padding: 5px;
    left: -150%;
    top: -100%;
    z-index: 0;
}
.welcome-circle-fifth {
    width: 20px;
    height: 20px;
    padding: 10px;
    left: 20%;
    bottom: -40%;
    z-index: 0;
}
.welcome-circle-sixth {
    width: 30px;
    height: 30px;
    padding: 20px;
    left: 65%;
    bottom: -20%;
    z-index: -10;
}

.welcome-circle-seventh {
    width: 20px;
    height: 20px;
    padding: 8px;
    left: -10%;
    bottom: -100%;
    z-index: -10;
}



.adm-circle {
    width: 50px;
    height: 50px;
    width: min-content;
    padding: 300px;
    right: -600px;
    top: -30%;
    transform: rotate(-45deg);
    box-shadow: var(--shadows2);
}



.adm-circle-second {
    width: 50px;
    height: 50px;
    padding: 20px;
    left: -10%;
    top: -4%;
    z-index: 0;
}
.adm-circle-third {
    width: 50px;
    height: 50px;
    left: -15%;
    bottom: 20%;
    z-index: 0;
}





.circle-all-servers-second {
    width: 80px;
    height: 80px;
    right: 45%;
    bottom: -20%;
    z-index: 0;
}


.circle-all-servers-third {
    width: 30px;
    height: 30px;
    right: -160%;
    top: 120%;
    z-index: 0;
}


.circle-all-servers-fourth {
    width: 30px;
    height: 30px;
    right: -550%;
    top: -550%;
    z-index: 0;
}








.welcome-text {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
}


.welcome-text svg {
    font-size: 30px;
    color: #fff;
    margin-left: -30px;
    opacity: 0;
    transition: ease-in 100ms;
}

.welcome-text:hover svg {
    color: var(--main-color);
    margin-left: 10px;
    opacity: 100;
    transition: ease-in 100ms;
}

.welcome-banners-all {
    position: absolute;
    bottom: -11%;
    left: -400px;
    height: 180px;
    min-width: 100px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
}



.welcome-banner {
    position: relative;
    height: 50px;
    min-width: 100px;
    padding-left: 400px;
    background-color: var(--main-color);
    color: var(--background-color);
    text-shadow: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    box-shadow: var(--shadows3);
    z-index: 5;
    margin-bottom: 20px;
    margin-top: 10px;
}

.welcome-banner h3 {
    padding-right: 20px;
    font-size: 20px;
}



.welcome-banner .button {
    color: unset;
    transition: all ease-in-out 100ms;
}



.welcome-banner .button:hover {
    color: #fff;
}




.welcome-banner i {
    padding: 5px;    
}
.welcome-banner-rombus {
    position: relative;
    height: calc(25px * 1.41);
    width: calc(25px * 1.41);
    position: absolute;
    right: calc(-12.5px * 1.41);
    transform: rotate(-45deg);
    z-index: -20;
}



.welcome-text h1 {
    font-size: 100px;
    font-weight: 600;
    margin: 10px 0 10px 0;
}

span.colored {
    color: var(--main-color);
}

span.colored-second {
    color: var(--main-color);
}

span.colored-third {
    color: var(--main-color3);
}

.welcome-text h3 {
    font-size: 40px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.welcome-text .status-inner {
    background-color: var(--dark);
    color: var(--main-color);
    border-radius: 10px;
    border: 4px solid var(--main-color);
    text-align: center;
    margin-top: 40px;
}

/*
.welcome-text div {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
*/

.status-inner {
    top: 0;
    overflow: hidden;
    height: 55px;
    line-height: 55px;
    transition: 100ms ease-in-out;
    width: min-content;
}

.status-inner > h3 {
    font-size: 30px;
    transition: 100ms ease-in-out;
    text-wrap: nowrap;
    padding: 0 45px;
}

.status-inner:hover h3:nth-child(1)
{
    margin-top: -55px;
}


.status-inner:hover {
    color: white;
    border-color: white;

}




.link {
    cursor: pointer;
}












.circle-all-servers {
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 300px;
    left: -700px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    box-shadow: var(--shadows2);
}


.servers-circle {
    /*padding: 10px;*/
}

.servers-circle img {
    width: 130px!important;
    height: 130px!important;
    border-radius: 20px;
}

.announcement {
    margin-left: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
}


.announcements {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: flex-start;
}



.announcement a {
    text-decoration: none;
    color: #fff;
    z-index: 100;
}

.announcement .next-circle svg {
    font-size: 25px;
    color: var(--main-color);
    margin-left: -25px;
    opacity: 0;
    transition: ease-in 100ms;
}

.announcement .next-circle:hover svg {
    color: #fff;
    margin-left: 10px;
    opacity: 100;
    transition: ease-in 100ms;
}





.next-circle {
    margin-left: 250px;
}



.servers h1 {
    font-size: 40px;
    margin: 0;
}

.next-circle > h3 {
    margin: 10px 0 15px 0;
    font-weight: 400;
    width: 80%;
}



.servers {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: flex-start;
}












.adm {
    display: flex;
    flex-direction: column;
}


.adm-admins-all {
    position: relative;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -0%);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 60px 0;
}

.adm-admins {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}


.adm-admins .circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.adm-admins .circle img {
    position: relative;
    width: 110px!important;
    height: 110px!important;
    border-radius: 10px;
}

.adm-admins-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0 500px 0 60px;
}

.adm-admins a {
    text-decoration: none;
}

.adm-admins-text-second {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin: 0 60px 0 500px;
}

.adm-admins h1 {
    font-size: 40px;
    font-weight: 600;
    margin: 0 0 15px 0;
}



.adm-admins h1::first-letter {
    text-transform: uppercase;
}


































.adm-admins .status-inner h3 {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    padding: 0 25px;
}

.adm-admins .status-inner, .footer-socials-inner {
    background-color: var(--dark);
    color: var(--main-color);
    border-radius: 10px;
    border: 4px solid var(--main-color);
    text-align: center;
    height: 35px;
    line-height: 35px;
}


.adm-admins .status-inner:hover, .footer-socials-inner:hover {
    color: white !important;
    border-color: white !important;
}




.adm-admins .status-inner:hover h3:nth-child(1) {
    margin-top: -35px;
}










































footer {
    position: relative;
    width: 100%;
    position: relative;
    text-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}




.wave {
    height: 150px;
    width: 100vw;
    position: relative;
    z-index: 0;
    margin-bottom: -200px;
}


.footer-circle {
    padding: 10px;
    left: 10%;
    top: -40%;
    z-index: 2;
    box-shadow: none;
}
.footer-circle-second {
    width: 20px;
    height: 20px;
    padding: 20px;
    left: 3%;
    top: -25%;
    z-index: 2;
}


.footer-circle img {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50%;
}




footer p {
    color: var(--dark);
    font-size: 20px;
    font-weight: 500;
    padding: 10px;
    margin: 0;
    z-index: 2;
}


.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: -150px;
}


.footer-top {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.footer-socials {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 200px;
    width: 80%;
    margin-top: -70px;
}


.footer-socials a {

}

.footer-socials a {
    font-size: 25px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--dark);
    color: var(--main-color);
    border-radius: 8px;
    padding: 8px;
    margin: 0px 20px;
    transition: ease-in 100ms;
}

.footer-socials a:hover {
    color: white;
    transition: ease-in 100ms;
}



::-webkit-scrollbar {
    width: 10px;
}


::-webkit-scrollbar-track {
    background: var(--main-color);
}

::-webkit-scrollbar-thumb {
    width: 10px;
    background: var(--dark);
}

::-webkit-scrollbar-thumb:hover {
    background: white;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}


.no-scroll {
    overflow: hidden;
}













.regulations ul {
    list-style: none;
    padding-left: 20px;
}



.regulations {
    width: 50%;
    border: 10px solid var(--main-color);
    border-radius: 16px;
    padding: 20px;
    margin: 150px;
}

.regulations h2 {
    color: var(--main-color);
    margin: 10px 0;
}

.regulations h3 {
    font-weight: 400;
    padding-left: 10px;
}

.regulations a {
    color: #fff;
    transition: ease-in-out 100ms;
}


.regulations a:hover {
    color: var(--main-color);
}

.regulation {
    width: 100vw;
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}





























.one-page {
    overflow: hidden !important;
    width: 100vw;
    height: 100vh;
}




.one-page footer {
    position: absolute;
    bottom: 150px;
}










.form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-group {
    display: flex;
    width: 100%;
    margin: 10px 0;
    justify-content: space-between;
}

.input-group input {
    flex-grow: 1;
    margin-right: 10px;
}

.input-group button {
    margin-left: 10px;
}

.form textarea {
    width: 98%;
    height: 80px !important;
    resize: none;
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    background: unset;
    border: 0;
    color: #0c0c0e;
    font-size: 15px;
    background-color: var(--main-color);
    text-shadow: none;
    box-sizing: border-box;
}

.form > input {
    margin-bottom: 10px !important;
    box-sizing: border-box;
}

.form input,
.form textarea { 
    width: 98%;
    height: 40px;
    margin: 0px 1%;
    padding: 0 10px;
    outline: 0;
    border-radius: 6px;
    background: unset;
    border: 0;
    color: #0c0c0e;
    font-size: 15px;
    background-color: var(--main-color);
    text-shadow: none;
    overflow: auto;
}

.form input::placeholder,
.form textarea::placeholder {
    color: #0c0c0e;
}

.form input:focus,
.form textarea:focus {
    background-color: white;
    color: #0c0c0e;
}

.form button {
    height: 100%;
    padding: 10px;
    margin: 0px 1%;
    outline: 0;
    border-radius: 6px;
    background: unset;
    border: 0;
    color: #0c0c0e;
    font-size: 15px;
    background-color: var(--main-color);
    text-shadow: none;
}

.form button:hover {
    background-color: white;
    color: #0c0c0e;
}


.regulations h2 {
    color: #fff;
}

.regulations svg {
    color: var(--main-color);
}


button {
    cursor: pointer;
}










#links-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.95;
    z-index: 300;
    padding: 300px;
}

.hide {
    display: none!important;
}

#links-bg {
    display: none;
}


.menu .nav-text {
    transform: unset;
}


.menu svg {
    transform: skewX(-45deg);
    margin-left: 10px;
}

.menu {
    transform: unset;
    padding-right: 60px;
    padding-left: 20px;
    margin: 0;
    width: 50px;
}










.disable-scroll {
    overflow: hidden!important;
}