@charset "UTF-8";
/* CSS Document */
body{
  font-family: futura, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 35%, #a855f7 70%, #ef4444 100%);
  background-attachment: fixed;
  color: #eef2ff;
  margin: 0;
}
h1{ font-size: 42px; text-align: center; color:#000; }
/* Add a black background color to the top navigation bar */
.topnav { overflow:hidden; background: rgba(15,23,42,0.85); backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid rgba(148,163,184,0.15); padding:8px 12px; }

/* Style the links inside the navigation bar */
.topnav a { float:left; display:block; color:#e5e7eb; text-align:center; padding:10px 14px; text-decoration:none; font-size:16px; border-radius:10px; margin:4px 6px; transition:background-color .2s ease, color .2s ease, transform .1s ease; }

/* Change the color of links on hover */
.topnav a:hover { background-color:#1f2937; color:#fff; transform:translateY(-1px); }

/* Style the "active" element to highlight the current page */
.topnav a.active { background:linear-gradient(135deg, #22c55e, #0ea5e9, #a855f7, #ef4444); color:#fff; box-shadow:0 8px 24px rgba(14,165,233,0.4); }

/* Style the search box inside the navigation bar */
.topnav input[type=text]{ float:right; padding:8px 10px; border:1px solid rgba(148,163,184,0.25); background:rgba(2,6,23,0.6); color:#e5e7eb; border-radius:10px; margin-top:6px; margin-right:12px; font-size:15px; }

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] { float:none; display:block; text-align:left; width:100%; margin:0; padding:14px; }
  .topnav input[type=text] { border: 1px solid rgba(148,163,184,0.25); }
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=email], select, textarea {
  width: 100%;
  padding: 12px 14px; 
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(2,6,23,0.6);
  color: #e5e7eb;
  border-radius: 10px;
  box-sizing: border-box;
  margin-top: 8px;
  margin-bottom: 16px;
  resize: vertical;
}

/* Style the submit button with a specific background color etc */
input[type=submit]{ background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; padding:12px 20px; border:none; border-radius:12px; cursor:pointer; box-shadow:0 8px 24px rgba(34,197,94,0.3); transition:transform .05s ease, box-shadow .2s ease; }

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(34,197,94,0.35); }

/* Add a background color and some padding around the form */
.container { border-radius: 14px; background: rgba(2,6,23,0.45); border:1px solid rgba(148,163,184,0.18); padding: 20px; box-shadow: 0 10px 30px rgba(2,6,23,0.35); }