/* xp-window's hide/show/position rules live in its shadow DOM, which only
   exists once js/xp-window.js runs and upgrades the element. Until then it's
   an unstyled unknown element, so all window content renders inline and
   fully expanded — this hides it for that brief window instead. */
xp-window:not(:defined){
  display: none;
}

@font-face {
  font-family: 'Tahoma';
  src: url('/fonts/tahoma.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Pixelated MS Sans Serif';
  src: url('https://cdn.jsdelivr.net/npm/xp.css@latest/dist/ms_sans_serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pixelated MS Sans Serif';
  src: url('https://cdn.jsdelivr.net/npm/xp.css@latest/dist/ms_sans_serif_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueUltraLight.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueUltraLightItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueThin.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueThinItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueLightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueRoman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueMediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueBoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueHeavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueHeavyItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueBlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: "Tahoma", sans-serif;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button{
  background: rgba(0,0,0,0);
  border: none;
  color: #FFFFFF;
  text-shadow: 3px 3px 5px black;
}

body {
    display: flex;
    flex-direction: column;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

h1 {
  font-size: large;
  font-weight: inherit;
}
h2 {
  font-size: medium;
  font-weight: inherit;
}
h3{
  font-size: small;
  font-weight: inherit;
}
h4 {
  font-size: x-small;
}

.left_desktop{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

main {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
}
.main_section {
    display: flex;
    height: 97.5%;
    background-image: url('/Res/background.jpg');
    background-size: cover;      /* fills the area, crops if needed */
    background-position: center; /* keeps the focal point centered */
    background-repeat: no-repeat;
    align-items: start;
    justify-content: start;
}
.main_section.is-loading {
  background-image: none;
  background-color: #EDEDED;
}
.main_section.is-loading .icons {
  visibility: hidden;
}
.icons{
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 1rem 0 0 1rem;
}
.start_bar { 
    display: flex;
    height: 2.5%;
    background: linear-gradient(to bottom, #3B73E8 0%, #245EDC 40%, #1A4FC4 100%);
    align-items: space-between;
    justify-content: space-between;
}

.icons button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 6.5rem;
    min-height: 6.5rem;
}
.icons img{
  height: 3.5rem;
  width: 3.5rem;
}

.icons button:hover {
  background: rgba(0,0,0,0.1);
}
.start_button {
    display: flex;
    gap: .25rem;
    align-items: center;
    /* border-radius: 0 4px 4px 0;  right side rounded only */
  /* or more pill-like: */
    border-radius: 3px;

  /* 3D beveled border */
    border-top: 1px solid #6AE04E;     /* bright top */
    border-left: 1px solid #6AE04E;    /* bright left */
    border-bottom: 1px solid #1A4A10;  /* dark bottom */
    border-right: 1px solid #1A4A10;   /* dark right */

    padding: 0.15rem 0rem 0.25rem 0.5rem;
    width: 5rem;
    font-size: 1rem;
    transform: skewX(-8deg);
    background: linear-gradient(to bottom, #54C93A 0%, #3C9A2A 50%, #2A7A1A 100%);

    color: #FFFFFF;
    text-shadow: 1px 1px 1px black;

}
.start_button img{
    height: 1rem;
}
.start_button:hover {
  background: linear-gradient(to bottom, #6AE04E 0%, #4DB838 50%, #357A22 100%);
  /* brighter, more saturated green */
}
.start_button.dimmed {
  opacity: 0.6;
  /* or */
  filter: brightness(0.7);
}
.system_tray {
    display: flex;
    overflow: visible;
    position: static;
    background: linear-gradient(
    to bottom,
    #128CE7 0%,
    #1085E2 40%,
    #1189E5 100%
  );
    border-left: solid black .10rem;
    color: #FFFFFF;
    font-size: 0.55rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem 0rem 0.5rem;
    gap: 0.35rem;
  
}
.system_tray img{
  height: 1rem;
}
start-menu {
  display: none;          /* hidden by default */
  position: absolute;
  bottom: 2.5%;           /* sits right above the start bar */
  left: 0;
  z-index: 999;           /* priority over everything else */
  background: linear-gradient(to bottom, #1a5fb4, #2a6dd9);
  color: white;
  min-width: 20rem;
}

start-menu.open {
  display: flex;
  flex-direction: column;
  border-top: solid 0.2rem #5796E1 ;
  border-bottom: solid 0.2rem #1857BF;
  border-right: solid 0.2rem #1857BF;
  border-left: solid 0.2rem #1857BF;
  border-radius: 0.5rem;
}
start-menu img{
  max-height: 2rem;
}

.top_start_menu{
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0.5rem 0rem 0.5rem 0.25rem;
  gap: 0.5rem;
  background: linear-gradient(to bottom, #3B73E8 0%, #245EDC 40%, #1A4FC4 100%);
  text-shadow: 1px 1px 1px black;
  border-bottom: 0.2rem solid;
  border-image: linear-gradient(to right, white, #FFC48D, #D3E5FA) 1;
}
.top_start_menu img{
  border: solid 0.2rem #F2F0EF;
  border-radius: 0.5rem;
  max-height: 3rem;
  box-shadow: 1px 1px 5px black;
}
.middle_start_menu{
  display: flex;
  justify-content: start;

}
.left_start_menu{
  display: flex;
  flex-direction: column;
  justify-content: start;
  background-color: white;
  min-width: 50%;
  color: black;
}
.right_start_menu{
  display: flex;
  flex-direction: column;
  background-color: #D3E5FA;
  min-width: 50%;
  color: #4777C0;
}
.right_start_menu img{
  height: 1.5rem;
}
.top_left_start{
  display: flex;
  flex-direction: column;
  border-bottom: 0.12rem solid #EAEAE5;
}

.top_left_start_item{
  display: flex;
  align-items: center;
  gap: 0.1rem;
  min-height: 2.5rem;
}
.bottom_left_start{
  display: flex;
  flex-direction: column;
}
.bottom_left_start_item{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  min-height: 2.5rem;
  cursor: default;
}

.allprograms{
  display: flex;
  flex-direction: row;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  align-items: center;
  justify-content: center;
  color: black;
  text-shadow: none;
  border-top: 0.12rem solid #EAEAE5;
  
}
.allprograms img{
  height: 1.5rem;
}
.top_right_start{
  display: flex;
  flex-direction: column;
  border-bottom: 0.12rem solid #B6CBE3;
}
.top_right_start_item{
  display: flex;
  align-items: center;
  justify-content: start;
  min-height: 2rem;
  gap: 0.4rem;
  margin-left: 0.2rem;
}
.top_left_start_item:hover, .bottom_left_start_item:hover, .allprograms:hover, .top_right_start_item:hover, .bottom_right_start_item:hover{
  background-color: #1857BF;
  color: white;
  text-shadow: 1px 1px 1px black;
}
.bottom_right_start{
  font-size: 0.7rem;
  display: flex;
  flex-direction: column;
}
.bottom_right_start_item{
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: start;
  cursor: default;
  min-height: 2rem;
  margin-left: .2rem;
}
.top_right_start_item:hover, .bottom_right_start_item:hover, .all_programs_list_item:hover{
  background: #1857BF;
  color: white;
  text-shadow: 1px 1px 1px black;
}
.bottom_start_menu{
  display: flex;
  background: linear-gradient(to bottom, #3B73E8 0%, #245EDC 40%, #1A4FC4 100%);
  font-size: 0.7rem;
  justify-content: end;
  padding: 0.5rem;
  gap: 0.6rem;
  text-shadow: 1px 1px 1px black;
}
.bottom_start_menu div{
  display: flex;
  gap:0.4rem;
  align-items: center;
  justify-content: center;
}
.bottom_start_menu img{
  height: 1.5rem;
}
.bottom_start_menu img:hover{
  filter: brightness(1.3);
}

.all_programs_popup {
  display: none;
  flex-direction: column;
  position: absolute;
  background: white;
  border-left: 0.2rem solid #1857BF;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  z-index: 999;
  width: 11rem;
  /* position wherever you want */
  bottom: 10%;
  left: 50%;
  color: black;
  font-size: 0.7rem;
}
.all_programs_list_item{
  display: flex;
  align-items: center;
  gap:0.4rem;
  min-height: 1rem;

}
.all_programs_popup img{
  height: 1.2rem;
}

.all_programs_popup.open {
  display: block;
}
.tray_popup {
  position: fixed;
  z-index: 1000;
  background-color: #FDFDDB;
  color: black;
  padding: 0.4rem;
  font-size: 0.65rem;
  max-width:16.5rem;
  display: none;
  pointer-events: none;
}

.tray_popup.open {
  display: block;
  pointer-events: auto;
}

.tray_popup.has-arrow::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 90%;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: #FDFDDB transparent transparent transparent;
}

.tray_info_box{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.4rem;
}

.tray_info_box img{
  height: 1rem;
}
.tray_link {
  color: #0000ee;
  text-decoration: underline;
  cursor: pointer;
}
.tray_link:hover {
  color: #3333ff;
}
.tray_info_heading{
  display: flex;
  align-items:center;
  justify-content: start;
  gap: 0.25rem;
}
.close_info_box{
  display: flex;
  justify-content: start;
  padding-left:2.7rem;
}
.close_info_box img{
  filter: grayscale(100%);
}
.close_info_box img:hover{
  filter: grayscale(0%);
}

.boot_screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999; /* above everything, including the CRT overlay */
  opacity: 1;
  transition: opacity 0.5s ease;
}
.boot_screen.boot-hidden {
  opacity: 0;
  pointer-events: none;
}
.boot_gif {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.boot_prompt {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  color: #FFFFFF;
  font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif;
  font-size: 1rem;
  text-shadow: 2px 2px 3px black;
  padding: 0.6rem 1.2rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  animation: boot-prompt-blink 1.4s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.boot_prompt.boot-hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes boot-prompt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.crt_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* lets clicks pass through to the page */
  z-index: 9999; /* above everything */
  opacity: 0; /* hidden by default */
}

body.crt-active .crt_overlay {
  opacity: 1;

  /* scanlines */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.10) 0px,
    rgba(0, 0, 0, 0.10) 1px,
    transparent 1px,
    transparent 3px
  );

  /* vignette */
  box-shadow: inset 0 0 10rem rgba(0, 0, 0, 0.5);

  animation: crt-flicker 0.5s ease-in-out infinite;
}

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.985; }
}

.start_apps {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  padding: 0 0.25rem;
}

.taskbar_tab {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(to bottom, #3B73E8 0%, #245EDC 40%, #1A4FC4 100%);
  border-top: 1px solid #6FA8F0;
  border-left: 1px solid #6FA8F0;
  border-bottom: 1px solid #0E2E73;
  border-right: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  color: white;
  font-size: 0.7rem;
  text-shadow: 1px 1px 1px black;
  padding: 0.2rem 0.6rem;
  max-width: 9rem;
  min-width: 4rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}

.taskbar_tab img {
  height: 1rem;
  flex-shrink: 0;
}

.taskbar_tab span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.taskbar_tab:hover {
  filter: brightness(1.15);
}

.taskbar_tab.active {
  background: linear-gradient(to bottom, #1A4FC4 0%, #245EDC 40%, #3B73E8 100%);
  box-shadow: inset 1px 1px 4px rgba(0,0,0,0.5);
}

.confirm-dialog {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.75rem;
  color: black;
}

.confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.confirm-buttons button {
  background: linear-gradient(to bottom, #f5f5f5, #d6d6d6);
  border: 1px solid #888;
  border-radius: 3px;
  padding: 0.25rem 1rem;
  color: black;
  text-shadow: none;
  cursor: pointer;
  font-size: 0.8rem;
}
#confirmWindow{
  width: 30rem;
  height: 10rem;
}

.confirm-buttons button:hover {
  background: linear-gradient(to bottom, #ffffff, #e0e0e0);
}
#resumeWindow{
  width: 35rem;
  height: 40rem;
}
.am-content,
.res-content,
.cm-content,
.proj-content{
  display: flex;
  flex-direction: column;
  max-width: 100%;
  height: 100%;          /* fill the window */
  overflow: hidden;
  flex-shrink: 0;
  background-color: #EDEDED;
}

.am-page-head,
.cm-page-head,
.proj-page-head{
  position: sticky;      /* sticks to top of .am-content, not the viewport */
  top: 0;
  width: 100%;
  z-index: 10;
  flex-shrink: 0;
}
.am-file-view,
.res-file-view,
.cm-file-view,
.proj-file-view{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.07rem solid #D3D1C5;
  max-height: 1.5rem;
}
.am-file-view img,
.res-file-view img,
.cm-file-view img,
.proj-file-view img{
  height: 1.25rem;
  background-color: white;
}
.am-help,
.res-help,
.cm-edit,
.cm-tools,
.cm-help,
.proj-tools,
.proj-help{
  opacity: 50%;
}
.am-view-file-btns,
.res-view-file-btns,
.cm-view-file-btns,
.proj-view-file-btns{
  display: flex;
}
.am-file-view button,
.res-file-view button,
.cm-file-view button,
.proj-file-view button{
  color: black;
  text-shadow: none;
  font-size: 0.65rem;
  width: 2.5rem;
  height: 1.5rem;
}
.am-file-view button:not(.am-help):hover,
.res-file-view button:not(.res-help):hover,
.cm-file-view button:not(.cm-edit):not(.cm-tools):not(.cm-help):hover,
.proj-file-view button:not(.proj-tools):not(.proj-help):hover {
  background: #1857BF;
  color: white;
  text-shadow: 1px 1px 1px black;
}

.am-nav{
  display: flex;
  background-color: #EDEDED;
  border-bottom: 0.07rem solid #D3D1C5;
  padding: 0.25rem 0rem;
}
.am-nav img{
  height: 1.25rem;
}
.am-back-forward-btns{
  display: flex;
  align-items: center;
  justify-content: center;
  border-right:  0.07rem solid #D3D1C5;
  opacity: 50%;
  padding-left: 0.25rem;
}
.am-outside-links{
  display: flex;
  align-items: center;
  justify-content: center;
  border-right:  0.07rem solid #D3D1C5;
}
.am-back-forward-btns button, .am-outside-links button{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  text-shadow: none;
  color: black;
  gap: 0.25rem;
  padding: 0.5rem 0rem;
}

.am-back-forward-btns button{
  min-width: 4rem;
}
.am-forward-btn{
  width: 5rem;
}
.am-outside-links button{
  min-width: 5rem;
  align-self: stretch;
  border: 0.1rem solid transparent;
  border-radius: 10%;
}

.am-outside-links button:hover{
  border-color: #A9A9A9;
}
.am-opaque-img{
  display: flex;
  align-items: center;
  justify-content: center;
}
.am-opaque-img img{
  opacity: 50%;
  height: 2rem;
  padding-left: 0.75rem;
}
.proj-nav{
  display: flex;
  background-color: #EDEDED;
  border-bottom: 0.07rem solid #D3D1C5;
  padding: 0.25rem 0rem;
}
.proj-nav img{
  height: 1.25rem;
}
.proj-home-btns{
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.07rem solid #D3D1C5;
  opacity: 50%;
  padding-left: 0.25rem;
}
.proj-back-forward-btns{
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj-favorites-btns{
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 50%;
}

.proj-back-btn, .proj-forward-btn{
  opacity: 50%;
}
.proj-back-btn.active, .proj-forward-btn.active{
  opacity: 100%;
}
.proj-back-btn.active:hover, .proj-forward-btn.active:hover{
  border-color: #A9A9A9;
}
.proj-home-btns button,
.proj-back-forward-btns button,
.proj-favorites-btns button{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  text-shadow: none;
  color: black;
  gap: 0.25rem;
  padding: 0.5rem 0rem;
  min-width: 4rem;
  align-self: stretch;
  border: 0.1rem solid transparent;
  border-radius: 10%;
}
.proj-forward-btn{
  width: 5rem;
}
.proj-favorites-btn{
  min-width: 5rem;
}
.res-nav{
  display: flex;
  background-color: #EDEDED;
  border-bottom: 0.07rem solid #D3D1C5;
  padding: 0.25rem 0rem;
}
.res-nav img{
  height: 1.25rem;
}
.res-zoom-save-btns{
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.07rem solid #D3D1C5;
  padding-left: 0.25rem;
}
.res-print-btns{
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.07rem solid #D3D1C5;
  opacity: 50%;
}
.res-contact-btns{
  display: flex;
  align-items: center;
  justify-content: center;
}
.res-zoom-save-btns button, .res-print-btns button, .res-contact-btns button{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  text-shadow: none;
  color: black;
  gap: 0.25rem;
  padding: 0.5rem 0rem;
  min-width: 5rem;
  align-self: stretch;
  border: 0.1rem solid transparent;
  border-radius: 10%;
}
.res-zoom-save-btns button:hover, .res-contact-btns button:hover{
  border-color: #A9A9A9;
}
.res-contact-btn{
  min-width: 6rem;
}
.res-zoom-btn.active{
  border-color: #A9A9A9;
  background-color: #C5C5C5;
}
.res-print-btn{
  cursor: default;
}

.cm-nav{
  display: flex;
  background-color: #EDEDED;
  border-bottom: 0.07rem solid #D3D1C5;
  padding: 0.25rem 0rem;
}
.cm-nav img{
  height: 1.25rem;
}
.cm-message-btns{
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.07rem solid #D3D1C5;
  padding-left: 0.25rem;
}
.cm-edit-btns{
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.07rem solid #D3D1C5;
  opacity: 50%;
}
.cm-linkedin-btns{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-message-btns button, .cm-linkedin-btns button{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  text-shadow: none;
  color: black;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem;
  min-width: 5rem;
  align-self: stretch;
  border: 0.1rem solid transparent;
  border-radius: 10%;
}
.cm-message-btns button{
  min-width: 6.5rem;
  border-radius: 7%;
}
.cm-edit-btns button{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  cursor: default;
}
.cm-message-btns button:hover, .cm-linkedin-btns button:hover{
  border-color: #A9A9A9;
}
.cm-send-btn,
.cm-send-btn p,
.cm-new-btn,
.cm-new-btn p{
  color: black;
}
.cm-send-btn:disabled,
.cm-new-btn:disabled{
  opacity: 50%;
  cursor: default;
}
.cm-send-btn:disabled:hover,
.cm-new-btn:disabled:hover{
  border-color: transparent;
}

.cm-form{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.cm-to,
.cm-from,
.cm-subject{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  flex-shrink: 0;
}
.cm-to-txt,
.cm-from-txt,
.cm-subject-txt{
  width: 3.5rem;
  text-align: right;
  font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif;
  font-size: 0.65rem;
  color: black;
}
.cm-to-input,
.cm-from-input,
.cm-subject-input{
  flex: 1;
  font-size: 0.65rem;
  font-family: Tahoma, sans-serif;
  color: black;
  border-left: 0.1rem solid #888888;
  border-top:  0.1rem solid #888888;
  border-right: 0.1rem solid white;
  border-bottom: 0.1rem solid white;
  background-color: white;
  padding: 0.3rem 0.5rem;
  outline: none;
}
.cm-to-input{
  background-color: #E8E8E8;
  color: #555555;
  cursor: default;
}
.cm-to-input::placeholder,
.cm-from-input::placeholder,
.cm-subject-input::placeholder{
  color: #9A9A9A;
  font-style: italic;
}
.cm-message{
  flex: 0 0 auto;
  height: 12rem;
  margin: 1rem;
  overflow: hidden;
  border-left: 0.1rem solid #888888;
  border-top:  0.1rem solid #888888;
  border-right: 0.1rem solid white;
  border-bottom: 0.1rem solid white;
  font-family: 'Tahoma', sans-serif;
  font-size: 0.65rem;
  color: black;
  padding: 0.5rem;
  outline: none;
  background-color: white;
  white-space: pre-wrap;
  word-wrap: break-word;
  cursor: text;
}
.cm-message:empty::before{
  content: attr(data-placeholder);
  color: #9A9A9A;
  font-style: italic;
}

.am-address,
.proj-address{
  display: flex;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  background-color: #EDEDED;
  border-bottom: 0.07rem solid #D3D1C5;
  font-size: 0.65rem;
  align-items: center;
  justify-content: space-between;
}
.am-address img,
.proj-address img{
  height: 1rem;
}
.am-address-bar,
.proj-address-bar{
  display: flex;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  width: 87%;
  border: 0.07rem solid #D3D1C5;
  position: relative;
  overflow: hidden;
}
.am-address-bar.is-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #7FB1F0;
  animation: am-address-grow var(--am-load-duration, 0.6s) ease-out forwards;
}
@keyframes am-address-grow {
  from { width: 0%; }
  to   { width: 100%; }
}
.am-address-bar div,
.proj-address-bar div{
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.am-address-drop-down,
.proj-address-drop-down{
  background-color: #EDEDED;
}
.am-go-btn,
.proj-go-btn{
  display: flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 50%;
}
.am-go-btn img,
.proj-go-btn img{
  height: 1.25rem;
  filter:grayscale(100%)
}
.am-address-p,
.proj-address-p{
  opacity: 50%;
}
.am-main-content{
  display: flex;
  flex: 1;               /* fill remaining height below the header */
  overflow: hidden;      /* contain children */
  align-items: stretch;
}

.am-main-left{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #6A80F9;
  padding: 1rem 0.75rem 0.5rem 0.75rem;
  border-right: solid 0.05rem white;
  width: 12rem;
  flex-shrink: 0;
  overflow: hidden
}

.am-main-left img{
  height: 1rem;
}
.am-education-box-title,
.am-skills-box-title,
.am-socials-box-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: blue;
  padding: 0.25rem;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}
.am-education-box-title{
  background: linear-gradient(90deg,rgba(0, 60, 146, 1) 0%, rgba(0, 106, 225, 1) 47%, rgba(0, 132, 255, 0.46) 100%);
  color: white;
  text-shadow: 1px 1px 1px black;

}
.am-skills-box-title,
.am-socials-box-title{
  color: #042C7E;
  background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.46) 100%);
}

.am-education-box-title img{
  height: 0.75rem;
  border: solid 0.07rem white;
  border-radius: 100%;
  background: #0F54AF;
}
.am-skills-box-title img,
.am-socials-box-title img{
  height: 0.75rem;
  background: white;
  border-radius:100%;
  padding: 0.07rem;
  transform-origin: center center;
  display: block;
}
.am-education-box,
.am-skills-box,
.am-socials-box{
  display: flex;
  flex-direction: column;
}

.am-education-box-content,
.am-skills-box-content,
.am-socials-box-content{
  display: flex;
  flex-direction: column;
  font-size: 0.6rem;
  background-color: #D3EAFF;
  padding: 0.25rem;
  gap:0.25rem;
  color: #2D5399;
  border-right: solid 0.1rem white;
  border-left: solid 0.1rem white;
  border-bottom: solid 0.1rem white;
}

.am-education-box-content div,
.am-skills-box-content div,
.am-socials-box-content div{
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.am-education-box-content div div{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.am-education-box-content div img{
  height: 1.5rem;
}

.am-main-right{
  background: #4458CB;
  min-width: 14rem;
  width: 100%;
  overflow-y: auto;
  position: relative;
  color: white;
  padding: 1.5rem;
  scrollbar-color: #245EDC #3347BA;
  scrollbar-width: thin;
  container-type: inline-size;
}
.am-main-right h1{
  font-size: 1.5rem;
  text-shadow: 2px 2px 3px black;
}
.am-main-right::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/Res/Control Panel.png');
  background-repeat: no-repeat;
  background-size: auto 80%;        /* scale by height, adjust to taste */
  background-position: 100% 20%;    /* default: right side, slightly down */
  opacity: 0.08;                     /* opaque-ish, adjust to taste */
  pointer-events: none;
  z-index: 0;

  /* As the container shrinks horizontally, background-position % shifts
     the image toward bottom-left naturally */
  background-position: clamp(0%, calc((100% - 20rem) * 2), 100%)
                       clamp(20%, calc(100% - (100vw - 30rem) * 0.3), 90%);
}

/* Make sure content inside .am-main-right sits above the image */
.am-main-right > * {
  position: relative;
  z-index: 1;
}

.am-content-row{
  display: flex;
  flex-direction: column;
  max-width: 30rem;
}
.am-content-row img{
  max-height: 6.5rem;
}
.am-content-row-col{
  display: flex;
  align-items: center;
  color: white;
  text-align: left;
  gap: 5rem;
  text-shadow: 1px 1px 1px black;
  padding-top: 2rem;
  padding-left: 4rem;
}
.am-dropdown-menu,
.res-dropdown-menu,
.cm-dropdown-menu,
.proj-dropdown-menu {
  position: fixed;
  background: #E1E4E2;
  border: 1px solid #A9A9A9;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  z-index: 10000;
  color: black;
  font-size: 0.65rem;
  min-width: 8rem;
}
.am-file-popup-btns p,
.am-view-popup-btns p,
.res-file-popup-btns p,
.res-view-popup-btns p,
.cm-file-popup-btns p,
.cm-view-popup-btns p,
.proj-file-popup-btns p,
.proj-view-popup-btns p {
  color: black;
  padding: 0.2rem 1rem 0.2rem 0.5rem;
  cursor: default;
}

.am-file-popup-btns p:hover,
.am-view-popup-btns p:hover,
.res-file-popup-btns p:hover,
.res-view-popup-btns p:hover,
.cm-file-popup-btns p:not(.cm-file-disabled):hover,
.cm-view-popup-btns p:hover,
.proj-file-popup-btns p:not(.proj-file-disabled):hover,
.proj-view-popup-btns p:hover {
  background: #1857BF;
  color: white;
}
.am-file-disabled,
.res-file-disabled,
.cm-file-disabled,
.proj-file-disabled {
  opacity: 50%;
  pointer-events: none;
}

.am-file-exit,
.res-file-exit {
  border-top: 1px solid #A9A9A9;
}
.cm-file-border,
.proj-file-border {
  border-bottom: 1px solid #A9A9A9;
}
.am-footer,
.res-footer,
.proj-footer{
  background: #E1E4E2;
  font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif;
  font-size: 0.6rem;
  padding: 0.1rem;
}
.cm-footer{
  background: #E1E4E2;
  font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif;
  font-size: 0.6rem;
  padding: 0.1rem;
  border-top: 0.15rem solid #B8B8B8;
}
.res-main-content{
  display: flex;
  flex: 1;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background-color: #999790;
  padding: 0.5rem 0rem;
}
.res-main-content img{
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background-color: white;
  cursor: zoom-in;
}
.res-main-content.zoomed{
  align-items: flex-start;
  overflow-y: auto;
}
.res-main-content.zoomed img{
  height: auto;
  width: 100%;
  max-width: 60rem;
  cursor: zoom-out;
}

@container (max-width: 500px) {
  .am-content-row-col img {
    display: none;
  }
}

.cm-toast {
  position: fixed;
  bottom: calc(2.5vh + 0.75rem);
  right: 1rem;
  width: 17rem;
  background: #FFFFE1;
  border: 1px solid #6B6B6B;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
  z-index: 20000;
  display: none;
  pointer-events: none;
}
.cm-toast.show {
  display: block;
  pointer-events: auto;
}
.cm-toast-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(to bottom, #3B73E8 0%, #245EDC 40%, #1A4FC4 100%);
  color: white;
  padding: 0.25rem 0.4rem;
  font-size: 0.7rem;
  font-weight: bold;
  text-shadow: 1px 1px 1px black;
}
.cm-toast-header img {
  height: 0.9rem;
}
.cm-toast-title {
  flex: 1;
}
.cm-toast-close {
  cursor: pointer;
  padding: 0 0.3rem;
}
.cm-toast-close:hover {
  background: #E81123;
}
.cm-toast-body {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.6rem;
  font-size: 0.7rem;
  color: black;
  font-family: Tahoma, sans-serif;
}
.cm-toast-body img {
  height: 1.5rem;
  flex-shrink: 0;
}

.proj-main{
  display: flex;
  flex: 1;
  min-height: 0;
  background-color: black;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  justify-content: center;
  padding: 1rem 0 1rem 0;
  overflow:auto;
  gap: 0.25rem;
  transition: background-color 0.4s ease;
}

.info-btns{
  display: flex;
  flex-direction: column;
  gap:1.5rem;
  justify-content: center;
  align-items: center;
  
}
.info-btns h1{
  transform: rotate(-0.25turn);
  border-radius: 20%;
  color: black;
  font-weight: 900;
  font-size: 0.75rem;
  background: #A23B81;
  padding: 0.1rem;
}

.proj-content-nav{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 200px;
  gap:0.25rem;
}
.proj-content-nav img{
  max-width: 200px

}
.proj-content-nav img:not(.proj-logo){
  image-rendering: pixelated;
}
.proj-logo{
  border: 0.15rem solid #6A8AA3;
}
.proj-nav-btns{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}
.proj-nav-btn{
  display: flex;
  align-items: center;
  justify-content: start;
  color: #FACB00;
  max-width:290;
}
.proj-content-main{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  max-width: 550px;
  min-width: 0;
}
.proj-content-main img{
  max-width: 100%;
  height: auto;
}

/* Retro "slow connection" page-load effect: the whole background flashes
   white, settles back to black, and only then does text, then images, then
   the ad banner arrive on their own delay. Driven by playPageLoadAnimation()
   in projects-window.js. */
.proj-main.proj-page-loading{
  background-color: #ffffff;
}
.proj-page-info,
.proj-page-body{
  transition: opacity 0.35s ease;
}
.proj-content-main.proj-content-hidden .proj-page-info,
.proj-content-main.proj-content-hidden .proj-page-body{
  opacity: 0;
}
.proj-content-nav img,
.proj-content-nav video,
.proj-content-nav canvas,
.proj-page-body img,
.proj-page-body video,
.proj-ad-wrap img{
  transition: opacity 0.08s linear;
}
.proj-content-nav img.proj-media-pending,
.proj-content-nav video.proj-media-pending,
.proj-content-nav canvas.proj-media-pending,
.proj-page-body img.proj-media-pending,
.proj-page-body video.proj-media-pending,
.proj-ad-wrap img.proj-media-pending{
  opacity: 0;
}
.proj-address-bar.is-loading::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #7FB1F0;
  animation: proj-address-grow-choppy var(--proj-load-duration, 2.5s) steps(7, jump-end) forwards;
}
@keyframes proj-address-grow-choppy{
  from { width: 0%; }
  to   { width: 100%; }
}
/* Used to snap straight to the hidden/loading state with no fade-out, since
   these elements persist (and are already visible) across page switches —
   only the reveal should animate, not the hide. */
.proj-instant,
.proj-instant *{
  transition: none !important;
}

.proj-page-info{
  display: flex;
  justify-content: start;
  align-items: center;
  padding-top: 1rem;
  gap:2rem;
  width: 100%;
  padding-bottom: 1rem;
}
.proj-ad-wrap{
  display: flex;
  flex: 1;
  justify-content: center;
}
.proj-nav-img-l{
  max-width: 5%;
}

.inner-website-nav{
  display: flex;
  width: 99.2%;
  min-width: 0;
  flex-direction: column;
  color: white;
  border-right: 0.42rem solid #CC329A;
  border-bottom: 0.15rem solid #CC329A;
  justify-content: center;
  align-items: center;
  padding-right: 1rem;
}
.inner-website-nav canvas{
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
}
.inner-website-nav div{
  display: flex;
  align-items: center;
  justify-content: end;
  width: 100%;
  min-width: 0;
  padding-right: 0.5rem;
  border-right: 0.25rem solid transparent;
  cursor: pointer;
}
.inner-website-nav div:hover{
  border-right-color: #E68AB8;
}
.proj-full-stack-btn,
.proj-web-btn,
.proj-mobile-btn,
.proj-back-end-btn,
.proj-content-nav .proj-home-btn{
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 200px;
  min-width: 0;
}

.proj-full-stack-btn.inactive img{
  content: url("Res/Projects Website Nav/full-stack.png");
}
.proj-web-btn.inactive img{
  content: url("Res/Projects Website Nav/nav-web.png");
}
.proj-mobile-btn.inactive img{
  content: url("Res/Projects Website Nav/mobile-app.png");
}
.proj-back-end-btn.inactive img{
  content: url("Res/Projects Website Nav/back-end.png");
}
.proj-home-btn.inactive img{
  content: url("Res/Projects Website Nav/nav-home.png");
}

.proj-full-stack-btn.inactive img:hover{
  content: url("Res/Projects Website Nav/full-stack-hover.png");
}
.proj-web-btn.inactive img:hover{
  content: url("Res/Projects Website Nav/nav-web-hover.png");
}
.proj-mobile-btn.inactive img:hover{
  content: url("Res/Projects Website Nav/Star Trek Website Nav-6.png");
}
.proj-back-end-btn.inactive img:hover{
  content: url("Res/Projects Website Nav/back-end-hover.png");
}
.proj-home-btn.inactive img:hover{
  content: url("Res/Projects Website Nav/nav-home-hover.png");
}

.proj-full-stack-btn.active img{
  content: url("Res/Projects Website Nav/full-stack-selected.png");
}
.proj-web-btn.active img{
  content: url("Res/Projects Website Nav/nav-web-selected.png");
}
.proj-mobile-btn.active img{
  content: url("Res/Projects Website Nav/mobile-app-selected.png");
}
.proj-back-end-btn.active img{
  content: url("Res/Projects Website Nav/back-end-selected.png");
}
.proj-home-btn.active img{
  content: url("Res/Projects Website Nav/home-page-selected.png");
}

.proj-curr-page-info{
  display: flex;
  max-height: calc(10rem + 1rem);
  color: white;
  padding-left: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.proj-curr-page-info .info_text{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.proj-curr-page-info .info-imgs{
  display: flex;
  justify-content: end;
  flex-shrink: 0;
  gap: 0.15rem;
}
.proj-curr-page-info .info-imgs img{
  height: 10rem;
  width: auto;
  box-sizing: border-box;
}
.info-img{
  border: 0.15rem solid white;
}
.main-content-bottom-border{
  display: flex;
  gap: 0.25rem;
  height: 0.5rem;
  width: 100%;
  padding-top: 0.25rem;
  justify-content: center;
}
.mcdiv1{
  border-bottom: 0.15rem solid #7949a8;
  width: 18.5rem;
}
.mcdiv2{
  border-bottom: 0.15rem solid #aa7fd6;
  width: 180px;
}
.mcdiv3{
  border-bottom: 0.15rem solid #7949a8;
  width: 22px;
}

.proj-item-list{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.proj-item{
  display: flex;
  color: white;
  padding-top: 1.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  align-items: center;
  gap:0.25rem;
}
.proj-item-desc{
  padding-left: 0.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.proj-item img{
  max-height: 4rem;
  border: 0.15rem solid white;
}
.proj-item-right{
  display: flex;
  gap:0.25rem;
}
.proj-item-decor{
  width: 18px;
  height: auto;
  background-color: #F79800;
}
.proj-item-title{
  cursor: pointer;
}
.proj-item-title:hover{
  text-decoration: underline;
  color: #FACB00;
}

.proj-detail{
  display: flex;
  flex-direction: column;
  color: white;
  width: 100%;
  padding: 1rem 0.75rem;
  gap: 1.25rem;
}
.proj-detail-header h1{
  color: #FACB00;
}
.proj-detail-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.proj-detail-tag{
  background-color: #7949a8;
  color: white;
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
}
.proj-detail-hero{
  display: block;
  max-width: 100%;
  max-height: 20rem;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border: 0.15rem solid white;
}
.proj-detail-section{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.proj-detail-section h2{
  color: #EF9300;
  font-size: 0.8rem;
}
.proj-detail-tech-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}
.proj-detail-tech-list li{
  background-color: #1a1a1a;
  border: 0.07rem solid #7949a8;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
}
.proj-detail-video{
  display: block;
  max-width: 100%;
  max-height: 20rem;
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 0.15rem solid white;
}
.proj-detail-github-btn{
  align-self: flex-start;
  background-color: #F79800;
  color: black;
  font-weight: bold;
  text-shadow: none;
  padding: 0.5rem 1.1rem;
  border: 0.1rem solid white;
  cursor: pointer;
  font-size: 0.8rem;
}
.proj-detail-github-btn:hover{
  background-color: #EF9300;
}
.proj-detail-repo-note{
  color: #D3D1C5;
  font-size: 0.8rem;
  font-style: italic;
  border-left: 0.2rem solid #7949a8;
  padding-left: 0.6rem;
}
.proj-detail-back-btn{
  align-self: flex-start;
  color: #FACB00;
  font-size: 0.8rem;
  text-shadow: none;
  cursor: pointer;
  text-decoration: underline;
}

.proj-main-socials{
  display: flex;
  border-left: 0.45rem solid #9667D0;
  border-bottom: 0.25rem solid #64349B ;
  padding-left: 0.5rem;
  padding-bottom: 0.25rem;
}
.proj-main-socials div{
  display: flex;
  color: white;
  gap: 0.25rem;
  font-size: 0.75rem;
}
.proj-main-socials a{
  color: #EF9300;
}
.proj-main-socials div img{
  height: 2.5rem;
  background-color: white;
}
.proj-trivia-section{
  display: flex;
  flex-direction: column;
  color: white;
  padding: 1rem;
  gap:0.25rem;
}
.proj-trivia-section img{
  height: 2.5rem;
}
.klingon-link {
  color: #EF9300;
  text-decoration: underline;
  cursor: pointer;
}
.proj-trivia-section div{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.proj-trivia-section h1{
  color: #824FB8;
  font-size: 2.2rem;
  font-weight: 900;
}
.proj-trivia-section p{
  font-size: .85rem;
}
#trivia-answer-text{
  filter: blur(5px);
  user-select: none;
}
#trivia-answer-text.revealed{
  filter: none;
  user-select: text;
}
#trivia-reveal-btn{
  background: #824FB8;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
}
#trivia-reveal-btn:hover{
  background: #9b65d4;
}