@font-face {
  font-family: 'Suisse';
  src: url(fonts/SuisseIntl.ttf) format('truetype'),
    url(fonts/SuisseIntl.woff) format('woff'),
    url(fonts/SuisseIntl.woff2) format('woff2');
}

@font-face {
  font-family: 'Suisse-Mono';
  src: url(fonts/suisseintlmono-regular-webfont.woff) format('woff'),
    url(fonts/suisseintlmono-regular-webfont.woff2) format('woff2');
}

body {

    --menu-width: 300px;
    --margin: 6px;
    --padding: 12px;
    --bg: rgb(0, 0, 0);
    --fg: rgb(255, 255, 255);
    --highlight: rgb(125, 0, 255);

} 

*::selection {
  background-color: var(--highlight);
  color: var(--fg);

}

* {
  font-family: system-ui;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h3 {
  font-weight: normal;
}
body {
  background: var(--bg);
  transition: all 0.2s;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  align-content: stretch;
  justify-content: stretch;
  flex-wrap: wrap;
  font-family: 'Suisse-Mono';

}

main {
    position: relative;
    width: calc( 100vw);
    max-width: calc( 100vw );

    height: 100vh;
    float: left;
    display: block;
    overflow: hidden;
    overflow-x: hidden;
/*            padding: var(--padding);*/
/*    margin: var(--margin);*/
}

#menu_container {
    position: absolute;
    width: var(--menu-width);
    height: auto;
    width: 100vw;
    bottom: 0;
    left: 0;
    display: block;

}
#menu {
    padding-left: var(--padding);
    padding-right: var(--padding);
    border-radius: 40px;
    background: #ccc;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    min-width: 90vw;
    width: 90vw;
    max-width: calc(100vw - var(--margin)*4);
    margin: calc(var(--margin)*2) auto;
/*    height: calc(100vh - var(--margin) * 2);*/
    position: relative;

    z-index: 999;
    bottom: var(--margin);
}
#menu > * {
  margin: var(--padding) var(--margin);
/*  margin-bottom: var(--padding);*/

}
#menu *:not(input) {
  user-select: none;
  font-family: 'Suisse-Mono';

/*  display: block;*/
/*  position: relative;*/
/*  float: left;*/
}

/*#menu > span,
#menu > input,
#menu > div,
#menu > button {
  width: auto;
  position: relative;
  float: left;
  display: block;
}*/
.menu-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  justify-content: space-between;
}
.menu-block:nth-child(1) {
  margin-bottom: var(--margin);
}

button {
  text-transform: uppercase;
  background: #aaa;
  cursor: pointer;
  outline: none;
  border-radius: 20px;
  border: none;
  transition: background .2s;
  padding: var(--margin) var(--padding);
  margin: 0 var(--margin);
}

button:hover {
  background: #bbb;
}
button:active {
  background: var(--highlight);
}
select {
/*  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;*/
  display: block;
  border: none;
  text-transform: uppercase;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  background: #aaa;

  padding: var(--margin) var(--padding);
  margin: 0 var(--margin);
}

option::after {
  content: "↓";
}

select:focus {
  outline: 1px solid var(--highlight);
  background: var(--highlight);
  color: var(--fg);
}


.file-button {
  display: block;
  width: calc(150px + var(--padding) * 2);
  height: 40px;
  position: absolute;
  opacity: 0;
/*  padding: var(--margin) var(--padding);*/
  cursor: pointer;
  background: yellow;
}

.upload-text {
  font-family: 'Suisse-Mono';
  visibility: visible;
  content: 'LOAD GRAVEYARD/FONT';
  text-transform: uppercase;
  border-radius: 20px;
  opacity: 1;

  background: #aaa;
  display: block;
  position: relative;
  user-select: none;
  pointer-events: none;
  float: left;
  padding: var(--margin) var(--padding);
  margin: 0 var(--margin);
}
.file-button:hover + .upload-text {
  background: #bbb;

}

.file-button:active + .upload-text {
  background: var(--highlight);

}

/*Divider*/

.divider-container {
  display: block;
  position: relative;
  margin: 0 var(--margin);
}

divider {
  height: 100px;
  width: 0px;
  top: 0;
  border-left: 1px solid #aaa;
}

/*Input stylings */
input {

  font-size: 12px !important;
}
input[type='text'] {
  border-radius: 20px;
  padding: var(--margin) calc(var(--padding) / 2);
  margin: 0 var(--margin);
  border: 1px solid #aaa;
  background: #eee;


}
input[type='text']:focus {
  border: 1px solid var(--highlight);
  outline: var(--highlight);

}



.checkbox {
  position: relative;
  display: block;
  overflow: hidden;
}
input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  opacity: 0.1;
  height: 100%;
  position: absolute;
  width: 100%;
  cursor: pointer;

}
input[type='checkbox'] + label {
  border-radius: 20px;
  background: #bbb;
  color: #555;
  display: block;
  position: relative;
  user-select: none;
  pointer-events: none;
  float: left;
  padding: var(--margin) var(--padding);
  margin: 0 var(--margin);
  cursor: pointer;
  opacity: 0.8;

}
input[type='checkbox']:hover + label {
  opacity: 0.9;
}
input[type='checkbox']:checked + label {
  background: var(--highlight);
  color: var(--fg);
}
input[type='checkbox'] + label:before {
  font-family: 'Suisse-Mono';
  content: "× ";
}


input[type='checkbox']:checked + label:before {
  font-family: 'Suisse-Mono';

  content: "✓ ";
}



input[type="range"] {
/*  -webkit-appearance: none;*/
/*  appearance: none;*/
  width: 100%;
  outline: none;
  border: none;
  border-radius: 10px;
  height: 10px;
  background: #aaa;
  opacity: 0.7;
  -webkit-transition: .2s;
  cursor: pointer;
  accent-color: var(--highlight);

}
input[type="range"]:hover {
  opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: black;
  cursor: pointer;
}

input[type="range"]:active::-webkit-slider-thumb {
  background: var(--highlight);
}




/* Drop zone  */
.drop {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  transition: 0.5s opacity;
/*  opacity: 0;*/
}
.drop.inactive {
  opacity: 0;
/*  animation: 0.5s dissapear 1 forwards;*/

}
/*.drop:hover {
  opacity: 1;
}*/
@keyframes dissapear {
  from {  
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#dropzone {
  box-sizing: border-box;
  position: absolute;
    border: 2px dotted var(--highlight);
    border-radius: 20px;
    display: flex;
    align-content: center;
    width: calc(100% - var(--margin)*2);
    height: calc(100% - var(--margin) * 2);
    left: 0;
    z-index: 1;
    margin: var(--margin) 0 var(--margin) var(--margin) ;
    -webkit-appearance: none;
    z-index: 999;
}


.drop.hidden {
  opacity: 0;
}
.title {
  color: var(--highlight);
}

#dropzone:focus {
}

.title, h3 {
  font-size: 20px !important;
  font-family: 'Suisse' !important;
/*  color: var(--fg);*/
}
span.caption {
  font-family: 'Suisse-Mono';
}