@charset "utf-8";

/* set up the fonts */
body{
    font-family: Verdana, sans-serif;
}

h1, h2, h3, h4{
    font-family: Georgia, serif;
}

/* style a few links */
.box a{
    color: #007bff; /* Blue link color */
    text-decoration: none;
}

.box a:hover{
    text-decoration: underline;
}

/* position the content */
.wrapper{
    margin: 0 auto;
    padding: 0 100px;
}

/* style the header and footer */
#footer, #header{
    float: left;
    clear: both;
    padding: 10px;
    text-align: center;
    width: 100%;
    background-color: #007bff; /* Blue background color */
    color: #fff; /* White text color */
}

/* create the floating boxes */
.box {
    float: left;
    margin: 5px;
    padding: 10px;
    width: 285px;
    height: 480px;
    border: 1px solid #007bff; /* Blue border color */
    background-color: #f0f8ff; /* Light blue background color */
} 

/* style the box content */ 
.box img{
    width: 280px; /* alternatively set the image width in your HTML */
}

.box h3, .box p{
    text-align: center;
    color: #007bff; /* Blue text color */
}