*{
    color: aliceblue;
    background-color:rgb(33, 32, 32);
    scroll-behavior: smooth;
    box-sizing: border-box;
    list-style:none;
}
body{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
}

.bg-video{
    background-repeat: unset;
    position: absolute;
    top:0%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background-size: cover;
    border-radius: 50px;
    z-index: -1;
}

.container{
    position:absolute;
    top:7%;
    width:550px;
    height: 640px;
    border-top:2px solid #FFFFFF75;
    border-left: 2px solid #FFFFFF75;
    box-shadow:5px 5px 12px #00000035;
    background: #FFFFFF25;
    border-radius: 15px;
    overflow: hidden;
    backdrop-filter: blur(4px);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container form{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: cell;
}
.container form h1{
    background: transparent;
    font-size: 3rem;
}
.container form .intro{
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container form .intro h2{
    background: transparent;
}
.container form .intro h2 span{
    color:#fac915;
}
.container form .intro span{
    padding-bottom: 7px;
}
.container form .icons{
    display: flex;
    flex-direction: row; 
    background: transparent;
    align-items: center;
    justify-content: center;
}
.container form .icons .fi{
    margin: 2px 15px;
    font-size:25px;
    height:44px;
    width:44px;
    cursor: pointer;
    transition:0.3s ease;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 1px solid #1b182b;
    background-color: #1b182b;
    border-radius: 25%;
    padding-top: 4px;
}
.container form .icons .google:hover{
    transform: scale(1.2);
    color:red;
    background-color: aliceblue;
}

.container form .icons .facebook:hover{
    transform: scale(1.2);
    color:aliceblue;
    background-color: rgb(0, 136, 255);
}
.container form .icons .apple:hover{
    transform: scale(1.2);
    color:#1b182b;
    background-color: aliceblue;
}
.container form .icons .twitter:hover{
    transform: scale(1.2);
    color:#1b182b;
    background-color: aliceblue;
}
.container form span{
    margin: 7px;
}
.container form .content{
    display: flex;
    flex-direction: column;
    background: transparent;
}
.container form .content .name, .email, .pass{
    background: transparent;
}
.container form .content .name label, .email label, .pass label{
    background: transparent;
    text-transform: uppercase;
    color:aliceblue;
    padding-left: 10px;
}
.container form .content .name input, .email input, .pass input{
    background: rgba(255, 255, 255, 0.3);
    height: 40px;
    width:300px;
    line-height: 40px;
    border-radius: 20px;
    padding:0px 20px;
    border-color: #fac915;
    color:#fac915;
    font-size: large;
}
.container form .submit{
    background: transparent;
}
.container form .submit button{
    background-color: #fac915;
    height: 40px;
    width:300px;
    line-height: 40px;
    border-radius: 40px;
    border:none;
    margin:10px 0px;
    color:white;
}
.container form .illus{
    background: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.container form .illus p{
    background: transparent;
    margin-right:110px;
}
.container form .illus a{
    all:unset;
    margin-top:15px;
    color:#fac915;
    cursor: pointer;
}