@import url('https://fonts.cdnfonts.com/css/microsoft-sans-serif');
@import url('https://unpkg.com/98.css');


body {
  background-position: center;
  background-size: 100%;
  background-color: #008080;
  color: black;
  font-size: 1em;
  text-align: center;
}


/*Border window for the whole page*/
.main-window {
  background-color: #008080;
  margin: 0px;
}


/*Override h1 element styling to look more like the 95/98 program installer background*/
h1 {
  color: white;
  font-style: italic;
  font-size: 4rem;
  text-shadow: 6px 8px 0px black;  /* offset-x | offset-y | blur-radius | color */
  text-align: left;
  font-family: Serif;
  margin-top: 0px;
  margin-left: 10px;
}


/*Horizontally center window classes*/
main .window {  /*For window classes specifically inside the main element*/
  margin-left: auto;
  margin-right: auto;
  text-align: initial;  /*Ignore center text alignment from body element*/
}


/*Remove padding from buttons that have anchored text*/
button:has(a) {  /*For buttons that have an anchor*/
  padding: 0px;
}


/*Turn text into a block that covers the entire parent button element*/
button > a {  /*For anchors specifically inside of a button*/
  display: block;  /* Turns anchored text into a block */
  min-width: inherit;
  min-height: inherit;
  align-content: center;  /*Fix text in block being off center*/
}


/*Ramiel button cleanup*/
#ramiel {
  width: max-content;  /*Trims the div to only cover the contents of the button*/
  margin-left: auto;
  margin-right: auto;
}


/*Scale the Ramiel image specifically*/
  .ramiel-image {
    max-width: 100px;  /*Scale image down a bit*/
    margin: 2px;  /*Keeps image away from button border*/
}


/*On click, move Ramiel image to follow button*/
#ramiel:active:hover {
  .ramiel-image {
    position: relative;  /*Relative to the image itself*/
    top: 2px;
    left: 2px;
  }
}


/*Laser things*/
.ramiel-laser {
  pointer-events: none;  /*Laser does not trigger the button stuff*/
  visibility: hidden;  /*Laser loads invisibly*/
  position: absolute;  /*Anchors the image relative to its parent container, aka the button - Images load inline so it is next to the Ramiel image*/
  top: -100px;
  right: 0px;
}


/*Allow the absolute position to function properly for the Ramiel image*/
#ramiel button {
  position: relative;
}


/*Define the shoot class to make the laser image visible*/
#ramiel.shoot .ramiel-laser {
  visibility: visible;
}


/*Override 98 CSS lack of margin for expandable tree view sections*/
ul.tree-view details {
  margin-top: 3px;
}


/*Spaced class to allow some wiggle room*/
.spaced {
  margin-bottom: 1em;
}


/*98 Start Bar from https://codepen.io/smpnjn/pen/ExLbvdJ*/
#start-bar {
  background: #c0c0c0;
  height: 30px;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 -2px #fffdfc, 0 -4px #cce9eb;
}


/*Make the start button look accurate*/
#startbutton {
  padding: 0px;
  margin: 2px;
  min-width: 0px;  /*Overrides the 98 CSS for button width*/
  width: 64px;
}


/*Scale the start button image down a bit*/
.startimg {
  max-height: 17px;
  position: relative;
  top: 1px;
  }


/*On click, move start button image to follow button*/
#startbutton:active:hover {
  .startimg {
    position: relative;  /*Relative to the image itself*/
    top: 2px;
    left: 2px;
  }
}


/*Start button separator #1*/
#startbutton::before {  /*Places the pseudo-element as an immediate child of the start button element*/
  content: '';
  width: 1px;
  height: 26px;
  position: absolute;
  background: #818181;
  box-shadow: 1px 0px #f2f2f2;
  margin-left: 62px;
  margin-top: -3px;
  pointer-events: none;
}


/*Start button separator #2*/
#startbutton::after {  /*Places the pseudo-element as the last child of the start button element*/
  content: '';
  width: 2px;
  height: 22px;
  position: absolute;
  background: #f2f2f2;
  box-shadow: 1px 1px 0 #818181;
  margin-left: 12px;
  margin-top: -1px;
  pointer-events: none;
}


/*Navigation bar at the top of each window*/
.navbar {
  display: flex;  /*Space the options out horizontally*/
  user-select: none;  /*Prevent text from being selected to keep button clean*/
  
  /*When options are clicked, set pressed styling*/
  details:active:hover summary,
  details:open summary{
    box-shadow:inset -1px -1px #fff,inset 1px 1px grey;  /*Copied from 98.css button styling*/
  }
  
  /*Set margins and padding for menu options*/
  summary {
    margin: 1px 2px;
    padding: 4px 8px;
  }
  
  /*Hide the pseudo-element triangle before each menu option*/
  summary::marker {
    content: '';
  }
  
  /*Remove focus dotted outline*/
  summary:focus {
    outline: none;
  }
  
  /*Navigation bar submenus*/
  ul {
    position: absolute;
    background-color: #c0c0c0;
    box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;  /*Copied from 98.css button styling*/
    margin: -2px 0px 0px 0px;
    padding: 0px;
    min-width: 100px;
    text-align: left;
    left: 13px;
  }
  
  /*Submenu list*/
  li {
    display: block;  /*Hide the bullet point pseudo-element for submenus*/
    padding: 3px;
    margin: 3px;
    
    /*For all list elements except the last one*/
    &:not(:last-child) {
      border-bottom: 1px solid gray;
      box-shadow: 0px 1px #dfdfdf;
    }
  }
  
  /*On list item mouseover*/
  li:hover {
    background-color: #000080;
    color: white;
  }
}