body{
    background-color: powderblue;
}
nav a{
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
}
nav{
    background: #cbcbcb;
    padding: 8px 20px;
    display: flex;
    justify-content: space-evenly;
}
header h1{
    text-align: center;
}
section{
    background-color: antiquewhite;
    padding: 20px 40px;
    margin-top: 10px;
}
footer a{
    text-decoration: none;
}
footer{
    text-align: center;
    background-color: aliceblue;
    padding: 3px 1px;
}
main{
    background: #9ca7b1;
    padding: 3px 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}
article{
    background-color: aquamarine;
    padding: 1px 10px;
    margin: 10px 0px;
}
div{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0px;
}
header  {
background-image: url(bokuto2.jpg);
background-repeat:no-repeat; /* Do not repeat the image */
color: lightblue;
background-size: cover; /* Resize the background image to cover the entire container */
/*Comments: You may use your own image from local. Go to W3schools :  CSS : CSS Image-Sprites for more image from CSS.  (https://www.w3schools.com/css/css_image_sprites.asp ) You may use other format like below: background-position:left-side; */
}
#banner h1 {
color: red;
}
#banner h2.author {
color: red;
}
#banner p.homepage {
background-color:blue;
}