main{
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #080808;
}
main section{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 965px;
    max-width: 1950px;
}
main section .firstpage{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #4747477d;
backdrop-filter: blur(14.8px);
-webkit-backdrop-filter: blur(14.8px);
}
main section .firstpage .fpagebc{
position: relative;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
width: 98%;
height: 98%;
background: url(loginbc.jpg);
background-repeat: no-repeat;
background-position: 50%;
border-radius: 15px;
}

main section .firstpage .fpagebc h4{
font-family: 'handipro';
    font-size: clamp(2rem,5vw,8rem);
color: white;
}
main section .firstpage .fpagebc h5{
font-family: 'handipro';
font-size: clamp(1.5rem,3.5vw,7.5rem);
color: transparent;
    -webkit-text-stroke: 0.1px #e73c45;
transition: all .3s ease-in-out;

}
main section .firstpage .fpagebc h5:hover{
color: #e73c45;

}



main section .logincntr{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 70%;
background: rgba(71, 71, 71, 0.49);
backdrop-filter: blur(14.8px);
-webkit-backdrop-filter: blur(14.8px);
}
main section .logincntr .homebtn{
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
width: 90%;
height: auto;
margin-top: 30px;
}
main section .logincntr .homebtn h3{
font-family: 'musticapro';
font-size: 0.9rem;
color: #fff;
margin-right: 10px;
}

main section .logincntr .homebtn a{
width: 40px;
height: 50px;
opacity: 0.8;
transform: rotate(90deg);
transition: all .3s ease-in-out;
}
main section .logincntr .homebtn a:hover{
opacity: 1;
}

main section .logincntr .homebtn a img{
position: relative;
width: 100%;
height: 100%;
}

main section .logincntr .wrap{
position: relative;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
width: 95%;
max-width: 768px;
height: 100%;
padding: 20px;

}
main section .logincntr .wrap h4{
font-family: 'handipro';
font-size: 2rem;
color: #fff;
margin-bottom: 15px;
}

main section .logincntr .wrap .sub{
font-family: 'musticapro';
font-size: 1rem;
color: #fff;
margin-bottom: 15px;
}

main section .logincntr .wrap .panel{
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
width: 100%;
height: auto;
gap: 5px;
margin-top: 10px;
}
main section .logincntr .wrap .panel #key{
width: 100%;
height: 50px;
font-family: 'handipro';
color: #fff;
border-radius: 10px;
border: none;
padding: 5px;
transition: all .2s ease-in-out;
  background: #c7c7c714; 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
outline: 1px solid #8e8e8e;


}
main section .logincntr .wrap .panel #key::placeholder{
color: #c5c5c5;
}

main section .logincntr .wrap .panel #key:hover{
background-color: rgba(210, 210, 210, 0.162);
}

main section .logincntr .wrap .panel #key:focus{
outline: 1px solid white;
}

main section .logincntr .wrap .panel #btn{
width: 100%;
height: 50px;
background-color: #e7e7e7;
border: none;
color: #000;
font-family: 'handipro';
font-size: 1rem;
border-radius: 10px;
cursor: pointer;
transition: all .3s ease-in-out;
margin-top: 10px;
}
main section .logincntr .wrap .panel #btn:hover{
background-color: #c5c5c5;
}
main section .logincntr .wrap .panel #err{
font-family: 'musticapro';
font-size: 1rem;
color: #ff0000;
transition: all .3s ease-in-out;
}
main section .logincntr .wrap .panel .note{
font-family: 'musticapro';
font-size: 1rem;
color: #fff;   
width: 100%;
height: 35px;
border-bottom: 1px solid #c5c5c5;
margin-bottom: 10px;
}
main section .logincntr .wrap .panel h3{
font-family: 'handipro';
color: #fff;
font-size: 1rem;
margin-bottom: 10px;
}

main section .logincntr .wrap .panel .buybtn{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 10px;
background: none;
color: #fff;
height: 50px;
width: 150px;
text-decoration: none;
}
main section .logincntr .wrap .panel .buybtn button{
position: relative;
width: 100%;
height: 100%;
border-radius: 10px;
border: none;
cursor: pointer;
font-family: 'musticapro';
color: #000;
transition: all .2s ease-in-out;
}
main section .logincntr .wrap .panel .buybtn button:hover{
background: #c5c5c5;
}

@media (max-width: 1024px){
main section .firstpage{
    display: none;
}
main section .logincntr{
width: 100%;
}
}