@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playwrite+AU+SA:wght@100..400&display=swap');;
body{
    font-family: "roboto";
}
.header{
    height: 90vh;
    /* background-image:url(https://cdn.pixabay.com/photo/2023/08/21/03/34/droplets-8203505_1280.jpg); */
    background-image:url(https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2029&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.navbar-brand{
    color: rgb(224, 121, 121);
    font-family: "Great vibes";
    font-size: 30px;
}
.glass{
    width: 90%;
    height: 90%;
    background: linear-gradient(to top right, rgba(225, 225, 225, 0.1), rgba(225, 225, 225, 0.2));
    border: 1px solid rgba(225, 225, 225, 0.58);
    backdrop-filter: blur(2px);
    z-index: 1;
    box-shadow: 0 8px 20px  rgba(0, 0, 0, 1) ;
    position: relative;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    font-size: 80px;
    font-variant: small-caps;
    color: white;
    font-family: "Playwrite AU SA";
    text-align: center;
}
.btn{
    font-family: "roboto";
}
.navbar{
    background: linear-gradient(135deg, #09008a, #a82eea,  #d625aa);
    /* background: linear-gradient(135deg, rgb(23, 60, 113), #833AB4); */
    margin-bottom: 0; 

}
.navbar-collapse {
    transition: all .5s ease-in-out;
}

input::placeholder{
    font-size: 15px;
}

.grid{
    animation: autoshow both 1.5s ease-out;
    animation-timeline: view(70% 10%);
}

.reveal{
    opacity: 0;
    transform: translateY(20px);
}
.reveal.visible{
    opacity: 1;
    transform: translateY(0);
    transition: all ease-in-out .5s;
}
.left-to-right{
    opacity: 0;
    transform: translateX(-20px);
}
.left-to-right.visible{
    opacity: 1;
    transform: translateY(0);
    transition: all ease-in-out .5s;
}
@keyframes gridScroll {
    from {
        opacity: 0;
        transform: translateY(200px) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

  
@media screen and (max-width:720px){
    .image{
        width: 90%;
        height: 400px;
    }
}