@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@keyframes leftFr {
    0% {
        transform: translateX(100%);
    }
    25% {
        transform: translateX(50%);
    }
    50% {
        transform: translateX(0%);
    }
    75% {
        transform: translateX(5%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes leftFrB {
    from{
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}
@keyframes sB1 {
    from{
        transform: translate(1800px, -88px);
        display: none;
        /* scale: 0; */
        border-radius: 0px;
    }
    to {
        transform: translate(1800px, -88px);
        display: block;
        background-color: rgba(255, 255, 255, .5);
        /* scale: 1; */
        border-radius: 10px;
        rotate: 0.2deg;
    }
}
@keyframes sB1b {
    from{
        transform: translate(1800px, -88px);
        display: block;
        background-color: rgba(255, 255, 255, .5);
        /* scale: 1; */
        border-radius: 10px;
        rotate: 0.2deg;
    }
    to {
        transform: translate(1800px, -88px);
        display: none;
        /* scale: 0; */
        border-radius: 0px;
    }
}
@keyframes transp1 {
    from{
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes transp1b {
    from{
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes log1 {
    0% {
        transform: translateY(0%);
    }
    25% {
        transform: translateY(4%);
    }
    50% {
        transform: translateY(8%);
    }
    75% {
        transform: translateY(4%);
    }
    100% {
        transform: translateY(0%);
    }
}
/* @keyframes uL1 {
    0% {
        max-width: 0px;
        min-width: 0px;
    }
    25% {
        max-width: 75px;
        
    }
    50% {
        max-width: 125px;
        min-width: 75px;
    }
    75% {
        max-width: 200px;
        min-width: 125px;
    }
    100% {
        max-width: 250px;
        min-width: 250px;
    }
} */

body {
    margin: 0;
}
.mainFrame {
    /* transform: translate(0, 0); */
    width: 1900px;
    height: 7000px;
    background: linear-gradient(180deg, #0c96b5 0%, #0d5b4d 50.31%, #051D18 100%);
}
.blackSc {
    width: 1900px;
    height: 910px;
    position: absolute;
    top: 6095px;
    background-color: rgba(0, 0, 0, 0.70);
    
}
.btwLogo {
    box-sizing: border-box;
    /* transform: translate(2px, 12px); */
    width: 250px;
    height: 93px;
    flex-shrink: 0;
    /* background: lightgray 50% / cover no-repeat; */
    /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
}
.topD {
    width: 1900px;
    height: 113px;
    flex-shrink: 0;
    background: #177589;
}
.leftMenuBut {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    transform: translateY(100px);
    
}
.leftFrame {
    animation: none;
    /* leftFr 1s ease-out forwards */
    display: none;
    position: fixed;
    left: 1400px;
    top: 0px;
    width: 500px;
    height: 1500px;
    background: rgba(0, 0, 0, 0.70);
    z-index: 3;
}
.cross1 {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
    transform: translateX(430px);
}
.anim1 {
    /* scale: 0.9; */
    animation: sB1b 100ms ease-out forwards;
    width: 90px;
    height: 90px;
    transform: translate(0px, 1000px);
    /* background-color: white; */
}
.anim1:hover {
    animation: sB1 100ms ease-out forwards;
}
.btwLogoD {
    /* background-color: white; */
    pointer-events: painted;
    width: 250px;
    height: 93px;
    position: absolute;
    transform: translate(2px, 12px);
    /* z-index: 1; */
}
.btwLogoD:after {
	content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: -3px;
    width: 0;
    height: 2px; /* Высота линии */
    background-color: black; /* Цвет подчеркивания при исчезании линии*/
    transition: width 0.5s; /* Время эффекта */
}
.btwLogoD:hover:after {
	content: "";
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px; /* Высота линии */
    background-color: #009de8; /* Цвет подчеркивания при появлении линии*/
    transition: width 0.5s;  /* Время эффекта */
}
.tini {
    /* background: linear-gradient(90deg, #7D3688 0%, #0F75ED 28.65%, #EA7A55 63.54%, #CF0 100%); */
    /* background-clip: text; */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    position: absolute;
    font-size: 50px;
    font-family: 'Itim', cursive;
    transform: translate(260px, 12px);
    width: 1540px;
    /* color: linear-gradient(90deg, #7D3688 0%, #0F75ED 28.65%, #EA7A55 63.54%, #CF0 100%); */
}
.rulesDisc {
    width: 410px;
    height: 49px;
    flex-shrink: 0;
    border-radius: 15px;
    background: linear-gradient(90deg, #864141 0%, rgba(0, 0, 0, 0.00) 100%);
    transform: translateX(10px);
}
.rulesDiscP {
    color: #0036F7;
    user-select: none;
    font-family: 'Jura', sans-serif;
    transform: translate(27px, -5px);
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.dImg {
    -webkit-user-drag: none;
    width: 50px;
    position: absolute;
    left: -10px;
    top: 5px;
    /* height: 50px; */
    flex-shrink: 0;
}
.rulesCountr {
    width: 410px;
    height: 49px;
    flex-shrink: 0;
    border-radius: 15px;
    background: linear-gradient(90deg, #864141 0%, rgba(0, 0, 0, 0.00) 100%);
    transform: translateX(10px);
}
.rulesCountrP {
    color: #F70000;
    user-select: none;
    font-family: 'Jura', sans-serif;
    transform: translate(27px, -5px);
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.rulesServ {
    width: 410px;
    height: 49px;
    flex-shrink: 0;
    border-radius: 15px;
    background: linear-gradient(90deg, #864141 0%, rgba(0, 0, 0, 0.00) 100%);
    transform: translateX(10px);
}
.rulesServP {
    /* cursor: default; */
    user-select: none;
    color: #00C6C6;
    font-family: 'Jura', sans-serif;
    transform: translate(27px, -5px);
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.rulesWar {
    width: 410px;
    height: 49px;
    flex-shrink: 0;
    border-radius: 15px;
    background: linear-gradient(90deg, #864141 0%, rgba(0, 0, 0, 0.00) 100%);
    transform: translateX(10px);
}
.discordBut {
    user-select: none;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    background-color: #6E85FF;
    border-radius: 100px;
    transform: translate(180px, 300px);
    z-index: 3;
}
/* .dbBlur {
    position: absolute;
    user-select: none;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    background-color: #6E85FF;
    border-radius: 100px;
    transform: translate(180px, 300px);
    z-index: 2;
} */
.discord1 {
    user-select: none;
    -webkit-user-drag: none;
    width: 150px;
    height: 110px;
    transform: translateY(19px);
    z-index: 3;
}
.discordBut:hover {
    outline: none;
    transform: translate(179px, 299px); 
    border: 2px solid #6E85FF;
    box-shadow: 0 0 10px #6E85FF;
}
/* .discordP {
    color: #180071;
    user-select: none;
    font-family: 'Jura', sans-serif;
    transform: translate(27px, -5px);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
} */
.rulesWarP {
    color: #919191;
    user-select: none;
    font-family: 'Jura', sans-serif;
    transform: translate(27px, -5px);
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.cImg {
    -webkit-user-drag: none;
    width: 25px;
    position: absolute;
    left: 2px;
    top: 10px;
    /* height: 50px; */
    flex-shrink: 0;
}
.sImg {
    -webkit-user-drag: none;
    width: 25px;
    position: absolute;
    left: 2px;
    top: 10px;
    /* height: 50px; */
    flex-shrink: 0;
}
.wImg {
    -webkit-user-drag: none;
    width: 30px;
    position: absolute;
    left: 2px;
    top: 11px;
    /* height: 50px; */
    flex-shrink: 0;
}
.rulesCountr:hover {
    scale: 1.01;
}
.rulesDisc:hover {
    scale: 1.01;
}
.rulesWar:hover {
    scale: 1.01;
}
.rulesServ:hover {
    scale: 1.01;
}
.spawnImg {
    position: sticky;
    width: 1900px;
    height: 1096.791px;
    flex-shrink: 0;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
    /* filter: blur(2px); */
}
.blackBlur {
    position: absolute;
    width: 1900px;
    height: 1096px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1;
}
.text1 {
    position: absolute;
    color: #FFF;
    font-family: 'Jura', sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    left: 169px;
    top: 380px;
    z-index: 2;
}
.text2 {
    position: absolute;
    color: #FFF;
    font-family: 'Jura', sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    left: 169px;
    top: 80px;
    z-index: 2;
}
.ipJava {
    width: 465px;
    height: 206.5px;
    flex-shrink: 0;
    position: absolute;
    left: 169px;
    top: 300px;
}
.ipJavaT {
    position: absolute;
    color: #FFF;
    font-family: 'Jura', sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    left: 180px;
    top: 200px;
    z-index: 2;
}
.ipJava1 {
    user-select: none;
    position: absolute;
    color: #FFF;
    font-family: 'Silkscreen', cursive;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    left: 190px;
    top: 350px;
    z-index: 2;
}

/* .ipJava:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
} */

.ipBedrock {
    width: 465px;
    height: 206.5px;
    flex-shrink: 0;
    position: absolute;
    left: 169px;
    top: 600px;
}
.ipBedrockT {
    position: absolute;
    color: #FFF;
    font-family: 'Jura', sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    left: 180px;
    top: 500px;
    z-index: 2;
}
.ipBedrock1 {
    user-select: none;
    position: absolute;
    color: #FFF;
    font-family: 'Silkscreen', cursive;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    left: 190px;
    top: 650px;
    z-index: 2;
}
.Disc1 {
    user-select: none;
    position: absolute;
    color: #FFF;
    font-family: 'Jura', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    max-width: 600px;
    line-height: normal;
    left: 1090px;
    top: 250px;
    z-index: 2;
}