/*
  Retro stylesheet for the transformed projects page.  This file borrows
  heavily from the original site's styles (style(15).css) while tailoring
  the layout to our new HTML structure.  The aim is to evoke the feel of
  late‑1990s/early‑2000s personal websites: saturated colours, tiled
  backgrounds, textured panels, chunky buttons and playful hover effects.

  Only CSS is used—no external frameworks or JavaScript.
*/

/* =================================================================== */
/*                              Variables                              */
/* =================================================================== */

/* Define key images and colours as CSS variables.  You can swap these
   values to recolour or retexture the page without touching the markup. */
:root {
  --header-image: url(Assets/Imgs/BG/headerbg.gif);
  --body-bg-image: url(Assets/Imgs/BG/2025_01_29_0zi_Kleki.png);
  --paper-bg-image: url(Assets/Imgs/BG/paper1.jpg);
  --sidebar-paper: url(Assets/Imgs/BG/cloverpaper.png);
  --box-pattern: url(Assets/Imgs/BG/dots.jpg);
  --nav-background: url(Assets/Imgs/BG/login.gif);
  --border-image: url(Assets/Imgs/PNG/51a-none.gif);
  --topbar-bg: #13092D;
  --topbar-color: #00ff99;
  --header-color: #ED64F5;
  --header-bg: #00ff99;
  --sidebar-bg: #85ba87;
  --sidebar-text: rgb(153, 229, 118);
  --main-bg: #08031A;
  --box-bg: #2e0000;
  --box-border: #ED64F5;
  --box-text-color: #fceaff;
}

/* =================================================================== */
/*                                Fonts                                */
/* =================================================================== */

/* Many custom fonts are declared below.  If the referenced files are
   unavailable the browser will fall back to default sans‑serif or
   monospace fonts.  These declarations preserve the playful typographic
   personality of the reference site. */
@font-face {
  font-family: 'Papyrus';
  src: url(Assets/Fonts/papyrus.ttf);
}
@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}
@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
  font-style: italic;
}
@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
  font-style: italic;
  font-weight: bold;
}
@font-face {
  font-family: PokemonH;
  src: url(Assets/Fonts/PokemonHollow.ttf);
}
@font-face {
  font-family: PokemonS;
  src: url(Assets/Fonts/PokemonSolid.ttf);
}
@font-face {
  font-family: Popstar;
  src: url(Assets/Fonts/SuperPopstar.ttf);
}
@font-face {
  font-family: Ledlight;
  src: url(Assets/Fonts/LEDLIGHT.otf);
}
@font-face {
  font-family: Guns;
  src: url(Assets/Fonts/Guns.ttf);
}
@font-face {
  font-family: nteen;
  src: url(Assets/Fonts/1999.ttf);
}
@font-face {
  font-family: Starborn;
  src: url(Assets/Fonts/Starborn.otf);
}
@font-face {
  font-family: AFTEI;
  src: url(Assets/Fonts/AFTEI.TTF);
}

/* =================================================================== */
/*                            Global resets                            */
/* =================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  color: var(--box-text-color);
  background-color: var(--main-bg);
  /* A subtle tiled background on the body for texture. */
  background-image: var(--body-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
}

/* Anchor links default styling */
a {
  color: inherit;
  text-decoration: none;
}

/* =================================================================== */
/*                             Layout basics                            */
/* =================================================================== */

#container {
  max-width: 1100px;
  margin: 0 auto;
  /* Centres the entire page */
  position: relative;
}

/* Top bar */
#topBar {
  background-color: var(--topbar-bg);
  color: var(--topbar-color);
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  text-align: center;
  padding: 6px;
  border-bottom: 2px solid var(--box-border);
}

/* Header / banner */
#header {
  width: 100%;
  background-image: var(--header-image);
  background-size: 30%;
  background-color: var(--header-bg);
  color: var(--header-color);
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 0 10px;
}
#header h1 {
  margin: 0;
  font-family: Popstar, cursive;
  font-size: 2rem;
  text-shadow: 2px 2px 0 #000;
}

/* Navigation bar */
#navbar {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
#navbar ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  align-items: center;
}
#navbar li {
  flex: 1 1 auto;
  text-align: center;
}

/* Navigation buttons */
.item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background-color: #78786d;
  background-image: var(--nav-background);
  background-position: center;
  background-size: 100% 100%;
  border-width: 7px;
  border-style: solid;
  border-image: var(--border-image) 9 round;
  color: #000;
  font-family: Guns, sans-serif;
  font-size: 0.9rem;
  text-shadow: 1px 1px 0 #fff;
  transform: translateZ(0);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1),
              letter-spacing 180ms cubic-bezier(.2,.8,.2,1),
              filter 180ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  --s: 1;
}
.item:hover {
  --s: 1.15;
  letter-spacing: 0.5px;
  filter: brightness(1.06);
  animation: wiggle 260ms ease-in-out both;
}
.item:active {
  --s: 1.66;
}
@keyframes wiggle {
  0% { transform: translate3d(0,0,0) scale(var(--s)); }
  20% { transform: translate3d(-2px,0,0) rotate(-0.6deg) scale(var(--s)); }
  40% { transform: translate3d(2px,0,0) rotate(0.6deg) scale(var(--s)); }
  60% { transform: translate3d(-1px,0,0) rotate(-0.3deg) scale(var(--s)); }
  80% { transform: translate3d(1px,0,0) rotate(0.3deg) scale(var(--s)); }
  100% { transform: translate3d(0,0,0) scale(var(--s)); }
}

