canvas{
  pointer-events: none;
}

@font-face{
  font-family: codersCrux;
  src: url("Coders-Crux.woff");
}

@font-face{
  font-family: pixellari;
  src: url("Pixellari.ttf");
}

body{
  font-size: 16px;
}

/*@media screen and (min-width:768px){
    font-size:16px;
}

@media screen and (min-width:1200px){
    font-size:18px;
}

@media screen and (min-width:1600px){
    font-size:20px;
}*/

.tClicked{
  opacity: 80%;
}

t{
  opacity: 10%;
}

h1{
  font-family: pixellari;
  text-align: left;
  font-size: 4em;
  color: white;
  position: absolute;
  left: 0px;
  top: -50px;

  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */

  width: 5000px;
}

.h11{
  left: 10px;
}

.h12{
  left: 110px;
}

.h13{
  left: 110px;
}

.desktopIcon{
  position: absolute;
  width: 160px;
  display: block;
  z-index: 0;
}

.iconText{
  color: white;
  font-family: pixellari;
  font-size: 1.5rem;

  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */

  word-wrap: break-word;
  text-align: center;
  width: 120%;
  left: -10%;
  position: relative;
}

.folderIcon .iconText{
  width: 100%;
  left: 0%;
}

#aboutIcon{
  top: 44px;
  left: 37px;
}

#gamesIcon{
  top: 53px;
  left: 216px;
}

#comicsIcon{
  top: 57px;
  left: 405px;
}

#musicIcon{
  top: 48px;
  left: 578px;
}

#galleryIcon{
  top: 238px;
  left: 228px;
}

#internetIcon{
  top: 240px;
  left: 403px;
}

#trashIcon{
  top: 47px;
  right: 40px;
}

.trashOver{
  transform: scale(1.1);
}

#cvIcon{
  top: 237px;
  left: 38px;
}

#artstationIcon{
  bottom:  202px;
  right: 420px;
}

#twitterIcon{
  bottom: 36px;
  right: 610px;
}

#bskyIcon{
  bottom: 35px;
  right: 790px;
}

#igIcon{
  right:  422px;
  bottom: 32px;
}

#itchIcon{
  bottom: 36px;
  right: 970px;
}

#githubIcon{
  bottom: 205px;
  right: 40px;
}

#patreonIcon{
  bottom: 32px;
  right: 42px;
}

#ko-fiIcon{
  bottom: 35px;
  right: 230px;
}

#soundcloudIcon{
  bottom: 200px;
  right: 230px;
}

#log{
  position: absolute;
  bottom: 50%;
  left: 50%;
  vertical-align: bottom;
  visibility: hidden;
}

html, body { 
margin:0;
padding:0;
width:100%;
height:100%;
overflow: auto;
}

#bgImage{
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0%;
  top: 0%;
  filter: hue-rotate(313deg);
  image-rendering: high-quality;
}

body{

  background-repeat: no-repeat;
  background-position: center center; 
  background-attachment: fixed;
  background-size: cover;

  font-family: pixellari;
  text-align: center;
  vertical-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: none;
  
  overflow: hidden;

  margin: 0px;
  padding: 0px;

      user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

a{
  cursor: none;
    user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  color:white;
}

.cursorImg{
  position: absolute;
  text-align: center;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  z-index: 1000;
}

.dragstart{
  pointer-events: none;
}

.iconImg{
  width: 128px;
    user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  image-rendering: pixelated;
}

.desktopIcon:hover .iconImg{
  transform: scale(1.05);
}


.desktopIcon:hover .iconImg.clicked{
  transform: scale(0.9);
}

.folderIcon:hover .iconImg{
  transform: scale(1.05);
}


.folderIcon:hover .iconImg.clicked{
  transform: scale(0.9);
}

.window.clicked{
  transform: scale(1.01);
}

ul{
  text-align: center;
  list-style-type: none;
  padding-left: 0;
}

li{
  display: inline-block;
  padding: 5px;
  color: white;
  text-decoration: none;
  font-size: 2em;
}

.button{
  border: none;
  background-color: #319f63;
  font-family: codersCrux;
  color: white;
  font-size: 1em;
}

.window{
  z-index: 100;
  position: absolute;
  width: 1000px;
  background-color: white;
  top: 100px;
  left: 100px;
  text-align: left;
  display: flex;
  flex-direction: column;
  border: 1px solid white;
  box-shadow: black 3px 3px;
  visibility: hidden;
}

.window.windowOpened{
  transition: 0.1s;
  animation-name: openingAnim;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

.window.windowClosed{
  animation-name: closingAnim;
  animation-duration: 0.1s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

@keyframes openingAnim{
  from{
    transform: scale(1,0);

  }

  30%{
    transform: scale(1,1.1);
  }

  70%{
    transform: scale(1,0.95);
  }

  to{
    transform: scale(1,1);
  }
}

@keyframes closingAnim{
  from{
    transform: scale(1,1);

  }

  to{
    transform: scale(1,0);
    visibility: hidden;
  }
}

.openingAnim {
  -webkit-animation-name: openingAnim;
  animation-name: openingAnim;
}

.closingAnim {
  -webkit-animation-name: closingAnim;
  animation-name: closingAnim;
}

#galleryWindow{
  visibility: hidden;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  top: 2vh;
  max-width: 90vw;
}

.galleryContent{
  display: block;
  max-height:  90vh;
  align-content: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

#galleryImage{
  object-fit: contain;
  max-height: 93%;
  max-width: 93%;
  padding: 20px;
}

#musicWindow{
  width: 350px;
  top: 50px;
  left: 800px;
}

#aboutWindow{
  top: 175px;
  left: 230px;
}

