/* ===================================================== */
/* JOSEPH BENDER — RETRO INNER PAGE STYLES              */
/* Designed to render inside the Win95 desktop window   */
/* ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ==================== */
/* === RESET / BASE === */
/* ==================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  margin: 0;
  padding: 10px 12px;
  font-family: 'VT323', 'Courier New', Courier, monospace;
  font-size: 18px;
  color: #000000;
  overflow-x: hidden;
}

/* ===================== */
/* === PAGE HEADERS === */
/* ===================== */

#pageheader {
  font-family: 'VT323', monospace;
  font-size: 46px;
  font-weight: normal;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(to right, #000080, #1084d0);
  padding: 4px 12px;
  margin: 0 0 16px 0;
  letter-spacing: 1px;
}

/* Section subheadings */
#subhead {
  font-family: 'VT323', monospace;
  font-size: 26px;
  font-weight: normal;
  color: #000080;
  margin: 14px 0 4px 0;
  display: inline-block;
  vertical-align: middle;
}

/* Captions above images / videos */
#captions {
  font-family: 'VT323', monospace;
  font-size: 22px;
  font-weight: normal;
  color: #000080;
  margin: 14px 0 4px 0;
  clear: both;
  border-left: 3px solid #000080;
  padding-left: 6px;
}

/* ========================= */
/* === ABOUT-ME CONTENT === */
/* ========================= */

#aboutme {
  font-family: 'VT323', monospace;
  font-size: 20px;
  display: block;
  margin: 8px 0 10px 0;
  line-height: 1.5;
  max-width: 100%;
  white-space: normal;
}

/* ============================== */
/* === ABOUT PAGE IMAGE ROWS === */
/* ============================== */

/* Each #aboutmepic is a <ul> used as an inline image cell */
#aboutmepic {
  list-style: none;
  padding: 0;
  margin: 1px;
  display: inline-block;
  vertical-align: top;
  line-height: 0; /* kill gap under inline-block */
}

/* ======================== */
/* === MEDIA LIST IMGS === */
/* (writing / happenings)   */
/* ======================== */

/* General rule for images in happenings/MediaList2 sections */
#happenings img,
#MediaList2 img {
  width: 30%;
  max-width: 220px;
  min-width: 120px;
  height: auto;
  margin: 5px;
  border: 2px solid #808080;
  display: inline-block;
  vertical-align: top;
  object-fit: cover;
}

/* Hover for gallery-style images (not About Me) */
#happenings img:hover,
#MediaList2 img:hover {
  outline: 2px solid #000080;
}

/* Full-width clickable photos (speaking page event shots) */
#happenings .clickable-photo {
  width: 100%;
  max-width: 560px;
  min-width: unset;
  height: auto;
  display: block;
  margin: 4px 0 12px 0;
  cursor: pointer;
}

#happenings .clickable-photo:hover {
  outline: 2px solid #000080;
}

/* ================================================ */
/* === ABOUT PAGE IMAGES — must come LAST       === */
/* === so source order wins over the rules above === */
/* ================================================ */

/* Images inside about-page cells — aspect-ratio preserved.
   !important on height/width ensures this beats any higher-
   specificity rules declared earlier in the file.          */
#aboutmepic img {
  display: block !important;
  height: 240px !important;
  width: auto !important;
  max-width: 640px !important;
  border: 2px solid #808080;
  border-radius: 8px;
  object-fit: cover;
  cursor: default !important;
}

/* About Me images must NOT show the blue hover outline or pointer */
#aboutmepic img:hover {
  outline: none !important;
  cursor: default !important;
}

/* ======================== */
/* === PROJECT IMAGES === */
/* ======================== */

#projectstuff {
  width: 100%;
  max-width: 560px;
  height: auto;
  border: 2px solid #808080;
  display: block;
  margin: 6px 0;
}

#CV img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border: 2px solid #808080;
  display: block;
  margin: 6px 0;
}

/* Small section icons (personal.html) */
#CVicon {
  height: 44px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid #c0c0c0;
}

/* ======================== */
/* === VIDEO CONTAINERS === */
/* ======================== */

#videocontainer {
  display: block;
  margin: 8px 0 8px 5px;
  border: 2px solid #808080;
  max-width: 560px;
}

/* ======================== */
/* === LIST STYLES === */
/* ======================== */

li {
  margin: 3px 0;
  font-family: 'VT323', monospace;
  font-size: 19px;
  list-style: disc;
}

#CV {
  padding-left: 28px;
  margin: 4px 0 14px 0;
}

#CV li {
  font-family: 'VT323', monospace;
  font-size: 20px;
  display: list-item;
  margin: 3px 0;
}

#navigationbar {
  list-style: none;
  padding: 0;
  margin: 0;
}

#navigationbar li {
  display: inline;
}

/* ==================== */
/* === LINKS === */
/* ==================== */

a:link {
  color: #0000ee;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: #cc0000;
  text-decoration: underline;
}

a:active {
  color: #ff0000;
}

#CV a:link { color: #0000ee; }
#CV a:visited { color: #551a8b; }

/* ========================= */
/* === MEDIA LISTS === */
/* ========================= */

#MediaList {
  padding: 4px;
}

#MediaList img {
  height: 38px;
  margin: 4px 6px;
  border: 1px solid #808080;
  padding: 2px;
  display: inline-block;
  vertical-align: middle;
}

#MediaList2 {
  padding: 4px;
  white-space: normal;
  overflow-x: hidden;
}

/* ========================= */
/* === CONTENT WRAPPERS === */
/* ========================= */

#happenings {
  padding: 4px;
}

#ListHeading {
  margin-bottom: 8px;
}

/* ========================= */
/* === PDF IFRAMES === */
/* ========================= */

/* PDFs inside projects.html / writing.html */
#CV iframe,
#MediaList2 iframe,
#happenings iframe {
  display: block;
  max-width: 100%;
  border: 2px solid #808080;
  margin: 6px 0;
}

/* ========================= */
/* === CLEARFIX === */
/* ========================= */

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* ========================= */
/* === HIDE OUTER NAV === */
/* ========================= */

/* These live in the outer shell — hide in inner pages */
#social,
#professional,
header,
footer {
  display: none;
}

/* ========================= */
/* === RETRO SCROLLBAR === */
/* ========================= */

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
}

::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

::-webkit-scrollbar-corner {
  background: #c0c0c0;
}