:root {
   --background: white;
   --color: #2b2b2b;
   --font-size: 3vw;
   --content-width: 75%;
   --content-max-width: 500px;
   --gray-color: #1b1b1b;
   --blue-color: #72C9DC;
   --dark-blue-color: #4A8895;
 }

 body {
   background-color: var(--background);
   color: var(--color);
   font-family: 'Helvetica', 'Arial', sans-serif;
   font-size: var(--font-size);
 }

  /* Vertical and Horizontal centering */
  .outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  .middle {
    display: table-cell;
    vertical-align: middle;
  }

  .inner {
    margin-left: auto;
    margin-right: auto;
    width: var(--content-width);
    max-width: var(--content-max-width);
  }

  /* Under construction text */
  .description {
    text-align: center;
    color: var(--gray-color);
  }

  /* contact link */
  .contact {
    text-align: center;
  }

  .contact a {
    text-align: center;
    color: var(--gray-color);
  }

  /* Dark mode */
  @media (prefers-color-scheme: dark) {
     :root {
       --background: #343434;
       --color: white;
       --gray-color: #AEAEAE;
     }
   }

   /* Screen width > 601 px */
   @media only screen and (min-width: 600px) {
     :root {
       --font-size: 2vw;
       --content-width: 50%;
     }
   }

   /* Screen width > 1200 px */
   @media screen and (min-width: 1200px) {
     div {
        font-size: 23px;
     }
   }