body {
  /*background-color: #87FFFD;*/
  color: black;
  font-family: Verdana;
  background-image: url('/images/1012.png');
  background-repeat: repeat; /* This is default, but good to specify */
  background-size: auto;    /* Keeps original image size for tiling */
}
            /* this is the color of the main content area,
    between the sidebars! */
            main {
                background-color: #87FFFD;
                /*flex: 1;*/
                order: 2;
                /*border-radius: 20% 10% 30% 20% / 20% 30% 20% 10%;*/
                  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                      /*overflow: scroll;*/
                overflow-x: hidden;
                /*height: 10em;*/
                padding: 1rem;
                border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
                border: 3px solid purple;

            }
.frontpage {
  height: 300px;
  width: 300px;
  margin: 2px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
footer {
                background-color: #d9c127;
                /* background color for footer */
                width: 100%;
                padding: 10px;
                color: #d8e2f2;
                text-align: center;
                /* this centers the footer text */
            }

            h1,
            h2,
            h3 {
                color: #d8e2f2;
            }

            h1 {
                font-size: 30px; /*change to 25*/
            }
.menu-list {
    list-style-type: none; /* Removes the bullet points */
    padding: 0;            /* Removes default left indentation */
    margin: 0;             /* Removes default browser margins */
  }
  
  .button-56 {
  align-items: center;
  background-color: #fee6e3;
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: #111;
  cursor: pointer;
  display: flex;
  font-family: Inter,sans-serif;
  font-size: 16px;
  height: 48px;
  justify-content: center;
  line-height: 24px;
  max-width: 100%;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-56:after {
  background-color: #111;
  border-radius: 8px;
  content: "";
  display: block;
  height: 48px;
  left: 0;
  width: 100%;
  position: absolute;
  top: -2px;
  transform: translate(8px, 8px);
  transition: transform .2s ease-out;
  z-index: -1;
}

.button-56:hover:after {
  transform: translate(0, 0);
}

.button-56:active {
  background-color: #ffdeda;
  outline: 0;
}

.button-56:hover {
  outline: 0;
}

@media (min-width: 768px) {
  .button-56 {
    padding: 0 40px;
  }
}