/* INITIAL DEFINITIONS */
html {
    overflow: hidden;
    scroll-behavior: smooth;
    height: 100%;
    font-display: swap;
    background-color: white;
}
body {
    height: 100%;
    font-family: 'Alte Haas Grotesk';
    font-weight: 400;
    font-size: 9pt;
    margin:0;
    animation: none;
    background-position: center;
    overflow: auto;
    overflow-y: hidden;
    position: absolute;
      top:0px;
  left:0px;
  width: 100%;
  height: 100%;
}

/* MARQUEE BG'S */
#logobg {
  position: absolute;
  width: 100%;
  height: 100%;
}
#fishies {
  position: absolute;
  width: 100%;
}
.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.marquee img {
  position: absolute;
  overflow: hidden;
  display: block;
}
.ma1 img {
  width: 240px;
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  0% { left: 100%; }
  100% { left: -30%; }
}

.ma2 {
  padding-top: 120px;
  height: 130px;
  z-index: 2;
}
.ma2 img {
  width: 270px;
  animation: marquee2 13s linear infinite;
}
@keyframes marquee2 {
  0% { right: 100%; }
  100% { right: -30%; }
}

.ma3 {
  padding-top: 120px;
  height: 130px;
  z-index: 2;
}
.ma3 img {
  width: 260px;
  animation: marquee3 25s linear infinite;
}
@keyframes marquee3 {
  0% { left: 120%; }
  100% { left: -30%; }
}

.ma4 {
  margin-top: -265px;
  height: 80px;
  z-index: 1;
}
.ma4 img {
  width: 150px;
  transform: rotateY(180deg);
  filter: brightness(0.6) blur(1px);
  animation: marquee4 40s linear infinite;
}
@keyframes marquee4 {
  0% { left: 100%; }
  100% { left: -30%; }
}

.ma5 {
  margin-top: -350px;
  height: 90px;
  z-index: 1;
}
.ma5 img {
  width: 160px;
  transform: rotateY(180deg);
  filter: brightness(0.4) blur(2px);
  animation: marquee5 40s linear infinite;
}
@keyframes marquee5 {
  0% { right: 100%; }
  100% { right: -30%; }
}


.marqueeAlt1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.marqueeAlt2 {
  position: absolute;
  overflow: hidden;
  display: block;
  height: 100%;
  width: 240px;
  animation: marqueeAlt1 10s linear alternate infinite;
}
.marqueeAlt2 img {
  position: absolute;
  display: block;
  height: 100px;
  animation: marqueeAlt2 17s linear alternate infinite;
}
@keyframes marqueeAlt1 {
  0% { left: 0%; }
  100% { left: calc(100% - 240px); }
}
@keyframes marqueeAlt2 {
  0% { top: 0%; }
  100% { top: calc(100% - 100px); }
}

/* OVERALL TAB DEFINITIONS */
/* Some adjustments for draggable/resizable, which are used in JS by JQueryUI */
.draggable, .draggable2 {
  position: absolute !important;
  transform: translateZ(0);
  will-change: transform;
}
.resizable {
  overflow: hidden;
}
.draggable2 {
  z-index: 1;
}

/* Containment box, defines draggable area */
#containment {
  width: 100%;
  height: 100%;
  display: block;
}

/* Defining top bar of tab characteristics (the thing u drag) */
.bar {
  height: 20px;
  border: 1px black solid;
  background-color: white;
}
.bar p {
  margin: 0; padding: 0;
  padding-left: 10px;
  padding-top: 3px;
  display:inline-block;
  font-size: 9pt;
  color: black;
}
.bar span {
  display: block;
  float: right;
  height: 100%;
  margin: 0; padding: 0;
  color: black;
  padding-top: -1px;
  padding-right: 4px;
  font-size: 15pt;
}
.mainFail {
  display: none;
}

/* Defining tab characteristics */
.tab {
  display: block;
  padding: 2px;
  background: white;
  border: 1px solid black;
}
.window {
  padding: 15px 10px;
  height: calc(100% - 45px);
  color: black;
}
.windowAlt {
  padding: 10px 10px;
  height: calc(100% - 45px);
}
.windowAlt2 {
  padding: 15px 10px;
}
.windowAlt3 {
  padding: 0px;
  height: 550px;
}
.wspecial {
  z-index: 1;
}

