@font-face {
  font-family: 'Pixelham';
  src: url('/fonts/Pixelham-Regular.woff2') format('woff2'),
  url('/fonts/Pixelham-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.title {
    color: green;
}
.layout {
  width: 100%;
    
  display: grid;
    
  grid:
    "header header header" auto
    "leftSide body rightSide" 1fr
    "footer footer footer" auto
    / minmax(auto, 150px) minmax(auto, 622px) minmax(auto, 150px);
    justify-content: center;
  gap: 8px;
}

.header { grid-area: header; 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.leftSide { grid-area: leftSide; }
.body { grid-area: body; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
.rightSide { grid-area: rightSide; }
.footer { grid-area: footer; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body {
    font-size: 22px;
}
h1 {
  margin-bottom: 0; 
}
h2 {
    margin-top: 2px;
}