/*Follw that theam to your pages*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* 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: #00b3d6; /* 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;
  --error-2: #ff0e0e;
  /* 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-shadow: 0px 0px 30px #6c6c6c36;
  --white: rgb(255, 255, 255);
  --content-border: 1px solid var(--pacific-cyan);
}

* {
  box-sizing: border-box;
  font-family: "Open sans";
}
p {
  line-height: 1.4;
}
section p {
  text-align: justify;
}
html {
  scroll-behavior: smooth;
}

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;
  background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      /* semi-transparent black */ rgba(0, 0, 0, 0.5)
    ),
    url("../images/nohim/underwater-bg1.webp");
  background-size: cover;
  background-position: 60px 500px; /* Move the background to the top center */
}
footer a {
  color: #fff;
}

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;
}

@media (max-width: 800px) {
  aside {
    display: none;
  }
}