/* Tab ID's */
#main {
  left: calc(50% - 525px);
  top: calc(50% - 370px);
  height: 700px;
  z-index: 1000;
}
#bgeditor {
  left: 400px;
  top: 300px;
  height: 180px; width: 300px;
  z-index: 1000;
}
.imageViewers {
  left: 300px;
  top: 200px;
  height: 350px; width: 500px;
  object-fit: contain;
  padding-bottom: 35px;
  z-index: 1000;
}
#webviewer {
  left: 300px;
  top: 200px;
  height: 600px; width: 400px;
  z-index: 1000;
}
#musicViewer {
  right: 50px;
  bottom: 50px;
  height: 570px; width: 650px;
  z-index: 1000;
}
#zineviewer {
  right: 50px;
  bottom: 50px;
  height: 400px; width: 1200px;
  padding-bottom: 70px;
  object-fit: contain;
  z-index: 1000;
}

/* MAIN TAB */
/* Main window definition */
.mainWindow {
  display: flex;
  flex-direction: row;
}
.collapse {
    display: block;
    position: relative;
}
.collapse p {
    position: absolute;
    margin: 0;
    text-align: justify;
}
.collapse img {
    position: absolute;
}
.collapse div {
    position: relative;
}
.buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  position: relative; 
}
#buttonImg2 {
  height: 80%;
  position: absolute;
  left: 5px;
  top: 5px;
}
#buttonImg {
  height: 130%;
  position: absolute;
  right: -6px;
  top: -5px;
}

.mobileButton, .mobileButton2 {
  cursor: pointer;
}
#specialMain {
  margin: 0 auto; 
  display: block; 
  width: 100%;
  position: absolute;
  margin-left: 10px;
}
#mainMobile {
  display: none;
}
#mainMobileImg {
  width: 500px;
  margin: 0 auto;
  display: block;
}
#sadieMain {
  position: absolute;
  width: 150px;
  top: 270px;
  right: 93px;
}

/* Main div Left column */
.mainLeft {
  display: block;
  width: 40%;
  transform: translateX(0%);
  margin-right: 15px;
  padding-right: 5px;
  margin-left: 5px;
}
.headerLeft {
  text-decoration: underline;
  margin: 0;
  margin-bottom: 5px;
  font-size: 9.5pt;
}
.subheadingsLeft {
  margin: 0;
  margin-bottom: 5px;
  margin-left: 5px;
}
.subheadingsLeft a{
  color: black;
  text-decoration: none;
  font-size: 9.5pt;
}
.subheadingtextLeft {
  margin: 0;
  margin-bottom: 1px;
  cursor: pointer;
}
.subheadingtextRight {
  float:right;
  margin-right: 20px;
  font-size: 5pt;
  margin-top: -16px;
  pointer-events: none;
  border: 1px black solid;
  border-radius: 10px;
  padding: 2px 4px;
  opacity: 0;
  visibility: hidden;
}
#navClose {
  cursor:pointer; float: right; margin-right: 25px;
}


/* dropdown part */
.subheadingGroupHeaderText {
  margin: 0;
}
.subheadingsLeft p {
  padding-left: 6px;
  padding-right: 10px;
}
.subheadingGroup {
  margin-left: 10px;
  margin-bottom: 3px;
  margin-top: 1px;
}
.fa-caret-down {
  float: right;
  rotate: -90deg;
}

/* Main div Right column,, ive never wrote CSS this organized before lol, its not of me to be this way */
.mainRight {
  display: block;
  position: relative;
  overflow-y: scroll !important;
  overflow-x: hidden;
  width: 650px;
  flex-shrink: 0;
  scrollbar-width: thin;

}
.mainRightInner {
  pointer-events: none;
}
#headerRight {
  margin: 0;
  text-decoration: underline;
  font-size: 13pt;
  display: inline-block;
}
#subheaderRight {
  margin: 0;
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 10pt;
}
.topic {
  display: inline-block;
  margin-left: 10px;
  border: 1px black solid;
  border-radius: 10px;
  padding: 2px 4px;
  font-size: 6pt;
  top: -2px; 
  position: relative;
}
.mainRight::-webkit-scrollbar {
    width: 2px;
  }
   
.mainRight::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(99, 98, 98, 0.3);
  }
   
.mainRight::-webkit-scrollbar-thumb {
    background-color: rgb(155, 155, 155);
}
.mainRight::-webkit-scrollbar-thumb:hover {
    background-color: rgb(155, 155, 155);
}
#mixtape1, #running30, #webviewer, #bgeditor, #musicViewer, #zineviewer {
  display: none;
}
.closespecial, .openspecial {
  display: none !important;
  cursor:pointer;
}
.openspecial {
  margin-bottom: 10px;
  margin-right: 5px !important;
}
.group img {
  cursor:pointer;
}
#old {
  padding-right: 30px;
}

