@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

.layout {
  width: 100%;

  display: grid;
  grid:
    "header header header" auto
    "navBar body body" 1fr
    "footer footer footer" auto
    / 20% auto auto;
  gap: 8px;
}

.header { grid-area: header; }
.navBar { grid-area: leftSide; }
.body { grid-area: body; }
.footer { grid-area: footer; }

html {
  /*display: flex;*/
  justify-content: center;
  font-family: "Josefin Sans";
  background-image: url(oldbg.png);
  animation: bgmove 2.5s infinite;
  animation-timing-function: linear;
}

@keyframes bgmove {
  from {background-position: 0px 0px; }
  to {background-position: 32px 32px; }
}

body {
  background-color: #FFFA;
  border: 5px solid gold;
  border-radius: 5px;
  padding: 5px;
  color: black;
  flex-basis: 50%;
  flex-shrink: 1;
  box-shadow: 10px 10px #0006;
}

div {
  display: flex;
  align-items: center;  
}

.logo {
  height: 100%;
  width: 100%;
  
}

p {
  text-align: center;
  font-size: 22px;
}

li {
  font-size: 20px;
}

h1 {
  text-align: center;
}