/* ==============================
   COLOR VARIABLES
============================== */

:root {
  --color-bg-main: #7a8f7a;
  --color-bg-window: #c8d6c0;
  --color-bg-panel: #dbe3d3;
  --color-bg-hover: #e9f0e1;
  --color-bg-active: #c2d0b8;
  --color-bg-scrollbar-track: #ffffff;

  --color-text-main: #1a1f1a;
  --color-text-muted: #3f453f;
  --color-text-link: #2d6b2d;
  --color-text-link-hover: #000000;
  --color-text-inverse: #ffffff;
  --color-text-category: #2f3d2f;

  --color-border-light: #ffffff;
  --color-border-medium: #9aa59a;
  --color-border-dark: #505a50;
  --color-border-highlight: #fff;

  --color-titlebar-text: #fff;
  --color-titlebar-start: #3f704d;
  --color-titlebar-end: #5c9e6b;
}

/* Windows 95 */
.theme-windows95 {
  --color-bg-main: #008080;
  --color-bg-window: #c0c0c0;
  --color-bg-panel: #dfdfdf;
  --color-bg-hover: #eaeaea;
  --color-bg-active: #c0c0c0;
  --color-bg-scrollbar-track: #ffffff;

  --color-text-main: #000000;
  --color-text-muted: #404040;
  --color-text-link: #0000ee;
  --color-text-link-hover: #000000;
  --color-text-inverse: #ffffff;
  --color-text-category: #333333;

  --color-border-light: #ffffff;
  --color-border-medium: #808080;
  --color-border-dark: #000000;
  --color-border-highlight: #fff;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #000080;
  --color-titlebar-end: #1084d0;
}

/* Ocean Breeze */
.theme-oceanbreeze {
  --color-bg-main: #5f9ea0;
  --color-bg-window: #e0f2f1;
  --color-bg-panel: #cce8e4;
  --color-bg-hover: #b2d8d0;
  --color-bg-active: #a0c9c2;
  --color-bg-scrollbar-track: #ffffff;

  --color-text-main: #2f4f4f;
  --color-text-muted: #6b8e8b;
  --color-text-link: #007f7f;
  --color-text-link-hover: #004d4d;
  --color-text-inverse: #ffffff;
  --color-text-category: #3b5858;

  --color-border-light: #ffffff;
  --color-border-medium: #a6b8b7;
  --color-border-dark: #2f4f4f;
  --color-border-highlight: #fff;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #2f4f4f;
  --color-titlebar-end: #468282;
}

/* Eternal Sunshine of the Spotless Mind */
.theme-eternalsunshine {
  --color-bg-main: #89cfff;
  --color-bg-window: #f3f9ff;
  --color-bg-panel: #e3f2ff;
  --color-bg-hover: #d7ebff;
  --color-bg-active: #bcdfff;
  --color-bg-scrollbar-track: #ffffff;

  --color-text-main: #1f2a33; 
  --color-text-muted: #4f5d66;
  --color-text-link: #ff6d00;
  --color-text-link-hover: #cc5600;
  --color-text-inverse: #ffffff;
  --color-text-category: #33424d;

  --color-border-light: #ffffff;
  --color-border-medium: #c7d3dd;
  --color-border-dark: #c7d3dd; 
  --color-border-highlight: #c7d3dd;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #ff6d00;
  --color-titlebar-end: #ff6d00;
}

/* Lavender Town */
.theme-lavendertown {
  --color-bg-main: #b8a0d6;
  --color-bg-window: #eae3f2;
  --color-bg-panel: #f0ebf9;
  --color-bg-hover: #d5c5eb;
  --color-bg-active: #b49ad9;
  --color-bg-scrollbar-track: #ffffff;

  --color-text-main: #2f2c4a;
  --color-text-muted: #726d96;
  --color-text-link: #9b6bbb;
  --color-text-link-hover: #73488f;
  --color-text-inverse: #ffffff;
  --color-text-category: #7c6c8a;

  --color-border-light: #ffffff;
  --color-border-medium: #a8a3c4;
  --color-border-dark: #3d3b60;
  --color-border-highlight: #fff;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #9b6bbb;
  --color-titlebar-end: #6e4a8c;
}