#comicsWindow{
  width: 950px;
  top: 95px;
  left: 365px;
}

#gamesWindow{
  width: 1100px;
  visibility: hidden;
}


.windowContent{
  background-color: #346969;
  border: 2px #346969;
  color: white;
  font-size: 1.5rem;
  font-weight: normal;
  display: flex;
}

.musicPlayer{
  text-align: center;
  width: 100%;
  display: block;
}

#albumCover{
  width: 250px;
  height: 250px;
  margin-top: 25px;
  margin-bottom: 10px;
  object-fit: cover;
  box-shadow: black 3px 3px;
}

h2{
  padding: 0;
  margin: 0;
  font-weight: normal;
}

.musicButton{
  border: 0;
  padding: 0px 0px;
  width: 32px;
  height: 32px;
  background-color: transparent;
  vertical-align: center;
  cursor: none;
}

.galleryButton{
  border: 0;
  padding: 0px 0px;
  width: 64px;
  height: 64px;
  background-color: transparent;
  vertical-align: center;
  cursor: none;
  position: absolute;
  opacity: 50%;
}

.galleryButton:hover{
  opacity: 90%;
}

#galleryPrevButton{
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  left: 5px;
  top: 50%;
}

#galleryNextButton{
  right: 5px;
  top: 50%;
}

.musicButtonDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

#playButton{
  width: 48px;
  height: 48px;
}

#muteButton{
  width: 32px;
  height: 32px;
  margin-left: 8px;
}

.garbage{
  display: none;
}

#prevButton{
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.buttonImg{
  width: 100%;
  object-fit: contain;
      user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}


.tagSection{
  padding: 0.8rem;
  border-right: 3px solid white;
  width: 225px;
  max-width: 225px;
  font-size: 1.25rem;
  word-break: break-word;
}

