/*Follw that theam to your pages*/

/* global variables for theme colors */
:root {
  /* Main Theme Colors (SDG 14: Life Below Water) */
  --rich-black: #000814; /* Deep ocean black */
  --yale-blue: #003566; /* Dark blue for depth */
  --pacific-cyan: #00b4d8; /* Bright cyan for water */
  --picton-blue: #5fa8d3; /* Softer blue for waves */
  --alice-blue: #e0f2ff; /* Light blue for sky/foam */

  /* Utility Colors  */

  --success: #2ecc71; /* Modern green for "done" (seaweed-inspired) */

  --warning: #f39c12; /* Warm orange for alerts (coral-inspired) */

  --caution: #e67e22;
  /* Deeper orange for caution (sunset over water) */

  --error: #d62828;
  /* Modern red for errors (fire engine red, subtle nod to danger) */

  --info: #3498db;
  /* Bright blue for info (harmonizes with theme) */

  --neutral: #7f8c8d;
  /* Gray for neutral text (rock/sand-inspired) */
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  height: 100vh;
  overflow-y: scroll;
}

.main-wrapper {
  min-height: 100vh;
  overflow: hidden;
}
header,
footer {
  background: var(--pacific-cyan);
  color: #fff;
  padding: 15px 0;
  text-align: center;
}

nav {
  background: var(--pacific-cyan);
  padding: 10px;
}
nav ul li {
  display: inline;
}

nav a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
}
nav a:hover {
  color: var(--yale-blue);
}

main {
  min-height: 100vh;
  margin: 30px;
}