/* Aftersun */
.theme-aftersun {
  --color-bg-main: linear-gradient(
    180deg,
    #3b6978 0%, 
    #7fcbc5 55%, 
    #f3d9b1 100%  
  );
  --color-bg-window: #ecd2af;    
  --color-bg-panel: #f2d9b8;       
  --color-bg-hover: #f2dcc0;  
  --color-bg-active: #d4b793;     
  --color-bg-scrollbar-track: #fff8f0;

  --color-text-main: #3a332d;   
  --color-text-muted: #776c61;   
  --color-text-link: #3a9ca3;   
  --color-text-link-hover: #2c7377;
  --color-text-inverse: #ffffff;
  --color-text-category: #5a5046;  

  --color-border-light: #fff8f0;
  --color-border-medium: #d7c3a9; 
  --color-border-dark: #4a3f34;   
  --color-border-highlight: #fff3e6;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #3b6978;
  --color-titlebar-end: #3b6978;
}


/* Her */
.theme-her {
    --color-bg-main: #5c2c28;
  --color-bg-window: #e8cbb8;
  --color-bg-panel: #f0d6c1;
  --color-bg-hover: #f4c1a6;
  --color-bg-active: #e8cbb8;
  --color-bg-scrollbar-track: #f0d6c1;

  --color-text-main: #5c2c28;
  --color-text-muted: #9c5a50;
  --color-text-link: #c54737;
  --color-text-link-hover: #e6392b;
  --color-text-inverse: #ffffff;     
  --color-text-category: #b35c50;

  --color-border-light: #ffffff;     
  --color-border-medium: #9c524a;    
  --color-border-dark: #4b1e1a;      
  --color-border-highlight: #c54737;

  --color-titlebar-text: #f4c1a6; 
  --color-titlebar-start: #c54737;
  --color-titlebar-end: #5c2c28;
}

.theme-bluevelvet {
  --color-bg-main: #253a8a;
  --color-bg-window: #cfd4f0;
  --color-bg-panel: #c2c9e8;
  --color-bg-hover: #b0b7dd;
  --color-bg-active: #cfd4f0;
  --color-bg-scrollbar-track: #f5f5f5;

  --color-text-main: #1a1a2e;
  --color-text-muted: #555a72;
  --color-text-link: #4a7fff;
  --color-text-link-hover: #3060d0;
  --color-text-inverse: #ffffff;
  --color-text-category: #7a80a0;

  --color-border-light: #ffffff;
  --color-border-medium: #a0a6c0;
  --color-border-dark: #7a7fa0;
  --color-border-highlight: #4a7fff;

  --color-titlebar-text: #ffffff;    
  --color-titlebar-start: #253a8a;
  --color-titlebar-end: #4a7fff;
}

