/*
MED BLUE: #97afb9
DARK BLUE: #344a53
LIGHT BLUE: #93c1d3
PURPLE: #cbb2ce
*/

p::first-letter {
  font-size: large;
  color: #344a53;
  font-weight: bold;
}

body {
  background: url('assets/Background-3.jpg') center / cover no-repeat fixed;
  font-family: "Cause", cursive;
  font-size: 14px;
  font-size: medium;
}

.header {
  grid-area: header;
  text-align: center;
  padding: 14px;
}


h1 {
  margin: 2px 4px;
  font-family: "Gloria Hallelujah", cursive;
  font-size: 36px;
  color: #97afb9;
  text-shadow: 1px 1px 2px #000;
  letter-spacing: 3px;
}

h2 {
  margin: 2px 4px;
  font-family: "Gloria Hallelujah", cursive;
  font-size: 22px;
  color: #97afb9;
  text-shadow: 1px 1px 2px #000;
  letter-spacing: 3px;
}

h3 {
  margin: 2px 4px;
  font-family: "Gloria Hallelujah", cursive;
  font-size: 18px;
  color: #344a53;
}

.grid-container {
  display: grid;
  width: 800px;
  margin: 0 auto;
  grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle right' 
    'footer footer footer footer footer footer';
} 

.left {
  grid-area: left;
  width: 185px;
  background: #344a53;
  padding: 12px;
}

.left a:hover {
  color: #344a53;
  border: 2px inset #4e5d62;
}

.left a {
  display: block;
  font-family: "Gloria Hallelujah", cursive;
  color: #ffffff;
  background: #6481A6;
  border: 2px outset #4e5d62;
  margin-bottom: 4px;
  padding: 12px;
  align-self: stretch;
  font-size: large;
  text-decoration: none;
}

.middle {
  grid-area: middle;
  background: rgba(255, 255, 255, 0.65);
  width: 430px;
  padding: 12px;
  border-left: 8px solid white;
  border-right: 8px solid white;
}

.right {
  background: rgba(255, 255, 255, 0.65);
  width: 185px;
  grid-area: right;
  padding: 12px;
}

.footer {
  grid-area: footer;
  background-color: #93c1d3;
  padding: 10px;
  text-align: center;
}

@media (max-width: 600px) {
  .grid-container {
    width: 100%;
    grid-template-areas: 
      'header header header header header header' 
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right' 
      'footer footer footer footer footer footer';
  }

  .left,
  .middle,
  .right {
    width: auto;
  }
}