body {background-color: rgb(87, 85, 85);}

h1 {color: white; text-align: center; font-size: 50px;}

.topp {padding-top: 0px;
       padding-bottom: 0px;
       font-size: xx-large;
       color: white;
    background-color: rgb(0, 0, 0);}

.paragraph {font-size: 20px;
            color: white;
            text-align: left;}

.middle-center {text-align: center;
                font-size: 20px;
                color: white;
                background-color: rgb(0, 0, 0);}

.middle-right {text-align: right;
               font-size: 20px;
               color: white;
                }

.middle-left {text-align: right;
            font-size: 15px;
            color: white;
            width: 400px;
           }

/* place image and paragraph side-by-side */
.middle-left {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.side-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.middle-left .paragraph {
  flex: 1;
}

.button1 {
  background-color: rgb(142, 170, 144);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1:hover {
  background-color: rgb(81, 160, 87);
    
}

.button2 {
  background-color: rgb(96, 84, 131);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button2:hover {
  background-color: rgb(82, 64, 136);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button3 {
  background-color: rgb(124, 107, 61);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button3:hover {
  background-color: rgb(150, 121, 42);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button4 {
  background-color: rgb(161, 119, 64);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button4:hover {
  background-color: rgb(182, 121, 40);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button5 {
  background-color: rgb(71, 105, 116);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button5:hover {
  background-color: rgb(61, 134, 158);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button6 {
  background-color: rgb(128, 64, 99);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button6:hover {
  background-color: rgb(172, 52, 118);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button7 {
  background-color: rgb(58, 97, 129);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button7:hover {
  background-color: rgb(47, 120, 180);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button8 {
  background-color: rgba(142, 142, 142, 0.589);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button8:hover {
  background-color: rgb(128, 128, 128);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button9 {
  background-color: rgba(200, 142, 142, 0.699);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button9:hover {
  background-color: rgba(255, 66, 66, 0.712);
  border: none;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}