body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-color);
  background-color: black;
  
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  
  background-image: url(imgs/static.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
  z-index: -10;
  opacity: 25%;
  pointer-events: none;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

.monitor {
    width: min(64vw, 12000px);
    aspect-ratio: 4 / 3;   
    position: relative;

    z-index:2;
}

.frame {            /* area inside monitor */
    position: relative;
    width: 100%;
    z-index: 3;
    pointer-events: none;
}

.glass {        /* screen area */
  position: absolute;
  isolation: isolate;

  top: 6%;
  left: 9%;
  width: 81%;
  height: 85%;

  border-radius: 63px;

  box-shadow:
  inset 0 0 30px rgba(0,0,0,0.8),
  inset 0 0 80px rgba(0,0,0,0.5);
  transform: perspective(900px) scale(1.04, 0.96);

  overflow: hidden;
  z-index: 1;
  filter: url(#crt);
}

.screen {  /* screenline layer */
  position: absolute;
  inset: 0;
  isolation: isolate;

  padding: 31px;
  overflow: hidden;

  background: #e8e8e8;
  background-clip: padding-box;

  text-shadow:
  0 0 2px rgba(255,255,255,0.4),
  0 0 6px rgba(255,255,255,0.2);

  animation:
  crt-power .6s ease-out,
  crt-flicker 1s infinite;

  z-index: 1; 
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
  linear-gradient(
    90deg,
    rgba(255,0,0,0.04),
    rgba(0,255,0,0.04),
    rgba(0,0,255,0.04)
  );

  opacity: 0.2;
  pointer-events: none;

  animation:
      crt-flicker 1s infinite;
}

/* CRT scanlines overlay */
.screen::before {
    content: "";
    position: absolute;
    inset: 0;

    background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0) 6px
    );

    pointer-events: none;
    opacity: 0.3;
}

/* scanline effect */
.scanline1 {
  position: absolute;
  left: 0;
  top: -100px;

  width: 100%;
  height: 100px;

  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 255, 255, 0.2) 10%,
      rgba(0, 0, 0, 0.1) 100%
  );

  opacity: 0.15;
  animation: scanline 4s linear infinite;

  pointer-events: none;
  z-index: 6; 
}

/* content above overlays */
#mainmain {
    position: absolute;
    z-index: 5;
    
    top: 15%;
    left:22%;
    
    transform: translate(-50%, -50%);
}

#aboutme {
  position: absolute;
    z-index: 5;
    
    top: 30%;
    left:66%;
    
    transform: translate(-50%, -50%);
}

@keyframes crt-flicker {
    0%, 96%, 100% { opacity: 1; }
    97% { opacity: 0.94; }
    98% { opacity: 1; }
    99% { opacity: 0.97; }
}

@keyframes scanline {
    0% {top: -100px;}
    100% { top: 100%;}
}

:root {
  /* Color */
  --text-color: #222222;
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;

  /* Spacing */
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;
    
  /* Borders */
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);
  --default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
  --default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
  --default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
  --default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);


  /* Window borders flip button-face and button-highlight */
  --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);

  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
  --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
  --border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
}

.title-bar {
    background: linear-gradient(
        90deg,
        var(--dialog-blue),
        var(--dialog-blue-light)
    );
    
    padding: 3px 2px 3px 3px;
    display: flex;
    
    justify-content: space-between;
    align-items: center;
}

.titlebartext {
    font-weight: bold;
    color: white;
    letter-spacing: 0;
    margin-right: 24px;
}

.title-bar-controls {
    display: flex;
}

.titlebarcontrols button[aria-label="Minimize"],
.titlebarcontrols button[aria-label].minimize {
  background-image: svg-load("imgs/minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 3px left 4px;
}

.titlebarcontrols button[aria-label="Maximize"],
.titlebarcontrols button[aria-label].maximize {
  background-image: svg-load("imgs/maximize.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.titlebarcontrols button[aria-label="Close"],
.titlebarcontrols button[aria-label].close {
  margin-left: 2px;
  background-image: svg-load("imgs/close.svg");
  background-repeat: no-repeat;
  background-position: top 3px left 4px;
}


.navtop {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.imgtxt  {
  text-decoration: none;
  color: #222222;
}

.window {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 3px;

}

.window-body {
    margin: var(--element-spacing);
}


.section { 
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem;
  
  background: white;
  box-shadow: var(--border-field);
}

button,
label,
input,
legend,
textarea,
select,
option,
table,
ul.tree-view,
.window,
.title-bar,
li[role=tab] {
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
}

p {
  margin: 0;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

u {
  text-decoration: none;
  border-bottom: 0.5px solid #222222;
}

a {
  text-decoration: none;
}

/* Responsive tweaks for small screens */
@media (max-width: 600px) {
  .monitor {
    width: 95vw;
    height: 60vh;
    padding: 5vw;
    border-radius: 4vw;
  }
  .screen {
    padding: 1rem;
    border-radius: 2vw;
  }
  .scanline1 {
    height: 3rem;
  }
}