@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
.kaushan-script-regular {
    font-family: "Kaushan Script", serif;
    font-weight: 400;
    font-style: normal;
  }
.hero{
    background-image: url('https://images.unsplash.com/photo-1445019980597-93fa8acb246c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8aG90ZWx8ZW58MHx8MHx8fDA%3D');
    background-position: center;
    background-size: cover;
    height: 100vh;
}
input{
    color: rgb(0, 0, 0);
   
}
input:hover{
    color: black;
    background-color: rgba(0, 0, 0, 0.442);
}
.h11{
    text-shadow: 2px 2px 2px black;
}
.dev{
    background: rgba( 255, 255, 255, 0.05 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 15.5px );
-webkit-backdrop-filter: blur( 15.5px );
border-radius: 20px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.box{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.box:hover{
    transform: translateY(-10px); 
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); 
}
.hero-content{
    margin-top: 20%;
}
.scrolling{
    height: 450px;
}
@media screen and (min-width:220px){
    .hero-content{
    margin-top: 70%;
}
.scrolling{
    height: 350px;
}
}
@media screen and (min-width:720px){
    .hero-content{
    margin-top: 50%;
}
.scrolling{
    height: 400px;
}
}
@media screen and (min-width:920px){
    .hero-content{
    margin-top: 30%;
}
.scrolling{
    height: 450px;
}
}
@media screen and (min-width:1023px){
    .hero-content{
    margin-top: 20%;
}
.scrolling{
    height: 450px;
}
}