@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  background-color: black;
}

a {
  font-weight: bold;
  color: black;
}

#submitModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(1,1,1, 0.9);
  z-index: 10;
  font-size: .8em;
}

#submitModal h2 {
  margin-top: 0px;
}

#submitModal .content {
  background: white;
  width: calc(100vw - 100px);
  /* height: calc(100vh - 100px); */
  margin: 20px;
  color: black;
  padding: 30px;
  font-size: 2em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#submitModal .content #submitImageForm {
  width: 100%;
}

#submitModal .content button {
  display: block;
  width: 100%;
  height: 66px;
  border: none;
  font-size: 24px;
  background-color: #aaaaaa;
  color: black;
  margin-top: 10px;
  cursor: pointer;
}

#submitModal .content #submitImageForm button {
  background-color: black;
  color: white;
}

#submitModal .content button:hover {
  background-color: #3FFDD7;
  color: #00279F;
}

#submitModal .content button:focus {
  outline: none;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100vw;
  background-color: #56CECF;
  color: white;
  z-index: 2;
}

#header .header {
  position: absolute;
  top: 24px;
  left: 20px;
  font-size: 2.4em;
  letter-spacing: 1em;
  color: white;
  text-decoration: none;
}

#header .header:hover {
  font-weight: bold;
}

#header .subheader {
  position: absolute;
  top: 56px;
  left: 20px;
  font-size: 1.6em;
  font-weight: bold;
}

#header .button {
  position: absolute;
  right: 20px;
  top: 17px;
  height: 66px;
  background-color: black;
  line-height: 66px;
  padding: 0 20px;
  font-size: 24px;
  color: white;
  text-decoration: none;
}

#header .button:hover {
  background-color: #3FFDD7;
  color: #00279F;
}

#header #waitlistInfo {
  position: absolute;
  top: 80px;
  right: 20px;
  width: 300px;
  background-color: black;
  z-index: 1;
  padding: 10px 20px;
  pointer-events: none;
  transition-duration: 0.25s;
  opacity: 0;
}

#header #waitlistInfo .content {
  font-size: 1.4em;
}

#header #waitlistInfo .content a {
  color: white;
}

#header #waitlistInfo .content a:hover {
  color: #3FFDD7;
}

#header #waitlistInfo .footnote {
  opacity: 0.5;
}

#header:hover #waitlistInfo {
  display: block;
  top: 90px;
  pointer-events: all;
  opacity: 1;
}

#canvasWrapper {
  position: fixed;
  top: 100px;
  left: 0;
  width: 100vw;
  height: 50vw;
  max-height: 50vh;
  overflow: hidden;
  cursor: move;
  z-index: 1;
}

#canvasWrapper #carRender{
  transform: scale(.5);
  transform-origin: top left;
}

#canvasWrapper #credit {
  position: absolute;
  bottom: 10px;
  left: 20px;
  color: black;
  font-size: 1.4em;
  z-index: 5;
  /* pointer-events: none; */
}

#canvasWrapper #instructions {
  position: absolute;
  top: 10px;
  left: 20px;
  color: black;
  font-size: 1.4em;
  z-index: 5;
  cursor: pointer;
}

#canvasWrapper #vehicleButton {
  position: absolute;
  bottom: 10px;
  right: 20px;
  color: white;
  font-size: 1.4em;
  z-index: 5;
  cursor: pointer;
  padding: 20px;
  width: 100px;
  background-color: black;
  text-align: center;
}

#canvasWrapper #vehicleButton:hover {
  background-color: #3FFDD7;
  color: #00279F;
}

#spacer {
  position: relative;
  margin-top: 100px;
  width: 100vw;
  height: 50vw;
  max-height: 50vh;
}

#options {
  position: fixed;
  width: 100%;
  height: 60px;
  z-index: 2;
  padding: 0;
  margin: 0;
  background: black;
}

#options .button {
  position: relative;
  display: table;
  float: left;
  height: 60px;
  width: 20%;
  background: black;
  font-size: 1.4em;
  color: white;
  text-align: center;
  /* line-height: 60px; */
  cursor: pointer;
}

#options .button .label {
  display: table-cell;
  vertical-align: middle;
}

#options .button:hover {
  background-color: #3FFDD7;
  color: #00279F;
}

#options .button input {
  position: absolute;
  top: 0;
  left: 0;
  height: .01px;
  width: .01px;
  z-index: -1;
  overflow: hidden;
  opacity: 0;
}