/* Main flex layout */
#flex {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
}

/* Sidebars */
aside {
  background-color: var(--sidebar-bg);
  background-image: var(--sidebar-paper);
  background-size: cover;
  background-blend-mode: multiply;
  opacity: 0.95;
  width: 200px;
  flex: 0 0 200px;
  padding: 20px;
  font-size: 0.85rem;
  color: var(--sidebar-text);
  border: 2px solid var(--box-border);
  box-shadow: 4px 4px 0 #000;
}

#leftSidebar h5,
#rightSidebar h5 {
  margin-top: 0;
  font-family: Guns, sans-serif;
  font-size: 1.3rem;
  text-align: center;
  color: #000;
}

.boxL,
.boxR {
  background-image: var(--sidebar-paper);
  background-size: cover;
  background-blend-mode: multiply;
  background-color: #748e7d;
  border: 1px solid var(--box-border);
  padding: 10px;
  color: var(--sidebar-text);
}

.boxL ul,
.boxR ul {
  padding-left: 1.2rem;
}

.boxL p,
.boxR p {
  margin: 0.5em 0;
}

/* Main content area */
main {
  flex: 1;
  padding: 20px;
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-image: var(--paper-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  color: #1f1f1f;
}

/* Generic box style for panels */
.box {
  background-color: var(--box-bg);
  border: 1px solid var(--box-border);
  padding: 15px;
  background-image: var(--box-pattern);
  background-size: fill;
  color: #fceaff;
  box-shadow: 4px 4px 0 #000;
}

/* Box titles */
.box h2 {
  margin-top: 0;
  font-family: Popstar, cursive;
  font-size: 1.6rem;
  color: var(--header-color);
  text-align: center;
}
.box h3 {
  margin-top: 0.5em;
  font-family: Ledlight, sans-serif;
  font-size: 1.2rem;
  color: #edb6ff;
}
.box h4 {
  margin-top: 1em;
  font-family: Ledlight, sans-serif;
  font-size: 1rem;
  color: #edb6ff;
}
.box p,
.box ul,
.box dl {
  font-family: AFTEI, sans-serif;
  color: #fceaff;
  font-size: 1rem;
  margin-bottom: 0.6em;
}
.box ul {
  list-style: disc inside;
  padding-left: 1.2rem;
}
.box li {
  margin-bottom: 0.4em;
}
.box dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
}
.box dt {
  font-weight: bold;
  font-family: "Courier New", monospace;
}
.box dd {
  margin: 0;
  color: #fceaff;
}

/* Horizontal container for multiple half‑width boxes */
.hcontainer {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Half width boxes used for skills, lab details and writeups */
.box-half-width {
  background-color: #b2a9c7;
  border: 1px solid #604961;
  padding: 10px;
  width: 280px;
  min-height: 220px;
  font-family: nteen, sans-serif;
  color: #1f1f1f;
  box-shadow: 3px 3px 0 #000;
  background-image: url(Assets/Imgs/BG/purple_paper.gif);
  background-size: cover;
}
.box-half-width h3 {
  margin-top: 0;
  font-family: Ledlight, sans-serif;
  color: #3b1f56;
  font-size: 1.3rem;
  text-align: center;
}
.box-half-width p,
.box-half-width li {
  font-family: AFTEI, sans-serif;
  color: #1f1f1f;
}
.box-half-width ul {
  list-style: disc inside;
  padding-left: 1rem;
}
.box-half-width a {
  display: inline-block;
  margin-top: 6px;
  border-bottom: 2px solid var(--box-border);
  font-family: "Courier New", monospace;
  color: #000;
}

/* Scroll box used in the research section */
.scroll-box {
  max-height: 380px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #604961;
  background-image: url(Assets/Imgs/BG/purple_paper.gif);
  background-size: cover;
  background-color: #c6c3cd;
  color: #1f1f1f;
}

.research-item {
  margin-bottom: 16px;
}
.research-item h3 {
  font-family: Ledlight, sans-serif;
  font-size: 1.2rem;
  margin: 6px 0;
  color: #3b1f56;
}
.research-item p {
  margin: 6px 0;
  font-size: 0.9rem;
  color: #1f1f1f;
}
.research-item .card-label {
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: red;
  margin: 0;
}
.text-link {
  display: inline-block;
  margin-top: 4px;
  border-bottom: 2px solid #ED64F5;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  color: #000;
  transition: transform 0.15s ease;
}
.text-link:hover {
  transform: translate(-2px, -2px);
  background: rgba(255,255,255,0.2);
}

/* Footer styling */
#footer {
  background-color: var(--topbar-bg);
  color: var(--topbar-color);
  text-align: center;
  padding: 12px;
  margin-top: 20px;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  border-top: 2px solid var(--box-border);
}

/* Responsive adjustments */
@media (max-width: 880px) {
  #flex {
    flex-direction: column;
  }
  aside {
    width: auto;
    flex: 0 0 auto;
    margin-bottom: 20px;
  }
  #navbar ul {
    flex-wrap: wrap;
    height: auto;
    padding: 10px;
  }
  .box-half-width {
    width: 100%;
    min-height: auto;
  }
}