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


html {
  height: 100%;
  background: white;
  overflow: hidden;
}

input#ratInput {
    position: absolute;
    color: white;
    background: darkslategray;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    border: 5px solid black;
}

body {
  margin: 0;
  height: 100%;
  font-family: "Pixelated MS Sans Serif", sans-serif;
  background: black;
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: black;
}

.p5Canvas {
  image-rendering: pixelated;
  width: 100% !important;
  flex-grow: 1;
  object-fit: cover;
}

h1 {
  margin: 0; padding: 16px;
  background: white;
  color: black;
  text-align: center;
  font-size: 32pt;
  font-weight: 400;
  cursor: default;
}

a {
  color: white;
}
a:focus {
  text-decoration: underline;
}

header {
  padding: 8px;
  box-sizing: border-box;
  position: absolute;
}

footer {
  padding: 8px;
  box-sizing: border-box;
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

p {
  margin: 8px;
  padding: 0;
  color: white;
  font-size: 8pt;
}

button {
  margin: 6px 4px;
  padding: 2px 4px;
  color: white;
  font-size: 8pt;
  position: relative;
  cursor: pointer;
  float:right;
}
button.off {
  border: 3px dotted red;
}
button.on {
  border: 3px dotted lime;
}
button.off>span {
  color: red;
}
button.on>span {
  color: lime;
}
button:focus {
  border-style: solid;
}

#start-instruction {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24pt;
  cursor: default;
}
#start-instruction::after {
  content:"warning: music";
  font-size: 8pt;
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width:960px) {
  h1 {
    font-size: 48pt;
  }
  p, button {
    font-size: 12pt;
  }
}

/***
    The new CSS reset - version 1.6.0 (last updated 29.4.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
 *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
  }
  
  /* Preferred box-sizing value */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    outline: none;
  }
  
  /* Reapply the pointer cursor for anchor tags */
  a, button {
    cursor: revert;
  }
  
  /* Remove list styles (bullets/numbers) */
  ol, ul, menu {
    list-style: none;
  }
  
  /* For images to not be able to exceed their container */
  img {
    max-width: 100%;
  }
  
  /* removes spacing between cells in tables */
  table {
    border-collapse: collapse;
  }
  
  /* revert the 'white-space' property for textarea elements on Safari */
  textarea {
    white-space: revert;
  }
  
  /* minimum style to allow to style meter element */
  meter {
    -webkit-appearance: revert;
    appearance: revert;
  }
  
  /* reset default text opacity of input placeholder */
  ::placeholder {
    color: unset;
  }
  
  /* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
  :where([hidden]) {
    display: none;
  }
  
  /* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
  :where([contenteditable]) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
  }
  
  /* apply back the draggable feature - exist only in Chromium and Safari */
  :where([draggable="true"]) {
    -webkit-user-drag: element;
  }

/* MY STUFF */

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

div.modelManager {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    width: 300px;
    height: 500px;
    background: linear-gradient(45deg, 
        rgba(1,1,1, 10%) 0%,
        rgba(1,1,1, 40%) 50%,
        rgba(1,1,1, 20%) 100%
    );

    position: absolute;
    top: 50%;
    right: -300px;
    transform: translate(0%, -50%);
    transition: right 0.5s cubic-bezier(.77,0,.18,1);
}

div.modelManager::before {
    background: black;
    content: 'Open';
    position: absolute;
    height: 100px;
    width: 64px;
    color: white;
    left: -64px;
    top: 50%;
    transform: translate(0, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: 10;

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

    font-family: "Pixelated MS Sans Serif";
}

div.modelManager::after {
    position: absolute;
    content: '';
    z-index: 8;
    left: -22.5px;
    top: 50%;
    transform: translate(0, -50%);
    width: 22.5px;
    height: 145px;
    background: black;
}

div.modelManager > button.actual {
    position: absolute;
    height: 100px;
    width: 64px;
    background: transparent;
    color: unset;
    left: -64px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
    z-index: 11;
    border-style: none;
}

div.modelManager > div.fakeBorders {
    display: flex;
    height: 145px;
    flex-direction: column;
    width: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    justify-content: space-between;
    left: -22.5px;
    z-index: 9;
}

div.modelManager > div.fakeBorders > div.square {
    z-index: 9;
    width: 22.5px;
    height: 22.5px;
    background: #444;
    border-bottom-right-radius: 50px;
}

div.modelManager>div.fakeBorders>div.square:nth-of-type(2) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 50px;
}

div.modelManager.open {
    right: 0;
}

div.modelManager.closed {
    right: -300px;
}

div.modelManager.open::before  {
    content: 'Close';
}

div.modelManager.closed::before  {
    content: 'Open';
}