/* 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." */

body {
  margin: 0;
  font-family: Georgia, serif;
  background: #191714;
  color: #f6efe3;
}

header,
main,
section,
article,
aside,
footer,
nav,
div,
img {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: bold;
}

/* HEADER */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 64px;
  background: #2d7f8f;
  color: #111111;
  border-bottom: 3px solid #1e5f6d;
  font-family: Georgia, serif;
}

.logo {
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 17px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  letter-spacing: 1px;
}

.site-nav a {
  font-weight: bold;
}

/* FRONT PAGE IMAGE */

.front-page {
  position: 0;
  width: 100%;
  overflow: hidden;
  background: #2d7f8f;
}

.front-page img {
  width: 100%;
  height: 94vh;
  object-fit: contain;
  display: block;
}

.welcome-text {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  color: #111111;
  font-family: Georgia, serif;
  font-size: 46px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
  background: rgba(255, 244, 225, 0.45);
  padding: 10px 24px;
  border-radius: 4px;
}

/* ABOUT */

.about-me {
  padding: 90px 80px;
  background: #f4e5cb;
  color: #2e2118;
}

.about-card {
  max-width: 900px;
  margin: 0 auto;
  border: 2px solid #c77732;
  padding: 48px;
  background: #fff4df;
  box-shadow: 12px 12px 0 #c77732;
}

.about-card h1 {
  font-size: 52px;
  line-height: 1;
  margin: 0 0 24px;
}

/* GENERAL SECTIONS */

.world {
  min-height: 100vh;
  padding: 96px 80px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  margin-bottom: 16px;
  opacity: 0.8;
}

h2 {
  font-size: 72px;
  margin: 0 0 16px;
}

h3 {
  font-size: 28px;
  margin: 0 0 16px;
}

p {
  line-height: 1.6;
}

.section-intro {
  max-width: 800px;
  margin-bottom: 48px;
}

/* TRAVELS */

.travels {
  background: #ead8b8;
  color: #3b2a1d;
}

.postcard-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.postcard {
  position: relative;
  background: #fff7e8;
  padding: 32px;
  border: 2px solid #c59a67;
  box-shadow: 10px 10px 0 #c59a67;
  min-height: 320px;
}

.stamp {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 2px dashed #9b5d30;
  padding: 10px;
  transform: rotate(8deg);
  font-size: 12px;
}

.location {
  font-style: italic;
  color: #8a5530;
}

/* CONCERTS */

.concerts {
  background-color: #111111;
  background-image: repeating-linear-gradient(
    45deg,
    #222222 0,
    #222222 4px,
    #111111 4px,
    #111111 8px
  );
  color: #f4f1e8;
}

.concert-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

.flyer,
.setlist {
  background: #f3ead7;
  color: #111111;
  padding: 32px;
  border: 4px solid #111111;
  box-shadow: 12px 12px 0 #ff2f2f;
}

.video-box {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #ffffff;
  margin: 24px 0;
  border: 3px solid #ff2f2f;
}

.venue {
  text-transform: uppercase;
  font-family: "Courier New", monospace;
}

/* BIRDS */

.birds {
  background: linear-gradient(#79c7ff 0%, #79c7ff 58%, #61a84f 58%, #61a84f 100%);
  color: #112233;
  font-family: "Courier New", monospace;
}

.scoreboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  background: #111111;
  color: #ffffff;
  padding: 16px;
  border: 4px solid #ffffff;
  margin-bottom: 32px;
}

.bird-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.bird-card-entry {
  background: #fffbe6;
  border: 4px solid #112233;
  padding: 16px;
  box-shadow: 8px 8px 0 #112233;
}

.bird-photo {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c7ecff;
  border: 3px solid #112233;
  margin-bottom: 16px;
}

/* SOIREES */

.soirees {
  background-color: #120c09;
  background-image: radial-gradient(circle at top, #3a2a18, transparent 35%);
  color: #f6e5c5;
}

.lounge-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.cocktail-entry {
  padding: 32px;
  background: #20130e;
  border: 1px solid #c9a45c;
  border-radius: 24px;
}

.cocktail-entry.featured {
  background: linear-gradient(135deg, #2d1a12, #120c09);
}

.drink-meta {
  color: #c9a45c;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
}

/* CODE */

.code {
  background: #03120d;
  color: #39ff88;
  font-family: "Courier New", monospace;
}

.terminal-window {
  border: 2px solid #39ff88;
  background: #020806;
  max-width: 900px;
}

.terminal-bar {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 2px solid #39ff88;
}

.terminal-bar span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #39ff88;
}

.terminal-content {
  padding: 32px;
}

.terminal-content article {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px dashed #39ff88;
}

.terminal-content a {
  display: inline-block;
  margin-right: 16px;
  margin-top: 16px;
  text-decoration: underline;
}

/* PRIVATE */

.private {
  background: #181320;
  color: #f4e9ff;
}

.private-box {
  max-width: 680px;
  padding: 32px;
  border-radius: 24px;
  background: #2b2433;
  border: 1px solid #655476;
}

.private-box button {
  margin-top: 24px;
  background: #f4e9ff;
  color: #181320;
}

/* FOOTER */

.site-footer {
  padding: 32px;
  text-align: center;
  background: #0d0c0b;
  color: #7a6f64;
}

/* RESPONSIVE */

@media screen and (max-width: 800px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
  }

  .world {
    padding: 72px 24px;
  }

  .about-me {
    padding: 72px 24px;
  }

  .about-card {
    padding: 32px;
  }

  .about-card h1 {
    font-size: 36px;
  }

  .welcome-text {
    top: 12%;
    font-size: 30px;
    width: 80%;
  }

  h2 {
    font-size: 44px;
  }

  .concert-layout {
    grid-template-columns: 1fr;
  }
}