/* ERROR BOX */
/* error popup */
#errorBox {
  position: absolute;
  bottom: -90px;
  left: 12px;
  z-index: 10000;
  width: 300px;
  outline: 1pt black solid;
  padding: 10px;
  background: white;
  display: none;
}
.errorTitle {
  font-size: 12pt;
  margin: 0;
  margin-bottom: 8px;
}
.errorDesc {
  margin: 0;
}
#errorClose {
  cursor:pointer; float: right; margin: 0;
}

/* CREDIT BOX */
#creditBox {
  position: absolute;
  bottom: 12px;
  right: 12px;
  max-width: 250px;
  outline: 1pt black solid;
  padding: 10px;
  background: white;
  display: none;
}
.creditDesc {
  margin: 0;
}
/* cursor */
.cursor {
  display: none;
  width: 250px;
  height: 250px;
  background-size: cover;
  position: fixed;
  left: 0;
  pointer-events: none;
  transition: transform .1s;
}

/* MUSICVIEWER.HTML and Cassette Player*/
/* Music viewer */
.cassetteHolder {
  margin-top: 10px;
  border-bottom: 1px solid black
}
.cleft {
  width: 200px;
  height: 200px;  
  margin-right: 15px;
  margin-bottom: 10px;    
  float: left;
  border: 1px dashed black;
  padding: 5px; 
}
.ctitle {
  font-size: 12pt;
  margin: 0;
}
.csubtitle {
  font-size: 10pt;
  margin: 0;
}
.cleftImg {
  width: 100%;
  padding-right: 20px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.cdesc {
  text-align: justify; 
  margin-top: 8px; 
}
#cassetteHere {
  position: absolute;
  width: 350px;
  right: 65px;
  top: 80px;
}

/* Cassette Player */
#musicViewerParent {
  padding-top: 0px;
}
.mvA {
  background-image:  url("/assets/images/musicplayer/slice1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
}
/* text */
@font-face {
  font-family: digit; /* set name */
  src: url("/assets/fonts/DS-DIGIT.TTF"); /* url of the font */
}

#descriptionDiv {
  position: absolute;
  display: none;
  width: 118px;
  height: 210px;
  top: 50px;
  left: 23px;
  color: rgb(93, 253, 0);
}
#ddHeader {
  margin: 0;
  font-size: 8.5pt;
}
#dateMade {
  margin: 0;
  font-size: 8.5pt;
  margin-bottom: 5px;
}
#songDescription {
  font-size: 6.5pt;
  text-align: justify;
}
#songDuration {
  font-size: 6.5pt;
}
#textDiv {
  width: 284px;
  height: 60px;
  position: absolute;
  top: 356px;
  left: 216px;
  padding: 0; margin: 0;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 28pt;
  filter: opacity(0.7);
  color: rgb(93, 253, 0);
}
#insertText {
  font-family: digit;
  margin: 0;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 20px;
  margin-left: 15px;
}
#stillText {
  font-family: digit;
  margin: 0;
  text-align: left;
  display:none;
  margin-top: 5px;
  margin-left: 15px;
}
#movingText {
  font-family: digit;
  margin: 0;
  text-align: left;
  display: none; 
  padding-left: 100%;
  animation: move 15s linear infinite; 
}
/* https://stackoverflow.com/questions/69228615/how-can-i-make-overflow-text-animate-from-left-to-right */
@keyframes move {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/*buttons*/
.mvA input[type=image] {
  width: 57px;
  position: absolute;
}
.mvA input[type=image][pressed="true"] {
  transform: translateX(-2px);
  filter: brightness(0.6);
}
/*button position assignments*/
#pause {
  right: 127px;
  top: 496px;
}
#play {
  right: 190px;
  top: 496px;
}
#lofi {
  right: 64px;
  top: 495px;
}
#prev {
  left: 219px;
  top: 497px;
}
#next {
  left: 282px;
  top: 497px;
}
#eject {
  left: 345px;
  top: 496px;
}

/*slider*/
/*https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically*/
input[type=range][orient=vertical]#slider {
    width: 0px;
    height: 190px;
}
#slider {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none; 
  background: transparent;
  position: absolute;
  left: 80px;
  top: 306px;
}
/*https://www.w3schools.com/howto/howto_js_rangeslider.asp*/
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 64px;
  border: 0;
  background: url('/assets/images/musicplayer/VOLUME SWITCH.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 2; 
  margin-left: -12px;
}
#slider::-moz-range-thumb {
  width: 32px;
  height: 64px;
  border: 0;
  background: url('/assets/images/musicplayer/VOLUME SWITCH.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
#slider::-webkit-slider-runnable-track {
  width: 8px; 
  height: 100%;
  border-radius: 4px;
}

