body {
    background-image: url('images/sky.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    background-position-y: -50px ;
     padding-top:25px;
    padding-bottom:25px;
    padding-left:250px;
    padding-right: 250px;
    background-attachment: fixed;
}
main {
display:grid;
    grid-template-rows: 1fr 3fr 6fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
   
    background-color:rgb(233, 245, 255);
}
#header {
    grid-area: 1 / span 4;
    text-align:center;
 
}
h1 {
    text-align: center;
}
.bonheur-royale-regular {
  font-family: "Bonheur Royale", cursive;
  font-weight: 400;
  font-style: normal;
}

.charm-regular {
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
}

.charm-bold {
  font-family: "Charm", cursive;
  font-weight: 700;
  font-style: normal;
}


#HeroImage {
    grid-area: 2 / span 4;
    width:100%;
    border-top: rgb(14, 15, 85) 10px solid;
    border-bottom: rgb(14, 15, 85) 10px solid;
    background-image: url(images/Hibana.png);
    background-size:cover;
    background-color: rgb(233, 245, 255);
    background-blend-mode: color-burn;
    background-position-y: -25px;
    background-position: center;
    margin:0
}

h2 {
    font-family:'Times New Roman', Times, serif;
    color:rgba(14, 15, 85, 0.75);
    text-align:center;
    font-size:100px;
    
}

#art1 {
    grid-area: 3;
    border-right: rgba(14, 15, 85, 0.5) dotted 2px;
}

#art2 {
    grid-area: 3 / 2;
    border-right: rgba(14, 15, 85, 0.5) dotted 2px;
}

#art3 {
    grid-area: 3 / 3;
    border-right: rgba(14, 15, 85, 0.5) dotted 2px;
}

#art4 {
    grid-area: 3 / 4;
}

#foot {
    grid-area: 4 / span 4;
    border-top: rgb(14, 15, 85) 10px solid;
}

p, footer {
     text-align:center;
     padding:25px;
}