body {
    font-family: -apple-system, 
                 BlinkMacSystemFont, 
                 "Segoe UI", 
                 Roboto, 
                 Oxygen-Sans, 
                 Ubuntu, 
                 Cantarell, 
                 "Helvetica Neue", 
                 sans-serif;
    font-size: 1.8em;
    background-color: #3E293D;
}

.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr minmax(450px, 500px) 1fr;
    grid-template-rows: 100px 1fr 1fr 1fr minmax(100px, 1fr);
    grid-gap: 1rem;
}

.header {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
}
.header > h1 {
    text-align: center;
}
.content-1 {
    grid-row: 3 / 5;
    grid-column: 2 / 3;
    align-self: end;
}

h1 {
    color: #50A084;
}

/*
yellow: #FFCD1B
green: #50A084
red: #F57867
grey: #A09A9A
blue: #07C3F2
*/

/* h3 {
    color: #FFCD1B;
} */
p {
    /* color: #F57867; */
    color: #f17363;
}

a {
  outline: none;
  text-decoration: none;
}
  
a:link {
  color: #F57867;
}

a:visited {
  color: #F57867;
}

a:focus {
  border-bottom: 1px solid;
  background: #F57867;
}

a:hover {
  border-bottom: 1px solid;     
  background: #76443E;
}

a:active {
  background: #F57867;
  color: #F57867;

}


hr {
    border: none;
    color: #FFCD1B;
    overflow: visible;
    text-align: center;
}

hr:after {
    background-color: #3E293D;
    content: '\2022      \2022      \2022';
    position: relative;
    display: inline-block;

}


@media (prefers-color-scheme: dark) {
  body { background-color:  #3E293D; }
  a:hover { background: #76443E; }
  hr:after { background-color: #3E293D }
  p { color: #f17363 }
}

@media (prefers-color-scheme: light) {
  body { background-color: #f0eeee; }
  a:hover { background: #ffa99f; }
  hr:after { background-color: unset }
  p { color: #50354f }
}