/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Press+Start+2P&display=swap');


body {
  background-color: #f5f0e8;
  color: #1a1410;
  font-family: "Courier Prime", "Courier New", monospace;
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem;
}

header {
  border-bottom: 2px solid #4a7fa5;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

header h1 {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

header p {
  color: #4a7fa5;
  font-style: italic;
}

nav {
  margin-bottom: 2rem;
}

nav a {
  color: #4a7fa5;
  text-decoration: none;
  margin-right: 1.5rem;
}

nav a:hover {
  text-decoration: underline;
}

article p {
  text-indent: 2em;
}

.date {
  
  text-indent: 0;
}

#header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#floaters {
  width: 200px;
}

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid #4a7fa5;
  font-size: 0.85rem;
  color: #4a7fa5;
  font-style: italic;
}
  
  
#welcome {
  font-family: "Press Start 2P", monospace;
  font-size: 1rem;
  color: #7A3D1E;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 0px #3D1A08;
}

#welcome span {
  display: inline-block;
  animation: wave 1.5s ease-in-out infinite;
  word-break: keep-all;
  line-height: 2.5;

}

@keyframes wave {
  0%, 100% { transform: translatey(0); }
  50% { transform: translateY(-6px); }
}

#bonfire {
  display: block;
  margin: 1rem auto;
  width: 500px;
  filter: drop-shadow(0 0 20px rgba(255, 120, 50, 0.4));
}