@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body{
    overflow-x: clip;
}
#dev-team {
    background-image: url(../assets/planet-581239.jpg), url(../assets/stars-7249785_1920.jpg);
    background-size: cover cover;
    background-blend-mode: lighten;
    background-attachment: fixed;
    position: relative;
    margin-top: -40px;
}

#dev-head {
    color: wheat;
    font-size: 60px;
    padding-top: 100px;
    font-family: 'Press Start 2P';
    text-align: center;
    margin-bottom: 90px;

}

#dev-container {
    height: 100vh;
    width: 100vw;
  
    overflow-x: clip;
    display: flex;
    justify-content: space-around;

}

#box-container {
    text-align: center;
    box-shadow:
        0 0 50px #fff,

        20px 0 80px #f0f,

        -20px 0 80px #0ff,

        20px 0 100px #f0f,

        -20px 0 100px #0ff,

        0 0 50px #fff,

        -10px 0 80px #f0f,

        10px 0 80px #0ff;
    width: 250px;
    height: auto;
    border: 1px solid white;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(22, 67, 227));
}

#amit {
    width: 230px;
    height: 230px;
    border-radius: 50%;
}

#dev-name {
    font-size: 30px;
    text-align: center;
    color: white;
    margin-bottom: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#dev-role{
    font-size: 15px;
    text-align: center;
    color: white;
    font-style: italic;
    
    
}
#dev-email {
    font-size: 17px;
    text-align: left;
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#dev-phone {
    font-size: 17px;
    text-align: left;
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#phone {
    height: 18px;
    margin-right: 10px;
}

#gmail {
    height: 18px;
    margin-right: 10px;
}

#astronaut {
    animation: boost 2s infinite alternate;
}


@keyframes boost {

    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-100px);
    }




}





/* ----------setting media query for mobile--------------- */
@media only screen and (max-width: 600px) {


    #dev-head {
        color: wheat;
        font-size: 40px;
        padding-top: 100px;
        font-family: 'Press Start 2P';
        text-align: center;

    }
    


    #dev-container {
        height: 100vh;
        width: 100vw;
    
    
        display: grid;
        grid-template-columns: auto auto;
        margin-top: 60px;
        padding-bottom: 50px;
    
    }


    

    #box-container {
        text-align: center;
        box-shadow:
            0 0 50px #fff,
    
            10px 0 80px #f0f,
    
            10px 0 80px #0ff,
    
            10px 0 50px #f0f,
    
            -10px 0 50px #0ff,
    
            0 0 50px #fff,
    
            -10px 0 80px #f0f,
    
            10px 0 80px #0ff;
        width: 180px;
        height: auto;
        border: 5px solid white;
        padding: 10px;
        border-radius: 10px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(22, 67, 227));
    }
    
    #amit {
        width: 140px;
        height: 140px;
        border-radius: 50%;
    }
    
    #dev-name {
        font-size: 18px;
        text-align: center;
        color: white;
        margin-bottom: 10px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    #dev-email {
        font-size: 13px;
        width: 170px;
        color: white;
        text-align: left;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    #dev-phone {
        font-size: 13px;
        color: white;
        text-align: left;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    #phone {
        height: 15px;
        margin-right: 10px;
    }
    
    #gmail {
        height: 15px;
        margin-right: 10px;
    }
    
    #astronaut {
        width: 150px;
        height: 400px;
        animation: boost 2s infinite alternate;
    }

    @keyframes boost {

        from {
            transform: translateY(0px);
        }
    
        to {
            transform: translateY(100px);
        }
    
    
    
    
    }
    #box1{
        margin-bottom: 30px;
    }
    #box2{
        /* border: 1px solid rgb(255, 7, 7); */
        width: 140px;
        grid-area: 1 / 2 / span 2 / span 1;
    }
    
    


}