/* Classless, Netscape vibe */

html, body {
  margin: 0 auto;
  padding: 0;
  background: #C0C0C0;    /* classic grey background */
  color: #000000;
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  max-width: 65ch;           /* limit line length for better readability (65 chars optimal) */
}

h1, h2, h3, h4, h5, h6 {
  color: black;
  margin: 1em 0 0.5em;
  font-weight: bold;
}

p {
  margin: 0.5em 0;
  text-align: left;
  hyphens: auto;             /* enable hyphenation for better text flow */
  orphans: 2;                /* prevent single lines at bottom of column/page */
  widows: 2;                 /* prevent single lines at top of column/page */
}

a {
  color: #0000CC;
  text-decoration: underline;

  &:visited {
    color: #660099;
  }
}

hr {
  border: none;
  border-top: 2px inset #808080;
  height: 0;
  margin: 1em 0;
}

blockquote {
  font-size: 0.8em;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding: 0.5em 10px;
  quotes: "\201C" "\201D" "\2018" "\2019";
  text-shadow: 0 0 32px rgba(255, 255, 255, 1);
  text-transform: uppercase;
  width: 100%;
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

code, pre {
  font-family: "Courier New", Courier, monospace;
  background: #E8E8E8;
  padding: 2px 4px;
  border: 1px solid #808080;
}

pre {
  overflow: auto;
  margin: 0.5em 0;
}

ul, ol {
  margin: 0.5em 1em;
  padding-left: 1.5em;
}

li {
  margin: 0.25em 0;
}

table {
  border-collapse: collapse;
  border: 1px solid #808080;
  background: #E0E0E0;
}

th, td {
  border: 1px solid #808080;
  padding: 4px 8px;
}

th {
  background: #D0D0D0;
}

textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  margin: 2px 0;
  padding: 2px 4px;
  border: 2px outset #FFFFFF;
  background-color: silver;
  color: #000000;
  /* simulate depressed look when active */
}

button {
  &:active {
    border: 2px inset #808080;
  }
}

/* "window" containers / panels */
section, article, aside, nav, header, footer {
  margin: 1em;
}

/* simulate a window-like panel for article or content sections */
article {
  border: 2px outset #FFFFFF;
  background: #D0D0D0;
  padding: 1em;
  margin: 1em 0;
}

/* menu / toolbar styling (classless, generic) */
/* assume menus are <nav> or direct <ul> inside nav */
nav {
  background: #C0C0C0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.2em 0.5em;

  & svg {
    fill: black;
    height: 18px;
    width: 18px;
    margin-right: .25em;
    transform: translateY(4px);
    will-change: transform;
  }
}

footer {
  background: #C0C0C0;
  border-top: 2px inset #808080;
  padding: 0.3em 0.5em;
  font-size: 12px;
  color: #000000;
}

img {
  border: 1px solid #808080;
}

/* utility: disable modern fancy stuff */
:root {
  /* disable shadows, rounded corners (if browser applies defaults) */
  --tw-shadow: none;
}

* {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* scrollbars (Firefox / WebKit) — try to approximate chunkier style */
::-webkit-scrollbar {
  width: 12px;
  background: #D0D0D0;

  &-thumb {
    background: #A0A0A0;
    border: 2px outset #808080;
  }

  &-track {
    background: #E0E0E0;
  }
}

/* optional "active window title bar" styling: if you wrap content in a .window div */
/* This needs you to wrap sections in a container with custom semantics, but still classless fallback possible */
.window {
  border: 2px outset #FFFFFF;
  background: #D0D0D0;
  position: relative;

  & > header {
    background: #000080;
    color: #FFFFFF;
    padding: 0.2em 0.5em;
    font-weight: bold;
    user-select: none;

    & + div {
      padding: 1em;
    }
  }
}

/* Custom animations */
.wave {
  animation: wave-animation 2.5s 1;
  transform-origin: 70% 70%;
  display: inline-block;
}

@keyframes wave-animation {
  0% { transform: rotate( 0.0deg) }
  10% { transform: rotate(14.0deg) }
  20% { transform: rotate(-8.0deg) }
  30% { transform: rotate(14.0deg) }
  40% { transform: rotate(-4.0deg) }
  50% { transform: rotate(10.0deg) }
  60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}