/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*Fancy font*/
h1 {
color: transparent;
text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2), -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2), 0px 0px hsla(0, 0%, 50%, .5), 1px -1px hsla(0, 0%, 30%, .6), 2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8), 4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0);
}

/* 1) Perusasetukset (vanhan webin henki) */
html, body {               /* Koko sivun perusarvot */
  margin: 0;               /* Poistaa selaimen oletusmarginaalit */
  padding: 0;              /* Poistaa oletuspaddingin */
  background: #000 url("bg-stars.gif") repeat; /* Tummalla taustalla toistuva gif-kuvio */
  color: #0ff;             /* Tekstin väri – neon-syaani */
  font-family: "Verdana", Arial, Helvetica, sans-serif; /* Web-safe fonttipino */
  font-size: 14px;         /* Pikselipohjainen typografia, tyypillistä 00-luvulla */
}

/* 2) Sivun “runko” – kiinteä leveys, keskitys */
.wrapper {
  width: 760px;            /* 640–800px leveys oli yleinen CRT-aikaan */
  margin: 0 auto;          /* Keskittää wrapperin */
  background: #111;        /* Tumma paneeli sisällölle */
  border: 1px solid #0ff;  /* Neon-reuna – klassinen “cyber” */
}

/* 3) Ylätunniste ja logo-banneri */
header {
  background: url("sparkle-bar.gif") repeat-x; /* Toistuva vaakabanneri */
  padding: 8px 12px;
  border-bottom: 1px dashed #0ff;             /* “Dotted/dashed” oli trendikäs */
}
header h1 {
  font-size: 24px;
  letter-spacing: 1px;     /* Pientä kirjainten väljyyttä */
color: transparent;
text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2), -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2), 0px 0px hsla(0, 0%, 50%, .5), 1px -1px hsla(0, 0%, 30%, .6), 2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8), 4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0);
}

