html {background:radial-gradient(circle,#bbe9db ,#9ba6a5 ,lightblue) ;
    
    
}





.main {
    position: absolute;
    background-image: url('titancloud.png');
    height: 40em;
    background-repeat: no-repeat;
    width: 80em;
    border: 10px solid black;
    box-shadow: 10px 10px 60px;
    




}


.title {
    position: relative;
top: 300px;
left: 300px;
text-align: center;
color: palegoldenrod;
font-size: 50px;
background-color: #aeccc6;
width: 530px;
height: 150px;
border: 20px solid gray;
border-radius: 90px;
box-shadow: -20px 20px 20px black;
font-family: 'Luckiest Guy', cursive;
text-shadow:-20px 20px 20px black ;
transform: rotate(-30deg);
 
}


.mainTwo {
    display:flex;
position:relative; 
width: 400px;
height: 400px;
background-color: #9ba6a5;
text-align: center;
left: 1450px;
top: 400px;
border: 20px solid;
border-radius: 50px 50px 0px 200px;



}
.form {display: grid;
    position: relative;
   bottom: 10px;
   align-content: center;
   left: 100px;
   grid-gap:10px;

   
}
.mainInner {
    position: absolute;
    background-color: #aeccc6;
    width: 300px;
    height: 300px;
    top: 10px;
    left: 50px;
    border: 5px dotted gray;
}
.btn { 
    position: relative;
    width: 100px;
    color: #aeccc6;
    background: black;
    margin: auto;
}
.btn:hover {

    background:#9ba6a5 ;
}
.cloud {
position: absolute;
left: 1500px;
width: 200px;
animation-name: cloud;
animation-duration: 5500ms;
animation-iteration-count: infinite;

}
.lightning {
    opacity: 0;
    position: absolute;
    left: 1500px;
    top: 100px;
    height: 300px;
    width: 300px;
    animation-name: lighting;
    animation-duration: 300ms;
    animation-iteration-count: infinite;
}

@keyframes cloud {

    80% {left: 1570px;}
    
}
@keyframes lighting {
    80% {opacity: .7; }
   
}


@media screen and (max-width:375px) {
    html {
        transform: scale(.4);
        height: 600px;
        width: 375px;
        background-repeat: no-repeat;
    }
}