#options input.reverse {
  direction: rtl;
}

#options .slider {
  position: relative;
  width: 30%;
  height: 50%;
  float: left;
}

#options .slider input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  outline: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  border: solid 6px black;
  border-radius: 0;
  background: repeating-linear-gradient(
    to right,
    #101010,
    #101010 1px,
    #202020 1px,
    #202020 2px
  );
}

#options .slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  background: #404040;
}

#options .slider input:hover::-webkit-slider-thumb {
  border: 1px solid #3FFDD7;
}

#options .slider .label {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 1.4em;
  line-height: 2.4em;
  pointer-events: none;
  color: white;
}

#textureGrid {
  display: grid;
  grid-template-columns: 25vw 25vw 25vw 25vw ;
  padding-top: 60px;
}

#textureGrid > .texture {
  height: 12.50vw;
  overflow: hidden;
}

#textureGrid > .texture.lifestyle {
  display: none;
  height: 12.50vw;
  overflow: hidden;
}

#textureGrid > .texture.MPDV {
  display: block;
  height: 12.50vw;
  overflow: hidden;
}

#textureGrid > .texture > .thumbnail {
  width: 100%;
  height: 100%;
}

#textureGrid > .texture:hover {
  cursor: pointer;
}

#textureGrid > .texture > .thumbnail:hover {
  transform: scale(1.2);
  transition-duration: .1s;
}

#textureGrid > .texture > .thumbnail:active {
  transform: scale(1.5);
  transition-duration: .1s;
}

#textureGrid > .texture.submit {
  display: table;
  width: 100%;
  color: white;
  background-color: #111111;
}

#textureGrid > .submit > .button {
  display: table-cell;
  vertical-align: middle;
  font-size: 1.4em;
  text-align: center;
}

#footer {
  background-color: #151515;
  color: #aaaaaa;
  padding: 14px 20px;
  text-align: center;
}

#footer a {
  color: white;
}

@media only screen and (max-width: 820px){
  #textureGrid {
    display: grid;
    grid-template-columns: 33.333333vw 33.333333vw 33.333333vw ;
  }
  #textureGrid > .texture {
    height: 16.666666vw;
    overflow: hidden;
  }

  #header .header {
    font-size: 2em;
    letter-spacing: .15em;
  }

  #header .subheader {
    font-size: 1.2em;
    font-weight: bold;
  }

  #header .button {
    top: 20px;
    height: 60px;
    line-height: 60px;
    padding: 0 12px;
    font-size: 16px;
  }

  #canvasWrapper #vehicleButton {
    position: absolute;
    bottom: 10px;
    right: 0px;
    color: white;
    font-size: 1em;
    z-index: 5;
    cursor: pointer;
    padding: 10px;
    width: 80px;
    background-color: black;
    text-align: center;
  }
}

@media only screen
and (max-width: 820px)
and (orientation: landscape) {
  #header {
    position: fixed;
    height: 60px;
    width: 50vw;
  }

  #header .header {
    top: 10px;
    font-size: 1.8em;
  }

  #header .subheader {
    top: 32px;
    left: 20px;
    font-size: 1em;
    font-weight: bold;
  }

  #header .button {
    top: 5px;
    right: 5px;
    height: 50px;
    line-height: 50px;
    padding: 0 14px;
    font-size: 16px;
  }

  #canvasWrapper {
    top: 60px;
    width: 50vw;
    height: calc(100vh - 60px);
    max-height: none;
  }

  #header #waitlistInfo {
    top: 50px;
    right: 10px;
  }

  #header:hover #waitlistInfo {
    top: 60px;
  }

  .scrollable {
    position: absolute;
    top: 0px;
    left: 50vw;
    width: 50vw;
  }

  #options {
    width: 50vw;
    height: 120px;
  }

  #options .button {
    width: 50%;
    height: 50%;
  }

  #options .slider {
    width: 50%;
    height: 25%;
    float: left;
  }

  #textureGrid {
    display: grid;
    grid-template-columns: 16.66666vw 16.66666vw 16.66666vw;
  }

  #textureGrid > .texture {
    height: 8.333333vw;
  }

  #spacer {
    position: relative;
    margin-top: 0px;
    width: 50vw;
    height: 0;
  }

  #submitModal .content form, #submitModal .content > button {
    display: inline-block;
    width: 40%  !important;
  }

  #textureGrid {
    padding-top: 120px;
  }
}