/*knob*/
/*based on https://cooperdf.github.io/final_project/*/
#knob {
  right: 54px;
  top: 363px;
  translate: none;
  rotate: none;
  scale: none;
  transform-origin: 0px 0px 0px;
  touch-action: none;
  user-select: none;
  position: absolute;
  width: 75px;
  height: 75px;
  cursor: pointer;
  background: url('/assets/images/musicplayer/PITCH\ CONTROL.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#knob::before {
  width: 2px;
  height: 2px;
  display: inline-block;
  background-color: red;
}


/* MUSIC.HTML */
/* Ableton demos CSS */
.abletonsong {
  margin-top: 10px;
}
.abletonleft {
  width: 100px;
  margin-right: 15px;
  float: left;
}
.abletext {
  margin-bottom: 20px;
}
.mentry {
  margin-top: 10px;
  border-bottom: 1px solid black
}
.mleft {
  width: 200px;
  margin-right: 15px;
  float: left;
}
.mleft img {
  width: 100%;
  padding-right: 20px;
}
.mtitle {
  font-size: 12pt;
  margin: 0;
}
.mtop {
  margin: 10px 0 4px 0;
  font-size: 10pt;
}
.mright ul li, .mright ul {
  margin: 0;
}
.mright ul li {
  list-style-type: none;
}
.mdesc {
  text-align: justify;
}
.mdesc a {
  color: black;
}
.mgenre {
  display: inline-block;
  margin: 0;
  font-size: 7pt;
  margin-top: 5px;
  border: 1px black solid;
  border-radius: 10px;
  padding: 2px 4px;
  margin-left: -2px;
}


/* MUSIC.HTML */
/* Movie stuff */
.movieEntries {
  border-top: 1px solid black
}
.movieTitle {
  font-size: 12pt;
  margin: 0;
  margin-top: 10px;
}
.movieEntry {
  border-bottom: 1px solid black
}
.movieWatchDate {
  margin-top: 2px;
  margin-bottom: 0;
}
.movieRating {
  margin-top: 2px;
}
.movieYear {
  font-size: 9pt;
}


/* MISC. RIGHT DIV */
.sadierotate:hover {
  rotate: 20deg;
}
.sadietext {
  width: 270px;
}
.sectionRight {
  margin-right: 10px;
}
.specialt {
  z-index: 10000;
}
.webrotate:hover {
  rotate: 3deg;
}
.webrotate {
  margin-bottom: 20px;
  display: block;
}
.viewerImages {
  max-width:100%;
  max-height:100%;
  border: 1px solid black;
}
.colorbutton {
  display: table-cell; border: 1px solid black; width: 10px; height: 11px; cursor: pointer;
  margin: 0; font-size: 8pt; text-align: center;
}
.stylebutton {
  display: table-cell; border: 1px solid black; width: 7px; height: 8px; font-size: 7pt; text-align: center; cursor: pointer;
}
.stylebutton p {
  margin: 0;
}
.ortext {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.ortext:after, .ortext:before {
  content: '';
  width: 50%;
  height: 1px;
  background: black;
  margin: 0 5px;
}
.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  z-index: 1;
}
.card {
  display: inline-flex;
  flex-direction: column;
}
.cardRow {
  width: 80px;
  height: 80px;
  background-color: blue;
  z-index: 500;
  position: absolute;
}
.cardRow img {
  position: absolute;
}
.colorRow {
  display: flex;
}
.colorColumn {
  flex: 50%;
}
.colorColumnAlt {
  float: left;
  width: 33.33333333%;
}
.concertLists ul li p {
  margin: 0;
}
.concertLists ul li {
  margin-top: 5px;
  padding: 5px;
  display: flex;
  cursor: pointer;
}
.concertLists ul {
  padding-left: 0px;
}
.listsTitle {
  font-size: 10.5pt;
  flex: 40%;
}
.listsSubtitle {
  flex: 60%;
}
.recordParent {
  display:flex;
}
.recordChild {
  flex: 50%;
}
.recordChild ul {
  margin-top: 0;
}
.childTitle {
  width: 60%
}
#lists .hoverImage {
  position: fixed;
  pointer-events: none;
  z-index: 3000;
  transition: transform .1s;
  width: 150px;
  left: 0;
  top: 0;
}
.nbnsbox {
  outline: 1px black solid;
  padding: 3px;
  background-color: white;
  z-index: 2;
}
.textinit {
  margin: 0;
}
.srightP {
 text-align: justify;
}
#embeds {
  width:100%; height: 100%; border: 1px solid black; margin: 0 auto; display: block; zoom: 100%;
}
.downloadpdf {
  font-size: 9pt;
  margin-bottom: 10px;
}
.openzine {
  font-size: 9pt;
  margin-bottom: 10px;
}
.zineImages img {
  width: 100%;
}
#zineinserted img {
  max-width:100%;
  max-height:100%;
  border: 1px solid black;
  margin-bottom: 10px;
}
#coreImageWrapper {
  width: 100%;
  overflow: auto;
  overflow-x: hidden; 
}
#zineButtons button {
  font-size: 9pt;
}
.mainLeftBottom {
  position: absolute; 
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 15px);
  grid-template-rows: 15px;
  gap: 10px;
  padding: 5px;
  padding-right: 15px;
}
.mainLeftBottom img {
  width: 15px;
  height: 15px;
}