.fileBrowser{
  width: 100%;
  padding: 0.3rem;
  min-height: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

p{
  padding: 2rem;
  margin: 0px;
}

.clearButton{
  background-color: transparent;
  font-family: inherit;
  border: none;
  padding: 0px;
  cursor: none;
}


h4{
  margin: 0px;
  font-weight: normal;
  color: white;
  font-size: 1.4rem;
}

.checkbox{
  display: inline-block;
  vertical-align: top;
  padding-left: 0px;
  position: relative;
  color: #71948d;
  cursor: none;
}

[type="checkbox"]:hover + span{
  color: #B8CAC6;
}

span.hover{
  color: #B8CAC6;
}

[type="checkbox"]:checked + span{
  color: white;
}

.checkbox input{
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}



.folderIcon{
  width: 160px;
  display: block;
  text-align: center;
  padding: 0.5rem;
}

.windowBanner{
  padding: 0.3rem 0.8rem;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  color: #4f1447;
  font-size: 2rem;
}

.bannerText{
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




.crossImg{
  width: 30px;
  height: 29px;
  vertical-align: center;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  image-rendering: pixelated;
}

input[type=range] {
  cursor: none;
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 60%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 60%;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  background: transparent;
  border-radius: 1.3px;
  border: 3px solid white;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 20px;
  background: transparent;
  border-radius: 1.3px;
  border: 3px solid white;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 20px;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: transparent;
  border-radius: 1.3px;
  border: 3px solid white;
}
input[type=range]:focus::-ms-fill-lower {
  background: transparent;
}
input[type=range]::-ms-fill-upper {
  background: transparent;
  border-radius: 1.3px;
  border: 3px solid white;
}
input[type=range]:focus::-ms-fill-upper {
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 6px;
  border-radius: 0px;
  background: white;
  outline:  white solid 1px;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 6px;
  border-radius: 0px;
  background: white;
  outline:  white solid 1px;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 6px;
  border-radius: 0px;
  background: white;
  outline:  white solid 1px;
}

audio{
  preload: metadata;
}

#currentTime{
  width: 50px;
  float: left;
  text-align: left;
  vertical-align: middle;
  margin-top: 4px;
  margin-right: 4px;
}


@media (max-device-width: 640px) and (orientation: portrait), (max-device-height: 640px) and (orientation: landscape){
  .window, #aboutWindow, #comicsWindow, #musicWindow, #gamesWindow, #galleryWindow{
    position: fixed;
    left: 0px;
    top: 0px;
    max-height: 100%;
  }

  .cursorImg{
    display: none;
  }



  .windowIcons{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 1rem;
  }



  .socialIcons{
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    align-items: flex-end;
    align-content: flex-end;
    padding: 1rem;
    justify-content: flex-end;
  }

  .desktopIcon{
    width: initial;
    display: block;
    position: initial;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .garbage{
    display: none;
  }



  #trashIcon{
    display: none;
  }

  #gamesWindow .windowContent .fileBrowser{
    justify-content: space-evenly;
  }

}

@media (max-device-width: 640px) and (orientation: portrait){
  html{
    font-size: 18px;
  }

  .window, #aboutWindow, #comicsWindow, #musicWindow, #gamesWindow, #galleryWindow{
    width: 92vw;
    position: fixed;
    left: 4vw;
    top: 4vw;
    max-height: 100%;
  }

  .desktopIcon .iconImg{
    width: 20vw;
  }
  .desktopIcon{
    margin-top: 2rem;
  }

  .socialIcons{
    bottom: 2rem;
  }

  #albumCover{
    width: 70vw;
    height: 70vw;
    margin-top: 7vw;
    margin-bottom: 7vw;
  }

  input[type=range] {
    width: 80%;
  }

  .musicButtonDiv{
    margin-bottom: 3vw;
  }

  #playButtonDiv{
    margin-bottom: 5vw;
  }

    #playButton{
    width: 10vw;
    height: 10vw;
  }

  #prevButton{
    width: 6vw;
    height: 6vw;
  }
  #nextButton{
    width: 6vw;
    height: 6vw;
  }

}

@media (max-device-height: 640px) and (orientation: landscape){
  html{
  font-size: 14px;
  }

  .window, #aboutWindow, #comicsWindow, #musicWindow, #gamesWindow, #galleryWindow{
    width: 96vw;
    position: fixed;
    left: 4vh;
    top: 4vh;
    max-height: 96%;
    max-width: initial;
    margin: initial;
  }

  .desktopIcon .iconImg{
    width: 20vh;
  }

  .folderIcon .iconImg{
    width: 20vh;
  }

  .tagSection{
    font-size: 1rem;
    line-height: 1.1rem;
  }

  .fileBrowser{
    min-height: initial;
  }

  .socialIcons{
    bottom: 2rem;
  }

  #galleryImage{
    padding-top: 0;
    padding-bottom: 0;
    max-height: 100%;
  }

  .galleryContent{
    max-height: 85vh;
  }

  #albumCover{
    width: 70vh;
    height: 70vh;
    margin-top: 7vh;
    margin-bottom: 7vh;
    margin-left: 7vh;
    margin-right: 7vh;
  }

  .musicPlayer{
    display: flex;
  }

  input[type=range] {
    width: 75%;
  }

  .musicButtons{
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    padding-top: 10vh;
  }

  #playButton{
    width: 10vh;
    height: 10vh;
  }

  #prevButton{
    width: 6vh;
    height: 6vh;
  }
  #nextButton{
    width: 6vh;
    height: 6vh;
  }

  .fileBrowser{
    padding-bottom: 10vh;
  }

}