body{
    font-family: 'Roboto', sans-serif;
    background-color: #74d6c1;
    background-image: url(images/puzzleBoard.svg);
    background-size: cover;
}
h1{
    text-align: center;
}
/* library title */
#title{
    background-color:#a00505;
    color: #e6f17b;
    border: 5px solid #74d6c1;
    border-radius: 24px 48px 32px 64px;
    margin: 0;
    padding: 20px;
}
/*story book design*/
#libraryBooks{
    padding: 2% 5%;
}
.storyBook{ 
    width: 80%;
    display: inline-block;
    margin: 16px;
    text-align: center; 
}
img{
    margin: 4px;
}
/* story book colour one */
.redBook{
    background-color: #a00505;
    color: #be9494;
    transform: rotate(2deg);
}
.redImg{
    background-color: #be9494;
}
/* story book colour two */
.blueBook{
    background-color: #355bc5;
    color: #c6cddf;
    transform: rotate(-3deg);
}
.blueImg{
    background-color: #c6cddf;
}
/* story book colour three */
.greenBook{
    background-color: #216e24;
    color: #9dbb9f;
    transform: rotate(1deg);
}
.greenImg{
    background-color: #9dbb9f;
}

@media screen and (min-width: 485px){
    .storyBook{
        width: 40%;
    }
}

@media screen and (min-width: 770px){
    .storyBook{
        width: 28%;
    }
}

@media screen and (min-width: 1200px){
    .storyBook{
        width: 30%;
    }
}