*{ 
    padding: 0; 
    margin: 0; 
    border: 0; 
    text-decoration: none; 
    font-family: Inter;

   } 
    
   :focus,:active{outline: none;} 
   a:focus,a:active{outline: none;} 
    
   nav,footer,header,aside{display: block;} 
    
   :root{ 
    --blue: #10069F; 
    --yellow: #FFD700;
   }  
    
   input,button,textarea{font-family:inherit;} 
    
   input::-ms-clear{display: none;} 
   button{cursor: pointer;} 
   button::-moz-focus-inner {padding:0;border:0;} 
   a, a:visited{text-decoration: none;} 
   a:hover{text-decoration: none;} 
   ul li{list-style: none;} 
   img{vertical-align: top;} 
    
   h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;} 
    
   html{ 
    scroll-behavior: smooth; 
   }


body{
    background-color: #000;
}


/* HEADER */

.header{
    height: 60px;
    background-color: black;
    border: 1px solid #000;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: space-between;
/*     padding: 20px 40px;
 */}

.logo {
    height: 75px;
    padding: 10px;
}
.list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
}
.element{
    color: #fff;
    font-size: 16px;
    


}
.login-btn {
    width: 125px;
    height: 50px;
    border-radius: 15px;
    background: #10069F;
    color: #fff;
    display: none;


}


/* MAIN */

.main{
    background-color: #000;
    color: #fff;
}
.section__regestation {
    position: relative;
    display: flex;
/*     padding: 20px 60px;
 */    justify-content: space-evenly;
}
.regestration__text-box {
}
.title {
    font-size: 50px;
    max-width: 500px;
    margin-top: 175px;
}

.regestation__image{
    width: 50px;
    height: 50px;
    margin: 0px auto;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));

}
.regestration {
    width: 100%;
    max-width: 450px;
    min-width: 250px;
    height: 500px;
    border-radius: 60px;
    background: linear-gradient(19deg, #0095FF -34.68%, #10069F 114.19%);    
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.regestation__username {
    border-radius: 20px;
    width: 100%;
    height: 50px;
    font-size: 20px;
    padding-left: 10px ;
}
.regestation__email {
    padding-left: 10px ;
    border-radius: 20px;
    width: 100%;
    height: 50px;
    font-size: 20px;
}
.regestation__password {
    padding-left: 10px ;
    border-radius: 20px;
    width: 100%;
    height: 50px;
    font-size: 20px;
}
.regestation__tel {
    padding-left: 10px ;
    border-radius: 20px;
    width: 100%;
    height: 50px;
    font-size: 20px;
}
.regestration__button {
    border-radius: 20px;
    width: 100%;
    height: 50px;
    font-size: 20px;
    border-radius: 20px;
background: #FFD700;
}


.efect{
    position: absolute;
    box-shadow : 0px 0px 100px 100px  #10069F;
    background-color: #10069f;
    width: 50px;
    height: 50px;
    bottom: 0;
    left: 30%;
    border-radius: 50%;
    z-index: 1;
}
#efect{
    position: absolute;
    box-shadow : 0px 0px 100px 100px  var(--yellow);
    background-color: #FFD700;
    width: 50px;
    height: 50px;
    top: 300px;
    left: -75px;
    border-radius: 50%;
}

.emoji-img{
    position: absolute;
    width: 60px;
    height: 60px;
}
.emoji-img{
    top: 20px;
}

.monaywings {
    top: 100px;
    left: 100px;
    rotate: 20deg;

}
.moneybag {
    height: 70px;
    width: 70px;
    top: 300px;
    left: 92%;
    rotate: 20deg;
}
.sunglasses {
    top: 500px;
    left: 100px;
    rotate: 10deg;
    width: 80px;
    height: 80px;
}




/* LOAD */


.mask{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
    position: fixed;
    z-index: 50;
}
.mask.hide{
    display: none;
    
}
.mask img{
    animation: 5s load infinite alternate;
    
}
@keyframes load {
    0%{
        transform: translate(25px);
    }
    100%{
        transform: translate(-25px);

    }
}
/* MODAL */


.modal-message{
    width: 300px;
    height: 70px;
    background: linear-gradient(262deg, #FFD700 -27.23%, rgba(255, 180, 0, 0.81) 120.21%);
    border-radius: 20px;
    position: fixed;
    right: -350px;
    top: 30px;
    padding: 15px;
    display: block;
    gap: 10px;
    transition: 0.5s;
}
.modal-message.show{
    right: 20px;
}


.modal-message img {
    width: 30px;
    height: 30px;
} 

/* MEDIA */



.regestation input{
    width: 100%;
}

/* Стилі для великих екранів (дисплей максимум 1199рх) */
@media (max-width: 1199px) {

    #efect{
        left: -125px;
    }
    ¨.efect{
        top: 700px;
    }
    .title{
        font-size: 40px;
        margin-left: 20px;
    }

 }

/* Стилі для середніх екранів (дисплей максимум 991рх) */
    @media (max-width: 991px) { 

        #efect{
            left: -150px;
            box-shadow: 0px 0px 80px 80px var(--yellow);
        }
        ¨.efect{
            top: 700px;
        }
        .title{
            margin: 0px;
            width: 550px;
        }
        .section__regestation{
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .moneybag {
            position: absolute;
            height: 70px;
            width: 70px;
            top: 270px;
            left: 84%;
            rotate: 20deg;
            
        }
     }

     @media (max-width: 920px) {
        .info__image-box{
            display: none;
        }
        #efect{
            left: -25px;
            box-shadow: 0px 0px 50px 50px var(--yellow);
        }
        ¨.efect{
            top: 800px;

        }
        .info__button{
            height: 50px;
            width: 250px;
            font-size: 20px;
        }
        .login-btn{
            width: 50px;
        }
     }

     @media (max-width: 820px) {
        .title{
            display: none;
        }
        .efect{
            left: 107vw;
            top: 160px;
        }
     }



/* Стилі для малих екранів (дисплей максимум 767рх) */
    @media (max-width: 767px) { 
        .regestration{
            width: 300px;
        }
       
        .img-menu{
            display: block;
            width: 50px;
            height: 50px;
            margin-left: 150px;
        }
        .list{
            display: none;
        }
        #efect{
            display: none;
        }
        .efect{
            display: none;

        }
        .emoji-img{
            left: 20px;
            width: 50px;
            display: none;
            height: 50px;
        }
        
        
        
        
    }
    
    /* Стилі для дуже малих екранів (дисплей максимум 575рх) */
    @media (max-width: 575px) {
        .emoji-img{
            display: none;
        }
        .section__regestation{
            padding: 20px 30px;
        }
   
        .info__title {
            color: #FFF;
            font-size: 60px;
            font-style: normal;
            font-weight: 800;
            font-family: Inter;
            line-height: normal;
        }
        .info__subtitle {
            font-family: Inter;
            color: #FFF;
            font-size: 40px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
        
        
        
        
        }

        @media (max-width: 440px) {
            
            .info__title {
                color: #FFF;
                font-size: 45px;
                font-style: normal;
                font-weight: 800;
                font-family: Inter;
                line-height: normal;
            }
            .info__subtitle {
                font-family: Inter;
                color: #FFF;
                font-size: 32px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
           /*  input{
                width: 275px!important;
            }

            .regestration__button{
                width: 275px!important;
            }
            
            .regestation{
                height: 450px;
            } */

        }