.book-icon-template{
    background-color:#F783D1;
    border-radius: 20px; 
   /* grid-template-columns: 0.5fr 2fr 0.5fr;*/
   padding: 10px; 
   min-width: 320px;
   justify-content: center; 
   display: flex; 
}

.flexContainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
   /* grid-column: 2/3;*/
    text-align: center;
    flex-shrink: 1; 
    max-width: 100%; 
}

.cloak{
    display: none;  
}

.icon-title{
    font-weight: bold; 
}

.form-div{
    padding: 20px; 
    display: flex;
    background-color: #7EED98;  
    flex-direction: column; 
    text-align: center; 
    border-radius: 20px;  
    justify-content: space-around; 
    margin-left: 30%; 
    margin-right: 30%; 
    min-width: 300px; 
}
.book-shelf{
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(450px, 100fr)); 
    gap: 20px; 
    margin-top: 20px; 
}
.form-content, p{
    font-family: 'Poppins', sans-serif; 
    padding-bottom: 5px;  
}
input[type = text], input[type=number], button{
    border-radius: 10px;
    border:  3px solid; 
}
#remove{ 
    font-family: 'Poppins', sans-serif; 
    margin: 10px 0px 10px 0px; 
    flex-shrink: 1; 
}
#create{
    margin-top: 10px; 
    background-color: lightblue; 
    font-size: 1rem; 
}
#clear{
    margin-top: 10px; 
    background-color: lightyellow; 
    font-size: 1rem; 
}
    

h1{
    font-size: 3rem; 
    text-transform: capitalize; 
    text-shadow: 1px 1px 1px green, 3px -3px 3px pink; 
    color: #EDE38C;  
    font-family: 'Fredoka', serif; 
}

body{
    background-color: #736183;  
}

.read-button{
    text-align: center; 
    border-radius: 10px; 
    border: 3px solid; 
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;  
    flex-shrink: 1; 
}

@media(max-width: 500px){
    .form-div{
        margin-left: 0; 
        margin-right: 0; 
    }
}
p{
    width: 100%; 
    word-wrap:break-word; 
}