* {
   box-sizing: border-box;
}

.wrapper {
   width: auto;
   margin: auto;
   background-color: #555A60;
   box-shadow: 2px 2px 5px black;
   font-family: 'Geologica', sans-serif;
   font-weight: 300;
   text-shadow: .5px .5px 1px black;
}

header {
   background-color: #6B7888;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1em 1em;
}

header h1 {
   font-size: 2.5rem;
   color: white;
   padding-left: 1em;
   text-shadow: 2px 2px .5px black;
   font-weight: 500px;
   transition: all 0.5s ease;
}

header h1 a {
   text-decoration: none;
   color: white;
}

header h1:hover {
   transform: scale(1.05);
}

nav ul {
   list-style-type: none;
   display: flex;
   flex-wrap: wrap;
   transition: all .5s ease;
}

nav ul ul {
   display: none;
   position: absolute;
   top: 100%;  
}

nav ul li:hover > ul {
   display: inherit;
}

nav ul ul li {
   width: 100%;
   float: none;
   display: list-item;
   position: relative;
}

nav a {
   padding: 1rem 1rem;
   display: block;
   color: white;
   text-decoration: none;
   font-weight: bold;
   text-shadow: 1.5px 1.5px .75px black;
   transition: all .3s ease;
}

nav a:hover {
   background-color: grey;
   border-radius: 2rem;
   transform: scale(1.15);
}

main {
   background-color: #555A60;
   display: grid;
   grid-template-columns: 1fr 3fr;
}

.left-column {
   margin: 2em 1em 2em 2em;
   border-radius: 3em;
   height: auto;
   box-shadow: 1.5px 1.5px 5px black;
   border: white solid .25em;
}

.right-column {
   background-color: #878C92;
   margin: 1em;
   color: white;
   font-size: 200%;
   padding: 1em 2em 1em 2em;
   line-height: 1.25em;
   border-radius: 2em;
   text-indent: 1em;
   box-shadow: 1.5px 1.5px 5px black;
   border: white solid .125em;
}

footer {
   background-color: #CED4DB;
   padding: 1em;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

footer a {
   font-size: 160%;
   text-decoration: none;
   color: #517C8B;
   transition: all .25s ease;
}

footer a:hover {
   color: black;
   transform: scale(1.2);
}

@media (max-width: 899px) {
   .wrapper {
       width: 100%;
       background-color: #555A60;
       border-radius: 0;
       margin: 0;
   }
   
   main {
      display: flex;
      flex-direction: column;
   }

   .left-column {
      margin: 1em 1em 1em 1em;
      border-radius: 3em;
      box-shadow: 1.5px 1.5px 5px black;
      border: white solid .25em;
      height: auto;
      max-width: 55%;
      align-items: center;
      margin-left: auto;
      margin-right: auto;
   }

   .right-column {
      background-color: #878C92;
      margin: 1em 0;
      color: white;
      font-size: 140%;
      padding: 1em 1 1em 2em;
      line-height: 1.25em;
      border-radius: 2em;
      text-indent: 1em;
      box-shadow: 1.5px 1.5px 5px black;
      border: white solid .2em;
   }

   
}