@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Montserrat', sans-serif;
   
}


a{
    color:black;
    text-decoration: none;
}


.content-container{
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
    grid-auto-rows: 300px;
    gap: 1.5em;
    padding: 2em;
    text-align: center;
    align-items: center;
    background-color: rgb(235, 235, 235);
    
}

img{
    width: 100%;
    height: 75%;
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;  
    
}
/* .img:hover{
    width: 100%;
    height: 100%; 
} */

.heading{
    font-size: 1.4rem;
    margin: 1em;
    text-align: center;
    
}

.underline{
    border-bottom: 5px solid orange;
    margin: 10px 40% auto 40%;
    border-radius: 4px;
}

/* image-divs*/
#basketball-project{
    border-bottom: 4px solid #1B244A;
    border-radius: 10px;
    box-shadow: 0 0 5px #1B244A;
}



#blackjack-game{
    border-bottom: 4px solid goldenrod;
    border-radius: 10px;
    box-shadow: 0 0 5px goldenrod;

}


#station-counter{
    border-bottom: 4px solid rgb(7, 2, 59);
    border-radius: 10px;
    box-shadow: 0 0 5px rgb(7, 2, 59);
}

#stop-watch{
    border-bottom: 4px solid hsl(201, 86%, 63%);
    border-radius: 10px;
    box-shadow: 0 0 5px hsl(201, 86%, 63%);

}

#to-do-list,#stone-paper-scissor{
    border-bottom: 4px solid hsl(201, 93%, 34%);
    border-radius: 10px;
    box-shadow: 0 0 5px hsl(201, 93%, 34%);
    

}
#password-generator{
    border-bottom: 4px solid hsl(184, 92%, 43%);
    border-radius: 10px;
    box-shadow: 0 0 5px hsl(173, 95%, 34%);
}

#keep{
    border-bottom: 4px solid hsl(0, 86%, 72%);
    border-radius: 10px;
    box-shadow: 0 0 5px hsl(0, 44%, 59%);
}
/* Animation */

.pop-up{
    width: 80%;
    height: 75%; 
    transition-property: height , width ;
    transition: .5s;
    
    
}

.pop-up:hover{
    width: 100%;
    height: 95%;
   
}
    
.end-text{
    width: 90%;
    height: auto; 
    padding: .4em;
    font-size: 1.2rem;  
}


/* footer */
.footer{
    background-color: black;
    color: white;
    margin-top: 2em;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
}
.fa-heart{
    color: red;
    
}


/* Screen below 750px */
@media (max-width:750px){
    
    .pop-up{
        width: 100%;
        height: 75%; 
        transition-property: height , width ;
        transition: .5s;
        box-shadow: 0 0 5px rgb(132, 132, 132);
    
    }  
    .pop-up:hover{
        width: 100%;
        height: 75%; 
    }
    .content-container{
        display: grid;
        grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
        grid-auto-rows: 300px;
        gap: 1em;
        padding: 2em;
        text-align: center;
        align-items: center;
        background-color: rgb(235, 235, 235);
        
    }
}