@font-face{
    font-family: 'PragatiNarrow';
    src: url(../fonts/Pragati_Narrow/PragatiNarrow-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}
@font-face{
    font-family: 'PragatiNarrow';
    src: url(../fonts/Pragati_Narrow/PragatiNarrow-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}
@font-face{
    font-family: 'PressStart2P';
    src: url(../fonts/Press_Start_2P/PressStart2P-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}

*{
margin: 0;
padding: 0;
}
a{
    text-decoration: none;
    color: inherit;
}


body{
    z-index: 1;
    width: 100vw;
    height: 100vh;
    /* background: #2D1E2D; */
    background: linear-gradient(135deg, #2D1E2D, #040018);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}


a{
    text-decoration: none;
}
header{
    backdrop-filter: blur(10px);
    z-index: 1;
    max-width: 666px;
    margin-top: 25px;
    width: 666px;
    height: 47px;
    border-radius: 26px;
    border: 2px solid rgba(255, 255, 255, 0.06);
    background: rgba(217, 217, 217, 0.1);
    font-family: 'PressStart2P';
    float: right;
    display: flex;
    align-items: center;
    justify-content: space-evenly; 
}
header a {
    color: #FFFFFF;
    user-select: none;
}
/* кнопки header */
.zbtn{
    display: flex;
    align-items: center;
    justify-content:center;
    width: 129px;
    height: 35px;
    background:rgba(0, 0, 0, 0);
    border: 0.2px solid rgba(0, 0, 0, 0);
    border-radius: 26px;
    transition: all 100ms;
}
.zbtn:hover {
    background:rgba(0, 0, 0, 0.15);
    border: 0.2px solid rgba(0, 0, 0, 0.125);
    transition: all 100ms;
}

.active{
    background:#FF8801;
    border-radius: 26px;
    transition: all 100ms;
}


/* Блок приветствия */
.zhello{
    z-index: 1;
    margin-top: 85px;
    float: right;
    display: flex;
    width: 601px;
    height: 91px;
    border-radius: 40px 40px 40px 4px;
    align-items:center; 
    justify-content: center;
}
.hello {
    font-family: 'PressStart2P';
    color: rgb(68, 248, 44);
    font-size: 36px;
    text-shadow: 4px 4px 1px rgba(0, 0, 0, 0.5);
    transition: all 300ms;
    user-select: none; 
}
.hello:hover{
    transition: all 300ms;
    transform: translateY(-10px);
    text-shadow: 10px 10px 5px rgba(0, 0, 0, 0.4);
}
.hello:active{
    transition: all 300ms;
    transform: translateY(-25px);
    text-shadow: 15px 15px 9px rgba(0, 0, 0, 0.5);
}

/* Задний фон основного блока текста */
.zmaintext{
    padding: 20px;
    margin-top: 40px;
    display: flex;
    width: 1000px;
    height: max-content;
    background:rgba(255, 253, 251, 0.02);
    border:1px solid rgba(107, 107, 107, 0.37);
    backdrop-filter: blur(15px);
    border-radius: 35px;


}
.zmaintext p{
    color: rgb(133, 255, 96, 1);
    font-family: 'pressstart2p';
    font-size: 15px;
    line-height: 30px;
    text-shadow: 2px 2px black;
}


.f4 {
    color: rgba(248, 129, 32, 0.918);
}
.f3{
    color:rgba(228, 19, 19, 0.918);
}
.f2{
    color: rgba(30, 226, 151, 0.918);

}
.f1{
    color: rgba(248, 129, 32, 0.918);
}

/* Анимированный круг заднего фона */
.elips{
    width: 300px;
    height: auto;
    z-index: 0;
    position: fixed;
    display: flex;
    user-select: none;
}
.elips1{
    animation: elips1 12s ease-in-out infinite;
}
/* анимация круга заднего фона */
@keyframes elips1 {
0%,100%{
    top: 50vh; rotate: 126deg;

}
50%{ top: 0vh;rotate:330deg;

}
}



.panel{
    position: fixed;
    display: flex;
    height: 100%;
    width: 15%;
    background: linear-gradient(rgb(192, 28, 192),rgb(38, 0, 255));
    filter: blur(10vw);
    z-index: -2;
}

.leftP{
    left: 100%;
    height: 200%;
    translate: -100%;
    animation: anm2 12s ease-in-out infinite;
    background: linear-gradient(rgb(38, 0, 255),rgb(192, 28, 192));
}
.rightP{
    height: 200%;
    right: 100%;
    translate: 100%;
    background: linear-gradient(rgb(38, 0, 255),rgb(192, 28, 192));

    animation: anm1 12s ease-in-out infinite;
}
.topP,.bottomP{
    width: 100%;
    height: 15%;
}
.topP{
    top: 0%;
    background: linear-gradient(rgb(192, 28, 192),rgb(252, 165, 3));
}
.bottomP{
    background: linear-gradient(rgb(0, 0, 0));
    bottom: 0%;
    z-index: -3;
}

@keyframes anm1{
    0%,100%{
        bottom: -200%;
    }
    50%{
        bottom:0%;
    }
}
@keyframes anm2{
    0%,100%{
        bottom: 0%;
    }
    50%{
        bottom:-200%;
    }
}