:root {
    --bg-img: url('/static/images/bg.jpeg');
}

html {
    background-image: var(--bg-img);
    background-repeat: no-repeat;
    color: #c5c8c6;
    background-attachment: fixed;
    font-family: math;
    background-size: cover;
    image-rendering:optimizeQuality;
}

button {
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}

button:hover {
  background: #0056b3;
}
.flash-wrap{position:fixed;bottom:66px;right:40px;z-index:60}
.flash{padding:8px 12px;border-radius:8px;background:#181818aa;margin-bottom:6px;opacity:0;transform:translateX(100%);animation:slideIn .4s forwards,fadeOut .4s 5s forwards;cursor:pointer}
.flash .error { color: #ff2e2e; }
.flash .success { color: #00ff00; }
@keyframes slideIn{to{opacity:1;transform:translateX(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateX(100%)}}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 4px 0;
    color: inherit;
    font-size: 14px;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
    background-color: #000000c5;
    border: solid 2px #1f1f1f;
}

footer a {
  color:inherit
}

footer a:hover {
  text-decoration: underline;
  color: #eee;
  text-transform: uppercase;
}

nav {
  text-align: center;
  padding: 8px;
  font-size: 1rem;
  margin-top: 20px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
  margin: 0 8px;
}

nav ul li a {
  color: #636363ff;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
  color: #888;
  text-transform: uppercase;
}

/* Mobile-specific adjustments */
@media (max-width: 600px) {
  nav ul li {
    display: block;
    margin: 4px 0;
  }
}