styles.css

*{
  font-family: 'Chewy', cursive;
}

body {
  background: rgb(211, 211, 211);
  height: calc(100vh);
  width: calc(100vw);
  margin: 0;
}

div.petertitle {
  font-family: 'Chewy', cursive;
  display:grid;
  grid-template-columns: auto 1fr auto;
  font-size: 35px;
  text-align: center;
  padding: 10px;
  background-color: #a2c2eb;
  margin-bottom: 30px;
}

.peterimage {
  height:150px
}

.canvastitle {
  background: rgb(67,95,193);
  background: linear-gradient(90deg, rgba(67,95,193,1) 0%, rgba(124,136,193,1) 41%, rgba(156,198,243,1) 69%, rgba(137,193,231,1) 100%);
  padding: 10px;
  font-size: 40px;
  text-align: center;
  display:grid;
  grid-template-columns: auto 2fr auto;
}

h2 {
  font-size: 40px;
  text-align: center;
}

div.centerblock{
  display: flex;
  justify-content: center;
  align-items: center;
}

div.block {
  background: rgb(67,95,193);
  background: linear-gradient(90deg, rgba(67,95,193,1) 0%, rgba(124,136,193,1) 41%, rgba(156,198,243,1) 69%, rgba(137,193,231,1) 100%);
  padding: 30px;
  border-radius: 40px;
  width: 900px; 
  font-family: 'Chewy', cursive; 
  text-align: center;
  font-size: 25px;
  box-shadow: 4px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px #969696;
}

a:link, a:visited {
  background-color: rgb(255, 255, 255);
  color: black;
  border: 5px solid #a2c2eb;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block

}

a:hover, a:active {
  background-color: #a2c2eb;
  color: white;
}

div.centerlink {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  grid-gap: 1rem;
   
  }
   
#card1 {
background-color: #fdefb0;
border: 2px solid #e7e7e7;
border-radius: 4px;
text-align: center;
padding: .5rem;
font-size: 25px;
letter-spacing: 1px;
}

#card2 {
  background-color: #fce891;
  border: 2px solid #e7e7e7;
  border-radius: 4px;
  text-align: center;
  padding: .5rem;
  font-size: 25px;
  letter-spacing: 1px;
  }

#card3 {
  background-color: #f5dd72;
  border: 2px solid #e7e7e7;
  border-radius: 4px;
  text-align: center;
  padding: .5rem;
  font-size: 25px;
  letter-spacing: 1px;
  }

#card4 {
  background-color: #f5d64c;
  border: 2px solid #e7e7e7;
  border-radius: 4px;
  text-align: center;
  padding: .5rem;
  font-size: 25px;
  letter-spacing: 1px;
  }

div.point-1 {
  height: 30px;
  width: 300px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 1px;
}


.cards2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 0.1rem;
  margin-top: 30px;
  }

#card5 {
background-color: rgb(188, 191, 209);
border: 2px solid #e7e7e7;
border-radius: 4px;
text-align: center;
padding: .5rem;
font-size: 15px;
letter-spacing: 1px;
}

#card6 {
  background-color: rgb(159, 168, 204);
  border: 2px solid #e7e7e7;
  border-radius: 4px;
  text-align: center;
  padding: .5rem;
  font-size: 15px;
  letter-spacing: 1px;
  }

#card7 {
  background-color: rgb(117, 135, 202);
  border: 2px solid #e7e7e7;
  border-radius: 4px;
  text-align: center;
  padding: .5rem;
  font-size: 15px;
  letter-spacing: 1px;
  }

#card8 {
  background-color: rgb(107, 125, 197);
  border: 2px solid #e7e7e7;
  border-radius: 4px;
  text-align: center;
  padding: .5rem;
  font-size: 15px;
  letter-spacing: 1px;
  }

#card9 {
  background-color: rgb(67,95,193,1);
  border: 2px solid #e7e7e7;
  border-radius: 4px;
  text-align: center;
  padding: .5rem;
  font-size: 15px;
  letter-spacing: 1px;
  }

.canvas-container {
  margin: 0 auto;

}

button, button:visited {
  background-color: white;
  color: black;
  border: 3px solid #f5d64c;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  justify-content: center;
}

button:hover, button:active {
  background-color: #f5d64c;
  color: white;
}


.buttons {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: auto;
  grid-gap: .5rem;
  margin-bottom: 20px;
  }