/* ==========================================
   FIJI 島の水
   MAIN WEBSITE STYLE SHEET

   You can change basically the entire vibe
   of your site from this file.
========================================== */
.wip-notice {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: bold;
  color: #d85b8f;
  margin-top: -6px;
  margin-bottom: 18px;
}

.island-lore {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 1px;
  max-width: 650px;
  margin: 14px auto 18px auto;
}

/* =========================
   COLOR PALETTE

   These are CSS variables.

   Change these colors and they will update
   throughout the whole website.
========================= */

:root {

  --background: #9ba8b8;

  --page: #e9e5eb;

  --panel: #ddd8e3;

  --lavender: #aaa0bd;

  /* FIJI hibiscus pink */
  --pink: #d85b8f;

  /* brighter accent from the banner */
  --hot-pink: #e43080;

  /* deeper hibiscus pink */
  --deep-pink: #b92f68;

  --aqua: #91b9b8;

  --dark: #35334d;

  --muted: #68637a;
}

/* =========================
   WHOLE PAGE
========================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  font-family:
    Verdana,
    Geneva,
    Tahoma,
    sans-serif;

  color: var(--dark);

  background-color: #3183F7;

 background-image:
  linear-gradient(
    rgba(65, 145, 220, 0.28),
    rgba(65, 145, 220, 0.28)
  ),
  url("/images/moving-water.gif");

background-blend-mode: screen;
}

/* =========================
   MAIN WEBSITE CONTAINER
========================= */

.site-wrapper {

  width: 92%;

  max-width: 1000px;

  margin: 40px auto;

  background: var(--page);

  border: 2px solid var(--lavender);

  box-shadow:
    8px 8px 0 rgba(64, 56, 77, 0.15);

}


/* =========================
   HEADER
========================= */

.site-header {

  text-align: center;

  padding: 35px 20px 25px;

  background:
    linear-gradient(
      135deg,
      #f7edf4,
      #e8edf7,
      #e2f2ef
    );

}

.site-header h1 {

  margin: 0;

  font-size: 38px;

  letter-spacing: 4px;

}

.subtitle {

  margin-bottom: 5px;

  font-size: 16px;

}

.tiny-tagline {

  margin-top: 5px;

  color: var(--muted);

  font-size: 12px;

  letter-spacing: 2px;

}

/* =========================
   NAVIGATION
========================= */

.main-nav {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  border-top: 2px solid var(--lavender);

  border-bottom: 2px solid var(--lavender);

  background: var(--pink);

}

.main-nav a {

  padding: 12px 16px;

  text-decoration: none;

  color: var(--dark);

  font-size: 13px;

  font-weight: bold;

  letter-spacing: 1px;

}

.main-nav a:hover {

  background: var(--aqua);

  text-decoration: underline;

}


/* =========================
   MAIN CONTENT
========================= */

main {

  padding: 25px;

}


/* =========================
   HERO
========================= */

.hero {

  text-align: center;

}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--lavender);
  margin-bottom: 20px;
}


/* =========================
   WELCOME BOX
========================= */

.welcome-box {

  max-width: 700px;

  margin: 0 auto 30px;

}

.welcome-box h2 {

  letter-spacing: 3px;

}

.intro-title {

  font-weight: bold;

  color: var(--muted);

  font-size: 14px;

}


/* =========================
   BUTTONS
========================= */

.button-row {

  display: flex;

  justify-content: center;

  gap: 15px;

  flex-wrap: wrap;

  margin-top: 22px;

}

.site-button {

  display: inline-block;

  padding: 10px 18px;

  background: var(--pink);

  color: var(--dark);

  border: 2px solid var(--lavender);

  text-decoration: none;

  font-weight: bold;

  font-size: 12px;

  letter-spacing: 1px;

  box-shadow:
    3px 3px 0 rgba(64, 56, 77, 0.15);

}

.site-button:hover {

  background: var(--aqua);

  transform: translateY(-1px);

}


/* =========================
   TWO COLUMN AREA
========================= */

.two-column-section {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-bottom: 20px;

}


/* =========================
   PANELS
========================= */

.panel {

  padding: 20px;

  background: var(--panel);

  border: 2px solid var(--lavender);

}

.panel h2 {

  margin-top: 0;

  font-size: 16px;

  letter-spacing: 2px;

}


/* =========================
   MUSIC
========================= */

.small-label {

  font-size: 10px;

  letter-spacing: 2px;

  color: var(--muted);

}

.track-title {

  font-weight: bold;

}

audio {

  width: 100%;

  margin-top: 10px;

}

.tiny-note {

  font-size: 11px;

  color: var(--muted);

}


/* =========================
   BLOG PREVIEW
========================= */

.latest-post {

  margin-bottom: 20px;

}

.post-date {

  color: var(--muted);

  font-size: 11px;

  letter-spacing: 2px;

}

.latest-post h3 {

  font-size: 22px;

  margin-bottom: 10px;

}

.text-link {

  color: #735c8d;

  font-weight: bold;

}


/* =========================
   WEB TREASURES
========================= */

.web-treasures {

  text-align: center;

}


/* =========================
   FOOTER
========================= */

footer {

  text-align: center;

  padding: 20px;

  border-top: 2px solid var(--lavender);

  background: var(--pink);

  font-size: 11px;

  letter-spacing: 1px;

}


/* =========================
   PHONE / SMALL SCREEN
========================= */

@media (max-width: 700px) {

  .site-wrapper {

    width: 96%;

    margin: 15px auto;

  }

  main {

    padding: 15px;

  }

  .two-column-section {

    grid-template-columns: 1fr;

  }

  .site-header h1 {

    font-size: 27px;

  }
  

}