/* BACKGROUNDS */
/* Keyframes for animated BGs*/
@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000% 0;
  }
}
@keyframes animatedBackground2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -5000% 0
  }
}


/* LISTS.HTML: US STATES*/
/* code from wikipedia SVG map, thanks wikipedia!*/
.state {fill:#FFFFFF; stroke: black; stroke-width:1}                        /* default color for all states not specified below */
.borders {stroke:BLACK; stroke-width:1}    /* color and width of borders between states */
.dccircle {display:yes}                      /* set display to yes to show the circle for the District of Columbia, or none to hide it */
.state path:hover {fill: lightcoral; cursor: pointer;}
circle:hover {fill: lightcoral; cursor: pointer;}
path, circle { pointer-events: all;}
svg {margin: 5px auto; width: 85%; display:block;}
#statetitle {font-size:10.5pt; margin: 0;}
#statedesc {margin: 0;}
#statesimg {width:50%; display:block; margin: auto auto;margin-top: 10px;}

/* JQUERY Add Classes for Mobile support */
.pRemoval { top: 0px !important; left: 0px !important; width: 100% !important;}
.imgRemoval {width: 100% !important; height: auto !important; top: 0px !important; right: 0px !important; left: 0px !important}

/* MEDIA QUERIES */
/* Mobile support with queries :3*/
@media only screen and (max-width: 900px) {
  .tab {
    padding: 0px;
  }
  .musicTab {
    display: none;
  }
  .mainRight {
    width: 100%;
  }
  #zoomSettings {
    display: none !important;
  }
  #mainMobile {
    display: block;
  }
  #mainComputer {
    display: none;
  }
  #main {
    left: 0px !important;
    top: 0px !important;
    height: 100% !important; width: 100% !important;
    z-index: 1000;
  }
  .closebutton {
    display: none !important;
  }
  .mainLeft {
    height: 100%; /* 100% Full-height */
    transform: translateX(-100%);
    position: fixed; /* Stay in place */
    width: 100%;
    z-index: 10000;
    top: 0px; /* Stay at the top */
    left: 0;
    background-color: rgb(255,255,255,0.97);
    outline: 1px black solid;
    outline-offset: -1px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    margin-left: 0px;
  }
  .subheadingsLeft p {
    margin-right: 23px;
  }
  body {
    overflow: hidden;
  }
  html {
    overflow: hidden;
    scroll-padding-top: 50px;
  }
  .mleft {
    width: 150px;
  }
  .subheadingsLeft a {
    display: block;
  }
  .headerLeftFirst {
    margin-top: 10px;
  }
  .window {
    margin-right: 0px;
  }
  .buttons {
    display:none;
  }
  .closespecial, .openspecial {
    display:block !important;
  }
  .sadietext {
    width: 100%;
  }
  #lists .hoverImage { 
    display: none;
  }
  .nbnsbox {
    z-index: -1000;
    width: 100% !important;
  }
  .nbnsspecial {
    right: 0px !important;
  }
  .colorbutton {
    width: 16px; height: 16px;
  }
  #closeNavAltText {
    display: none !important;
  }
  #musicButton {
    display: none;
  }
  #bgeditor {
    width: 100% !important;
    top: none !important;
    bottom: 500px !important
  }
  .sectionRight {
    margin-right: 0px;
  }
  .openzine {
    display: none;
  }
  .mainLeftBottom {
    position: relative;
    padding-top: 10px;
    bottom: auto;
  }
}

@media only screen and (max-width: 450px) {
  #navClose {
    margin-right: 45px;
  }
  .recordParent {
    display: block;
  }
  .childTitle {
    width: 70%;
    margin: 0 auto;
    display: block;
  }
  svg {
    width: 100%;
  }
  .subheadingsLeft p {
    margin-right: 43px;
  }
  #mainMobileImg {
    width: 100%;
    margin-left: -10px;
  }
}