/* fix for outline on editable elements when selected */
p:focus {
  outline: none;
}

body {
  --theme-back-color: white;
  --theme-text-color: black;
  --theme-back-color-a: rgba(255, 255, 255, 0.8);
  --theme-text-color-a: rgba(0, 0, 0, 0.65);
  --theme-blend-mode: screen;
}

body.darkmode {
  --theme-back-color: black;
  --theme-text-color: white;
  --theme-back-color-a: rgba(0, 0, 0, 0.65);
  --theme-text-color-a: rgba(255, 255, 255, 0.8);
  --theme-blend-mode: lighten;
}

main {
  background-color: #0000;
}

#settings_button {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 50px;
  background-color: var(--theme-back-color-a);
  mix-blend-mode: var(--theme-blend-mode);
  border-radius: 0px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  border: none;
  transition: 1s;
  z-index: 1001;
  /*box-shadow: 0px 0px 2px 3px var(--theme-text-color-a);*/
}

#settings_button.close {
  left: min(350px, 80%);
}

#settings {
  font-family: sans-serif;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  left: -350px;
  width: 350px;
  max-width: 80%;
  height: 100vh;
  transition: all 1s;
  background-color: var(--theme-back-color-a);
  mix-blend-mode: initial;
  color: var(--theme-text-color);
  z-index: 1000;
  padding: 20px;
  line-height: 2.5;
  overflow-y: auto;
  overflow-x: auto;
}

#settings.open {
  left: 0px;
  box-shadow: 25px 40px 40px -25px var(--theme-text-color-a);
}

.setting_block {
  margin-left: 30px;
  font-size: smaller;
  line-height: 1.5;
}

/* based on the animated menu from w3schools */
[class^="bar"] {
  width: 30px;
  height: 5px;
  background-color: var(--theme-text-color);
  margin: 6px auto;
  transition: 0.4s;
  border-radius: 2px;
}

.darkmode [class^="bar"] {
  background-color: var(--theme-text-color);
}

/* Rotate first bar */
.close .bar1 {
  -moz-transform: rotate(-45deg) translate(-8px, 7px);
  -ms-transform: rotate(-45deg) translate(-8px, 7px);
  -o-transform: rotate(-45deg) translate(-8px, 7px);
  -webkit-transform: rotate(-45deg) translate(-8px, 7px) ;
  transform: rotate(-45deg) translate(-8px, 7px) ;
}

/* Fade out the second bar */
.close .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.close .bar3 {
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  -ms-transform: rotate(45deg) translate(-8px, -8px);
  -o-transform: rotate(45deg) translate(-8px, -8px);
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

#cover {
  position: fixed;
  top:0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  z-index: 990;
  display: none;
}

.back {
  background-color: black;
  background-image: url("../project-images/Crystal_Tut.jpeg");
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.darkmode .back {
  background-color: black;
}

.textback {
  width: 70%;
  margin: 150px auto;
  position: relative;
  top: 0px;
  left: 0px;
  height: 100%;
  background-color: #0006;
  outline: 10px solid var(--theme-back-color-a);
}

.text {
  border: 1px solid var(--theme-text-color);
  background-color: var(--theme-back-color);
  color: var(--theme-text-color);
  overflow: visible;
  font-size: 35px;
  font-family: sans-serif;
  font-weight: bold;
  mix-blend-mode: var(--theme-blend-mode);
  padding: 10%;
  transition: all 1s;
  opacity: 1;
}

::selection {
  background-color: var(--theme-text-color);
  color: var(--theme-back-color);
}

.countbox {
  position: fixed;
  bottom: 0px;
  left: 0px;
  padding: 15px;
  background-color: var(--theme-back-color);
  color: var(--theme-text-color);
  mix-blend-mode: auto;
  z-index: 999;
  font-family: sans-serif;
  border-radius: 0px 10px 0px 0px;
}

@media only screen and (max-width: 600px) {
  .textback {
    margin: 100px auto;
    width: 80%;
  }
  .text {
    padding: 10%;
  }
  h1 {
    font-size: smaller;
  }
  p {
    font-size: medium;
  }
}


@supports (appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none) {
  input {
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;

      border: 2px solid var(--theme-text-color);
      border-radius: 0.4em;
      margin: .5em;
      position: relative;
  }

  input:focus {
      outline: none;
      box-shadow: 0 0 2px 2px var(--theme-text-color-a);
  }

  input[type="file"] {
      border: 2px solid var(--theme-text-color-a);
      background-color: var(--theme-text-color-a);
      color: var(--theme-back-color)
  }

  input[type="range"] {
      border: none;
      background: none;
  }

  input::-webkit-slider-runnable-track { 
      background-color: var(--theme-text-color-a);
      border-radius: 2px;
      height: 4px;
   }
  input::-moz-range-track { 
    background-color: var(--theme-text-color-a);
    border-radius: 2px;
      height: 4px;
  }
  input::-ms-track {
    background-color: var(--theme-text-color-a);
    border-radius: 2px;
      height: 4px;
  }

  input::-webkit-slider-thumb {
    border: 1px solid var(--theme-text-color-a);
    background-color: var(--theme-back-color);
    border-radius: .5em;
    height: 1em;
    width: 1em;
}
input::-moz-range-thumb {
  border: 1px solid var(--theme-text-color-a);
  background-color: var(--theme-back-color);
    border-radius: .5em;
    height: 1em;
    width: 1em;
}
input::-ms-thumb {
  border: 1px solid var(--theme-text-color-a);
  background-color: var(--theme-back-color);
    border-radius: .5em;
    height: 1em;
    width: 1em;
}
input::-webkit-slider-thumb:active {
  border: none;
  background-image: linear-gradient( to right, var(--accent-violet), var(--accent-blue) );
}
input::-moz-range-thumb:active {
  border: none;
  background-image: linear-gradient( to right, var(--accent-violet), var(--accent-blue) );
}
input::-ms-thumb:active {
  border: none;
  background-image: linear-gradient( to right, var(--accent-violet), var(--accent-blue) );
}
}