/* 4) Navigaatio – image rollover / linkkivärit */
nav a:link    { color: #ff0; text-decoration: none; } /* LVHA-järjestys! */
nav a:visited { color: #f0f; }
nav a:hover   { color: #0ff; text-decoration: underline; } /* Klassinen hover-viiva */
nav a:active  { color: #fff; }

/* 5) Sarakkeet floatilla (ennen flexiä/gridiä) */
.sidebar {
  float: left;             /* 00-luvun layout-peruskaura */
  width: 180px;
  padding: 10px;
  background: #080808;
  border-right: 1px solid #0ff;
}
.content {
  margin-left: 180px;      /* Tilaa sivupalkille; vaihtoehtona float: right + clearfix */
  padding: 12px 16px;
}

/* Clearfix-hack (yleinen ennen ::afterin vakiintumista) */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* 6) “Laatikko”-tyyli uutisille / laatikoille */
.box {
  background: #0a0a0a;
  border: 1px solid #0ff;
  padding: 8px 10px;
  margin: 12px 0;
}

/* 7) Kuville pikselireunat ja kuvateksti */
.pixel {
  image-rendering: OptimizeQuality;
  border: 2px ridge #0ff;     /* 90s-look: ridge/groove/double */
}
.fig {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}

/* 8) Taulukot – paljon käytetty 90–00-luvuilla layoutissakin */
table.vintage {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;     /* Nopeampi, tasainen sarakejako */
}
table.vintage th, table.vintage td {
  border: 1px solid #0ff;
  padding: 6px 8px;
}

/* 9) Korostukset: marquee/blink-fiilis (ilman oikeaa <marquee>-tagia) */
.blink {
  animation: blink 1s steps(1) infinite; /* Moderni keino emuloida <blink> */
}
@keyframes blink { 50% { visibility: hidden; } }

.scroller {
  white-space: nowrap;
  overflow: hidden;                    /* Emuloi marquee-efektiä */
}
.scroller span { display: inline-block; padding-left: 100%; animation: scroll 12s linear infinite; }
@keyframes scroll { 100% { transform: translateX(-100%); } }

/* 10) “Geocities-nappi” tyyli linkkipainikkeille */
.button {
  display: inline-block;
  padding: 6px 10px;
  border: 2px outset #0ff;            /* 3D-efekti */
  background: #002c2c;
  cursor: pointer;
}
.button:active { border-style: inset; }

/* 11) Kehittyneemmin: läpinäkyvät PNG:t olivat ongelma IE6:ssa – jätetään maininta
   (IE6 fixit olivat filter: progid:DXImageTransform..., mutta niitä ei kannata enää käyttää) */


/* ===========================
   RETRO FORM W/ IMAGE PREVIEW
   =========================== */

.form {
  width: 320px;
  margin: 20px auto;
  padding: 12px 16px;
  background: #000;
  color: #0ff;
  border: 2px ridge #0ff;
  font-family: "Verdana", Arial, sans-serif;
  font-size: 13px;
  text-align: left;
  box-shadow: 0 0 12px #0ff;
}

/* Labelit ja otsikot */
.form label {
  display: block;
  margin-bottom: 6px;
  color: #ff0;
  text-shadow: 0 0 4px #0ff;
}

/* Kentät ja tiedostonvalinta */
.form input[type="file"],
.form input[type="text"],
.form textarea,
.form select {
  width: 100%;
  background: #020202;
  color: #0ff;
  border: 2px inset #0ff;
  padding: 6px;
  margin-bottom: 10px;
  font-family: "Verdana", Arial, sans-serif;
  font-size: 13px;
  box-sizing: border-box;
}

/* Hover-efekti kentille */
.form input[type="file"]:hover,
.form input[type="text"]:hover,
.form textarea:hover {
  background: #040404;
  border-color: #ff0;
}

/* Lähetä-nappi */
.form input[type="submit"],
.form button {
  display: inline-block;
  background: #002c2c;
  border: 2px outset #0ff;
  color: #0ff;
  font-weight: bold;
  padding: 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
}
.form input[type="submit"]:hover,
.form button:hover {
  background: #004444;
  border-color: #ff0;
}
.form input[type="submit"]:active,
.form button:active {
  border-style: inset;
}

/* Esikatselukuva */
.form .preview {
  display: block;
  margin: 10px auto;
  border: 2px ridge #0ff;
  max-width: 100%;
  max-height: 240px;
  image-rendering: pixelated; /* retro-kuvafiilis */
}

/* Pienet ohjetekstit */
.form small {
  color: #888;
  font-size: 11px;
  display: block;
  margin-top: 4px;
}

/* Neon-hehku napille (bonus) */
.form input[type="submit"] {
  animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
  from { box-shadow: 0 0 5px #0ff; }
  to   { box-shadow: 0 0 15px #ff0; }
}

/* =============== DRAG & DROP PREVIEW =============== */

.dropframe {
  width: 320px;
  height: 240px;
  margin: 20px auto;
  border: 2px ridge #0ff;           /* retro-kehys */
  background: #000;                  /* musta “tyhjä” tausta */
  box-shadow: 0 0 12px #0ff;         /* neon-hehku */
  position: relative;
  overflow: hidden;
  outline: none;                     /* jotta :focus-tyyli näkyy selkeästi */
}

/* “Tyhjän” kehyksen visuaalinen vihje tekstillä (ei vaadi HTML:ään placeholderia) */
.dropframe::before {
  content: "RAAHAA KUVA TÄHÄN";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0ff;
  font-family: "Verdana", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.7;
  pointer-events: none;
  text-shadow: 0 0 4px #0ff;
}

/* Drag-tilassa lisäkorostus */
.dropframe.dragover,
.dropframe:focus {
  border-color: #ff0;
  box-shadow: 0 0 16px #ff0;
}

/* Kun esikatselukuva näkyy, piilota placeholder-teksti */
.dropframe.has-image::before { display: none; }

/* Itse esikatselukuva täyttää kehyksen, säilyttäen mittasuhteet */
.dropframe img.preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* näytä kokonaan kehyksissä */
  background: #000;
}

/* Valinnainen: “klikkaa tai raahaa” -teksti alle */
.drophint {
  text-align: center;
  font-family: "Verdana", Arial, sans-serif;
  font-size: 11px;
  color: #888;
  margin-top: -10px;
}

/* Piilota varsinainen file input (käytetään varalla/klikkauksella) */
.hidden-input {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* (valinnainen) nappi-tyyli, jos haluat “Valitse kuva” -painikkeen */
.button {
  display: inline-block;
  padding: 6px 10px;
  border: 2px outset #0ff;
  background: #002c2c;
  color: #0ff;
  text-decoration: none;
  cursor: pointer;
  font-family: "Verdana", Arial, sans-serif;
  margin: 8px auto;
}
.button:active { border-style: inset; }
.button:hover { background: #004444; border-color: #ff0; }