.theme-kimochiwarui {
  --color-bg-main: linear-gradient(180deg, #10082c 60%, #232f84 100%);  
  --color-bg-window: #e2dfea;    
  --color-bg-panel: #d7cfe5;        
  --color-bg-hover: #e2dfea;       
  --color-bg-active: #cbbfe0;      
  --color-bg-scrollbar-track: #f5f5f5;

  --color-text-main: #10082c;    
  --color-text-muted: #4a3f6b;    
  --color-text-link: #eb2c30;     
  --color-text-link-hover: #fc645d; 
  --color-text-inverse: #ffffff;
  --color-text-category: #6b5a8a; 

  --color-border-light: #ccbce3;     
  --color-border-medium: #a08abf;
  --color-border-dark: #10082c;
  --color-border-highlight: #eb2c30;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #eb2c30;
  --color-titlebar-end: #fc645d;
}

.theme-spaceheavy {
  --color-bg-main: linear-gradient(180deg, #1c1c38 0%, #8a1c35 90%);
  --color-bg-window: #6f5370;
  --color-bg-panel: #5e4170;
  --color-bg-hover: #72577d;
  --color-bg-active: #573f5a;
  --color-bg-scrollbar-track: #f5f0f5;

  --color-text-main: #ece6f0;
  --color-text-muted: #b8a8b8;
  --color-text-link: #f3a8a0;       
  --color-text-link-hover: #e18a88;
  --color-text-inverse: #000000;
  --color-text-category: #c496b0; 

  --color-border-light: #b8a8b8;
  --color-border-medium: #8a6a8a;  
  --color-border-dark: #4a2a4a;
  --color-border-highlight: #f3a8a0;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #8a2a3a;
  --color-titlebar-end: #8a1c35; 
}

.theme-theglow {
  --color-bg-main: #05273d;

  --color-bg-window: #c9bb92;     
  --color-bg-panel: #ded3ab;      
  --color-bg-hover: #e6deb0;   
  --color-bg-active: #c9bb92;  
  --color-bg-scrollbar-track: #f5f5f5;

  --color-text-main: #05273d;      
  --color-text-muted: #7a6f57;  
  --color-text-link: #ad3e29;     
  --color-text-link-hover: #c43828;  
  --color-text-inverse: #ffffff;
  --color-text-category: #9e8e6e;  

  --color-border-light: #ffffff;
  --color-border-medium: #b0a37f; 
  --color-border-dark: #5a4e37;   
  --color-border-highlight: #ad3e29;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #ad3e29; 
  --color-titlebar-end: #c43828;    
}

.theme-worldsfair {
  --color-bg-main: linear-gradient(180deg, #113e44 70%, #00030a 100%);
  --color-bg-window: #0e1820;   
  --color-bg-panel: #1a2430;      
  --color-bg-hover: #223041;     
  --color-bg-active: #16212d;
  --color-bg-scrollbar-track: #0a0f15;

  --color-text-main: #c7d4e6;   
  --color-text-muted: #8795a6;      
  --color-text-link: #5874ff;  
  --color-text-link-hover: #8ea1ff;
  --color-text-inverse: #ffffff;
  --color-text-category: #b976c7;

  --color-border-light: #3b52bc; 
  --color-border-medium: #20364e;
  --color-border-dark: #00030a;
  --color-border-highlight: #9b4ea0;

  --color-titlebar-text: #ffffff;
  --color-titlebar-start: #3b52bc;
  --color-titlebar-end: #9b4ea0; 
}

.theme-option[data-theme="default"] { background: #7a8f7a; color: #fff; }
.theme-option[data-theme="windows95"] { background: #008080; color: #fff; }
.theme-option[data-theme="oceanbreeze"] { background: #5f9ea0; color: #2f4f4f; }
.theme-option[data-theme="eternalsunshine"] { background: #89cfff; color: #1f2a33; }
.theme-option[data-theme="lavendertown"] { background: #b8a0d6; color: #2f2c4a; }
.theme-option[data-theme="aftersun"] { background: #ecd2af; color: #3aa8b7; }
.theme-option[data-theme="her"] { background: #5c2c28; color: #f4c1a6; }
.theme-option[data-theme="bluevelvet"] { background: #253a8a; color: #cfd4f0; }
.theme-option[data-theme="kimochiwarui"] { background: #232f85; color: #fc645d; }
.theme-option[data-theme="spaceheavy"] { background: #8a2a3a; color: #ece6f0; }
.theme-option[data-theme="theglow"] { background: #05273d; color: #ded3ab; }
.theme-option[data-theme="worldsfair"] { background: #113e44; color: #c7d4e6; }

/* ==============================
   GLOBAL STYLES
============================== */

@font-face {
  font-family: 'W95FA';
  src: url('../fonts/W95FA.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
}

body {
  font-size: 16px;
  line-height: 1.6;
  background: var(--color-bg-main);
  font-family: "W95FA", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 30px;
  color: var(--color-text-main);
}

#container {
  width: 100%;
  max-width: 1200px;
  padding: 10px;
  font-size: 18px;
}

h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
p, li, a { font-size: 20px; }

a {
  color: var(--color-text-link);
}

a:hover {
  color: var(--color-text-link-hover);
}

img {
  border: 2px solid var(--color-border-medium);
  border-top-color: var(--color-border-light);
  border-left-color: var(--color-border-light);
  background: var(--color-bg-window);
}

button {
  font-size: 18px;
  font-family: "W95FA";
  padding: 3px 6px;
}

.project-text, .about-text, .contact-text {
  font-size: 22px;
}

.project-card, .about-content, .contact-dialog {
  margin-bottom: 20px;
}

.project-content, .about-content {
  gap: 25px;
}

.project-media img, 
.project-media video {
  max-width: 100%;
  margin: 8px;
}

/* ==============================
   MAIN WINDOW STYLES
============================== */

.window {
  background: var(--color-bg-window);
  border: 2px solid var(--color-border-light);
  border-right-color: var(--color-border-medium);
  border-bottom-color: var(--color-border-medium);
  width: 80%;
  max-width: 1200px;
  min-width: 300px;
  box-shadow: inset -1px -1px var(--color-border-dark), inset 1px 1px var(--color-border-highlight);
}

.title-bar {
  background: linear-gradient(to right, var(--color-titlebar-start), var(--color-titlebar-end));
  color: var(--color-text-inverse);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  height: 28px;
  font-weight: bold;
}

.title-bar-text { 
  color: var(--color-titlebar-text);
  padding-left: 4px; 
}

.typing::after {
  display: inline-block;
  animation: underscorey steps(1,end) 1s infinite;
  content: '';
}

@keyframes underscorey {
  0%   { content: ''; }
  50%  { content: '_'; }
}

.title-bar-controls {
  display: flex;
  gap: 2px;
}

.title-bar-controls .button {
  width: 20px;
  height: 20px;
  color: var(--color-text-main);
  background: var(--color-bg-window);
  border: 2px solid var(--color-border-light);
  border-right-color: var(--color-border-medium);
  border-bottom-color: var(--color-border-medium);
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
}

.title-bar-controls .button:active {
  border: 2px solid var(--color-border-medium);
  border-right-color: var(--color-border-light);
  border-bottom-color: var(--color-border-light);
}

.title-bar-controls .settings-btn {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-bar-controls .settings-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  margin: 0;     
  border: none;
}

.settings-dropdown {
  position: relative;
  display: inline-block;
}

.settings-btn {
  border-radius: 0;
  padding: 0;
  width: 20px;
  height: 20px;

  background: var(--color-bg-window);
  border: 2px solid var(--color-border-light);
  border-right-color: var(--color-border-medium);
  border-bottom-color: var(--color-border-medium);

  box-shadow: inset -1px -1px var(--color-border-dark),
              inset 1px 1px var(--color-border-highlight);

  display: flex;
  justify-content: center;
  align-items: center;
}

.settings-btn img {
  width: 16px;
  height: 16px;
  border-radius: 0;
}

.settings-btn:hover {
  cursor: pointer;
}

.settings-btn.open {
  border: 2px solid var(--color-border-medium);
  border-right-color: var(--color-border-light);
  border-bottom-color: var(--color-border-light);

  box-shadow: inset 1px 1px var(--color-border-dark),
              inset -1px -1px var(--color-border-highlight);
}

/* -------------------------------
   DROPDOWN MENU
   ------------------------------- */
.settings-dropdown .dropdown-menu {
  display: none;
  position: absolute;

  width: 150px;

  top: 18px;
  right: 0;

  background: var(--color-bg-window);

  border: 2px solid var(--color-border-light);
  border-right-color: var(--color-border-dark);
  border-bottom-color: var(--color-border-dark);

  box-shadow: inset -1px -1px var(--color-border-medium),
              inset 1px 1px var(--color-border-highlight);

  padding: 4px;
  z-index: 200;
}

.theme-option {
  width: 100%;
  text-align: left;
  background: var(--color-bg-panel);
  border: 2px solid var(--color-border-light);
  border-right-color: var(--color-border-medium);
  border-bottom-color: var(--color-border-medium);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 4px;
  border-radius: 0;
}

.theme-dropdown-header {
  font-size: 16px;
  font-weight: normal;
  color: var(--color-text-main);
  margin: 0;
  padding-left: 3px;
  text-align: left;
}


/* ==============================
   NAVIGATION BAR
============================== */

#navbar {
  display: flex;
  background: var(--color-bg-window);
  border-top: 2px solid var(--color-border-light);
  border-left: 2px solid var(--color-border-light);
  border-right: 2px solid var(--color-border-medium);
  border-bottom: 2px solid var(--color-border-medium);
  padding: 4px;
  gap: 6px;
  flex-wrap: wrap;
}

#navbar a {
  font-size: 20px;
  padding: 6px 10px;
}

.nav-btn {
  background: var(--color-bg-panel);
  border: 2px solid var(--color-border-light);
  border-right-color: var(--color-border-medium);
  border-bottom-color: var(--color-border-medium);
  padding: 4px 10px;
  text-decoration: none;
  color: var(--color-text-main);
  font-size: 18px;
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
}

.nav-btn:hover {
  background: var(--color-bg-hover);
}

.nav-btn:active,
.nav-btn.active {
  border: 2px solid var(--color-border-medium);
  border-right-color: var(--color-border-light);
  border-bottom-color: var(--color-border-light);
  background: var(--color-bg-active);
}

/* ==============================
   WINDOW BODY & ARTICLES
============================== */

.window-body {
  background: var(--color-bg-panel);
  border-top: 2px solid var(--color-border-light);
  border-left: 2px solid var(--color-border-light);
  border-right: 2px solid var(--color-border-medium);
  border-bottom: 2px solid var(--color-border-medium);
  padding: 10px;
}

h1 {
  font-size: 22px;
  margin: 0;
}

/* ==============================
   FOOTER
============================== */

footer {
  background: var(--color-bg-window);
  border-top: 2px solid var(--color-border-light);
  border-left: 2px solid var(--color-border-light);
  border-right: 2px solid var(--color-border-medium);
  border-bottom: 2px solid var(--color-border-medium);
  padding: 4px 8px;
  text-align: left;
  font-size: 12px;
  margin-top: 8px;
}

footer p {
  font-size: 12px;
  margin: 0;
}

/* ==============================
   FILTER BAR
============================== */

#filterbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  background: var(--color-bg-window);
  border-top: 2px solid var(--color-border-light);
  border-left: 2px solid var(--color-border-light);
  border-right: 2px solid var(--color-border-medium);
  border-bottom: 2px solid var(--color-border-medium);
  padding: 6px;
  margin: 10px 0 10px 0;
}

.filter-btn {
  background: var(--color-bg-panel);
  border: 2px solid var(--color-border-light);
  border-right-color: var(--color-border-medium);
  border-bottom-color: var(--color-border-medium);
  padding: 5px 12px;
  font-size: 17px;
  cursor: pointer;
  font-family: "W95FA", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, sans-serif;
  color: var(--color-text-main);
}

.filter-btn:hover {
  background: var(--color-bg-hover);
}

.filter-btn.active,
.filter-btn:active {
  border: 2px solid var(--color-border-medium);
  border-right-color: var(--color-border-light);
  border-bottom-color: var(--color-border-light);
  background: var(--color-bg-active);
}

/* ==============================
   TERMINAL TYPING BOX
============================== */

.terminal-box {
  background: var(--color-bg-window);
  border: 2px solid var(--color-border-dark);
  border-top-color: var(--color-border-light);
  border-left-color: var(--color-border-light);
  padding: 10px;
  margin-bottom: 15px;
  color: var(--color-text-main);
  box-shadow: inset -1px -1px var(--color-border-medium),
              inset 1px 1px var(--color-border-highlight);
  min-height: 50px;
}

.terminal-text {
  white-space: pre-wrap;
}

.terminal-text::after {
  content: "";
}

.terminal-text.done::after {
  content: "_";
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

#welcome-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#welcome-box .terminal-box {
  margin-top: auto;
}

/* ==============================
   HOME PAGE
============================== */

#home-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  margin: 10px 0 10px 0;
}

.home-box {
  background: var(--color-bg-panel);
  border-top: 2px solid var(--color-border-light);
  border-left: 2px solid var(--color-border-light);
  border-right: 2px solid var(--color-border-medium);
  border-bottom: 2px solid var(--color-border-medium);
  overflow-y: auto;
  min-height: 300px;
}

.home-box h2 { margin-top: 0; }

#recently-box ul {
  list-style-type: square;
  padding-left: 20px;
  margin-top: 10px;
}

#recently-box li { margin-bottom: 8px; }

.loading::after {
  display: inline-block;
  animation: dotty steps(1,end) 1s infinite;
  content: '';
}

@keyframes dotty {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

@media (max-width: 800px) {
  #home-section { grid-template-columns: 1fr; }
}

/* ==============================
   ABOUT PAGE
============================== */

#about-section { margin: 10px 0 10px 0; }

.about-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.about-text { flex: 2; }

.about-text h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
}

.about-subtitle {
  font-size: 18px;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

.about-text p {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.about-list {
  list-style-type: square;
  padding-left: 20px;
  margin: 10px 0 15px 0;
  font-size: 20px;
}

.about-photo {
  flex: 1;
  display: flex;
  justify-content: right;
  align-items: right;
}

.about-photo img {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin: 6px;
  border: 2px solid var(--color-border-medium);
  border-top-color: var(--color-border-light);
  border-left-color: var(--color-border-light);
  background: var(--color-bg-window);
}

/* ==============================
   PROJECTS PAGE
============================== */

#projects-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0 0 0 10px;
}

.project-card {
  width: 100%;
  padding: 0;
  margin-bottom: 0;
}

.project-content {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.project-text {
  flex: 1;
  padding: 15px 15px 0 15px;
}

.project-text h2 {
  margin-top: 0;
  margin-bottom: -5px;
  font-size: 24px;
}

.project-subtitle {
  margin-bottom: 0;
}

.project-text a {
  color: var(--color-text-link);
}

.project-text a:hover {
  color: var(--color-text-link-hover);
}

.project-text p {
  margin-top: 0;
  font-size: 20px;
  line-height: 1.4;
}

.director {
  margin-bottom: 0;
}

.project-media {
  flex: 1;
  position: relative;
  background: var(--color-bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 6px;
  min-height: 200px;
}

.project-media img,
.project-media video {
  width: 100%;
  background: var(--color-bg-panel);
  border-radius: 1px;
  display: block;
  border: 2px solid var(--color-border-medium);
  border-top-color: var(--color-border-light);
  border-left-color: var(--color-border-light);
}

.project-media iframe.vimeo-embed {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--color-bg-panel);
  object-fit: contain;
  display: block;
  border: 2px solid var(--color-border-medium);
  border-top-color: var(--color-border-light);
  border-left-color: var(--color-border-light);
}

.fourbythree iframe.vimeo-embed {
  aspect-ratio: 4/3;
}

.project-category {
  display: inline-block;
  background: var(--color-bg-panel);
  border-top: 1px solid var(--color-border-light);
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-medium);
  border-bottom: 1px solid var(--color-border-medium);
  padding: 2px 6px;
  font-size: 16px;
  color: var(--color-text-category);
  margin: 3px 0 6px 0;
  font-family: "W95FA", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, sans-serif;
}

#projects-scroll {
  height: 75vh;
  overflow-y: auto;
  margin-top: 8px;
  margin-right: 0;
  margin-left: -10px;
}

#projects-scroll::-webkit-scrollbar {
  width: 16px;
}

#projects-scroll::-webkit-scrollbar-track {
  background: var(--color-bg-scrollbar-track);
  border-left: 2px solid var(--color-border-medium);
  border-top: 2px solid var(--color-border-medium);
  border-right: 2px solid var(--color-border-light);
  border-bottom: 2px solid var(--color-border-light);
}

#projects-scroll::-webkit-scrollbar-thumb {
  background: var(--color-bg-window);
  border-left: 2px solid var(--color-border-light);
  border-top: 2px solid var(--color-border-light);
  border-right: 2px solid var(--color-border-medium);
  border-bottom: 2px solid var(--color-border-medium);
}

#projects-scroll::-webkit-scrollbar-corner {
  background: var(--color-bg-window);
  border-left: 2px solid var(--color-border-light);
  border-top: 2px solid var(--color-border-light);
  border-right: 2px solid var(--color-border-medium);
  border-bottom: 2px solid var(--color-border-medium);
}

lite-youtube {
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-border-medium);
  border-top-color: var(--color-border-light);
  border-left-color: var(--color-border-light);
}

/* ==============================
   CONTACT PAGE
============================== */

#contact-section {
  margin: 10px 0 10px 0;
  padding: 20px;
  background: var(--color-bg-panel);
  border-top: 2px solid var(--color-border-light);
  border-left: 2px solid var(--color-border-light);
  border-right: 2px solid var(--color-border-medium);
  border-bottom: 2px solid var(--color-border-medium);
}

.contact-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-text h2 {
  margin-top: 0;
  font-size: 24px;
}

.contact-text p {
  margin-top: 0;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.contact-info p {
  font-size: 20px;
  margin: 6px 0;
}

.contact-info a {
  color: var(--color-text-link);
  text-decoration: underline;
}

.contact-info a:hover {
  color: var(--color-text-link-hover);
}

.contact-note {
  margin-top: 15px;
  font-size: 17px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ==============================
   RESPONSIVE DESIGN
============================== */

@media (max-height: 1100px) {

  #projects-scroll { height: 65vh; }
}

@media (max-width: 800px) {

  body { padding: 15px; }

  .window { width: 100%; }

  .nav-btn {
    flex: 1 1 10%;
  }

  #navbar a {
    flex: 1 1 10%;
    font-size: 18px;
  }

  #pagetitle h1 { font-size: 16px; }

  .about-content { flex-direction: column; gap: 0;}

  .about-photo {
    order: -1;
    margin-bottom: 10px;
  }

  .about-photo img {
    max-width: 180px;
    margin: 0 auto;
    display: block;
  }

  .project-content { flex-direction: column; }

  .project-text p {
    margin-bottom: 0;
  }

  .project-media img,
  .project-media video {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
}

@media (max-width: 600px) {
  .contact-text h2 { font-size: 24px; }

  .contact-text p,
  .contact-info p {
    font-size: 17px;
  }
}

@media (max-width: 500px) {

  #navbar a {
    font-size: 15px;
  }

  footer {
    font-size: 11px;
    text-align: center;
  }

  .filter-btn { 
    font-size: 13px; 
  }

  .project-card { font-size: 14px;
  }
}

@media (max-width: 400px) {

  #navbar a {
    font-size: 14px;
  }

  .filter-btn { 
    font-size: 12px; 
  }

  .project-card { font-size: 14px;
  }
}