style.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Dancing Script', cursive;
    font-weight: 400;
    text-shadow: 5px 2px 3px rgba(151, 149, 149, 0.301);
}


.container{
    height: 100vh;
    display: flex;
    align-items: center;
    /* border: 2px solid red; */
    padding: 0 25%;
    flex-direction: column;
    background: url(https://media.istockphoto.com/photos/colored-powder-explosion-on-white-background-picture-id1132442970?b=1&k=20&m=1132442970&s=170667a&w=0&h=qZU1t7UPVUZanRUaPIrTa0IJejHGrNQldpWTl_v92M0=);
    background-attachment: fixed;
    background-size: cover;



}

#imgs{
    border-radius: 30px 2px 30px 2px;
}
#list {
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 8px;
    column-gap: 8px;
    column-gap: 12px;
    list-style: none;
    /* border: 2px solid blue; */
    height: 80vh;
    width: 90vw;
    /* background-color: red; */

}



li{
    display: flex;
    /* border: 2px solid red; */
    background-color: rgba(118, 226, 226, 0.752);
    border-radius: 25px;
    word-wrap: break-word;
    text-transform: capitalize;
    padding: 12px 20px;
    box-shadow : inset 0 10px 10px -5px rgba(95, 102, 102, 0.152),
    0 10px 10px -5px rgba(95, 102, 102, 0.952);

}

li:hover{
    font-size: 1.5em;
    

}

.imgs-item{
    place-self: center;
}

#btn{
    position:relative;
    left: 48%;
    top: 12px;
    border-radius: 8px;
    padding: 8px 25px ;
    border: 1px solid black;
    font-size: 1.5em;
    font-weight: 400;

    

}

#btn:hover{
    opacity: 0.8;
    background-color: antiquewhite;

}

.main{
    position: relative;
    top: calc(80vh/2);
    left: calc(70vw/2);
    font-size: 1.2rem;
    font-weight: 600;
    

}
h1{
    font-size: 2em;
    text-shadow: 5px 2px 3px rgb(151, 149, 149);
}