.space-mono-regular {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
  }
  
  .space-mono-bold {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: normal;
  }
  
  .space-mono-regular-italic {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: italic;
  }
  
  .space-mono-bold-italic {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: italic;
  }
.sora {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}  
.title { 
    grid-area:title;
}
.image { 
    grid-area:image ;
}
.par1 {
    grid-area:par1;
    font-family: "Space Mono", monospace;
}
.par2 {
    grid-area:par2;
    font-family: "Sora", sans-serif;
}
.par3 {
    grid-area:par3;
    font-family: "Space Mono", monospace;
}
.par4{
    grid-area:par4;
    font-family: "Sora", sans-serif;
}
.footer{
    grid-area:footer;
}
.grid-container {
    display: grid;
    width: 60%;
    height: 200vh;
    margin: auto;
    grid-template-areas:
      'title title title title'
      'image image image image'
      'par1 par2 par3 par4'
      'par1 par2 par3 par4'
      'par1 par2 par3 par4'
      'par1 par2 par3 par4'
      'footer footer footer footer';
    gap: 2px;
    background-color: rgba(red, green, blue, alpha);
    border-radius: 25px;

    padding: 2px;
}
.grid-container > div {
    background-color: rgba(red, green, blue, alpha);
    text-align: center;
    font-size: 30px;
    
}
body{
    background-image: url(Image/glaggle-glaggleland.gif);
    background-repeat: no-repeat;
    background-size: cover ;
}