body {
  background-color: #DCD2E4;
  color: black;
  font-family: Verdana;
}

h1 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.2em;
}


.text-center {
  text-align: center;  
}

.banner {
  background-color: #4C375C;
  padding: 40px 40px 20px 40px;
  color: lightblue;
}

.banner-decoration {
  height: 50px;
  background-image: repeating-radial-gradient(
            circle at center top,
            #4C375C 0%,
            #4C375C 50%,
            transparent 50%,
            transparent 100%
        );
  background-size:50px 50px;
}

.grid-container {
  padding: 10px;
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  min-height: 70vh;
}

.grid-main {
  grid-column: 2;
  grid-row: 1 / span 3;
  padding: 5px;
  margin: 0px 10px;
  border: 2px solid purple;
}

.grid-below {
  grid-column: 2;
  grid-row: 4 / 6;
  padding: 5px;
  margin: 0px 10px;
  border: 2px solid blue;
}

.grid-left {
  grid-column: 1;
  grid-row: 1 / span 5;
  padding: 5px;
  margin: 0px 10px;
  border: 2px solid orange;
}

.grid-right {
  grid-column: 3;
  grid-row: 1 / span 5;
  padding: 5px;
  margin: 0px 10px;
  border: 2px solid orange;
}

.left-section {
  padding: 10px;
  border: 1px solid black;
}

footer {
  padding: 10px;  
}

/*Fonts*/

.crafty-girls-regular {
  font-family: "Crafty Girls", cursive;
  font-weight: 400;
  font-style: normal;
}

.cabin-sketch-regular {
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.cabin-sketch-bold {
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
}

.pixelify-sans-bold {
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.pixelify-sans-regular {
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}