body {
    background-image: url(images/background.jpg);
    background-size: cover;
}


main {
    display: grid;
    grid-template-areas:
    'title title title title '
    'hero hero hero hero'
    'hero hero hero hero'
    'P1 P2 P3 P4'
    'P1 P2 P3 P4'
    'bottom bottom bottom bottom';

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
    width: 1280px;
    margin:auto;
    background-color: rgba(255, 255, 255, 0.9);
    align-items: center;
    justify-items: center;
    gap: 10px;
    padding: 10px;
  
}
.title {
  grid-area: title;
  text-align: center;
  font-family: 'Tilt Neon', sans-serif;
  font-size:50px;
    width: 1000px;
    background-image: url(images/TerenceLogo.webp);
    background-size: 50px; 
    background-repeat:no-repeat;
    background-position:25%;
}
.paragraph1 {
  grid-area: P1;
  font-family: 'Play', sans-serif;

}
.paragraph2 {
  grid-area: P2; 
  font-family: 'Play', sans-serif;
   
}
.paragraph3 {
  grid-area: P3;
  font-family: 'Play', sans-serif;

    
}
.paragraph4 {
  grid-area: P4;
  font-family: 'Play', sans-serif;

    
}
.foot {
  grid-area: bottom;
  font-family: 'Play', sans-serif;
  font-weight: bold;
}
.HeroPicture{
  grid-area: hero;
}