* {
   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;
}

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;
}

text {
   color: white;
   padding: 2em;
}

text h2 {
   font-size: 250%;
   padding: 0em 1em 0 1em;
   text-shadow: 2px 2px .5px black;
}

text h3 {
   font-size: 200%;
   margin: 1em 1.5em .5em 1.5em;
   border-bottom: .1em solid #CED4DB;
}

text p {
   font-size: 200%;
   padding: 0em 2em 0em 2em;
   line-height: 1.25em;
   text-indent: 1em;
}

text {
   background-color: #878C92;
   margin: 2em;
   border-radius: 2em;
   box-shadow: 1.5px 1.5px 5px black;
   border: white solid .2em;
}

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;
   }

   text p {
      font-size: 140%;
      padding: 0em 1em 0em 1em;
      line-height: 1.25em;
      text-indent: 1em;
   }

   text {
      padding: 1em 1 1em 2em;
      margin: 2em 0;
   }

   text h2 {
      font-size: 225%;
      padding: 0em 0em 0 0em;
   }

   text h3 {
      font-size: 200%;
      margin: 1em 0.5em .5em 0.5em;
   }
}