.approot {
  /* background: rgb(0,0,0); */
  /* position: ; */
  font-family: sans-serif;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(217, 79, 50, 1) 22%, rgba(255, 255, 255, 1) 100%);
}


svg>.logo-circle {
  fill: blue !;
}

.hero-logo-wrapper {
  /* flex: 5; */
  margin: -5vh
    /* flex-basis: content;    */
}

.hero-logo {
  max-width: 100%;
  height: 50vh;
  width: 60vh;
  max-height: 30vw;
}

.hero-logo>img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  /* justify-items: center; */
}

.page-links-wrapper {
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
  /* flex-grow: ; */
}

.page-links {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  text-justify: distribute;
  text-align: center;
  justify-content: center;
  align-items: center;
  /* min-width: 400px; */
}

.page-button {
  background-color: black;
  border: 2px solid white;
  border-radius: 10%;
  color: white;
  padding: 20px 10px;
  margin: 5px;
}

/* We tell all items to be 100% width, via flex-basis */
/* .wrapper > * {
  } */

/* We rely on source order for mobile-first approach
   * in this case:
   * 1. header
   * 2. article
   * 3. aside 1
   * 4. aside 2
   * 5. footer
   */

/* Medium screens */
@media all and (min-width: 600px) {

  /* We tell both sidebars to share a row */
  .aside {
    flex: 1 auto;
  }
}

/* Large screens */
@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

  .aside-3 {
    order: 4;
  }

  .footer {
    order: 5;
  }
}

a:link {
  text-decoration: solid;
}

a:visited {
  text-decoration: none;
  /* color: red; */

}

a:hover {
  text-decoration: underline;
  color: white;
  /* background-color: darkred; */
}

a:active {
  text-decoration: underline;
}