/* source-code-pro-300 - latin */
@font-face {  font-family: 'Source Code Pro';  font-style: normal;  font-weight: 300;  src: local('Source Code Pro Light'), local('SourceCodePro-Light'),       url('../fonts/source-code-pro-v11-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */       url('../fonts/source-code-pro-v11-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}
/* source-code-pro-500 - latin */
@font-face {  font-family: 'Source Code Pro';  font-style: normal;  font-weight: 500;  src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'),       url('../fonts/source-code-pro-v11-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */       url('../fonts/source-code-pro-v11-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}
/* source-code-pro-700 - latin */
@font-face {  font-family: 'Source Code Pro';  font-style: normal;  font-weight: 700;  src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'),       url('../fonts/source-code-pro-v11-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */       url('../fonts/source-code-pro-v11-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v35-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v35-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v35-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v35-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v35-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v35-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}
/* oswald-600 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/oswald-v35-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v35-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v35-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v35-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v35-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v35-latin-600.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* background as variable */
:root {
  --background-color: #222;
  --text-color: white;
  --link-color: #f44336;
}

html {
  background-color: var(--background-color);
  font-size: 10pt;
}

body {
  font-family: 'Source Code Pro';
  font-weight: 500;
  color: var(--text-color);
  margin: 0;
}

a, a:hover, a:visited {
  color: black;
}

#tools-wrapper {
  margin: 1em;
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 1em;
}

.head {
  grid-column: span 12;
}

a.tools-link, a.tools-link:visited {
  color: #f44336;
}

.tool {
  grid-column: span 3;
}

.tool img {
  width: 100%;
}

#poster-wrapper {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 20% auto 5%;
  grid-template-rows: repeat(1, 100vh);
  z-index: 100;
}


#poster-control {
  padding: 1em;
  grid-column: 1 / 2;
  /*border-right: 3px solid black;*/
  /* background-color: #fff; */
}

#poster {
  grid-column: 2 / 3;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 1em;
}

#poster canvas {
  /* max-width: 80%; */
/*  display: block;
  max-width: 50%;
*/}

#info {
  grid-column: 3 / 4;
  font-size: 1.5em;
  /*border-left: 3px solid black;*/
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /*background-color: #BBB;*/
}

.button {
  display: block;
  width: 100%;
  padding: 0.3em 0;
  font-family: 'Source Code Pro';
  color: var(--text-color);
  background-color: var(--background-color);
  border: 3px solid var(--text-color);
  font-size: 1.2em;
  margin-top: 0.3em;
  margin-bottom: 1em;
  border-radius: 15px;
}

.button.save-button {
  background-color: #000000;
  color: #d9ef5c;
}

.tile-block {
  background-color: #88888888;
  border-radius: 0.5em;
  margin-bottom: 1em;
  padding: 0.5em;
}

textarea, input[type="text"], input[type="select"] {
  display: block;
  width: 100%;
  height: 4em;
  border-radius: 0.2em;
  padding: 0.3em 0.3em;
  font-family: 'Source Code Pro';
  color: var(--text-color);
  background-color: var(--background-color);
  border: none;
  font-size: 1em;
  margin-top: 0.3em;
  margin-bottom: 1em;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}

.save-button::before {
  content: '↧ ';
}

.redraw-button::before {
  content: '↻ ';
}

/*.format-select-button {
  width: 30%;
  margin-right: 5%;
  display: inline-block;
}
*/
.button.selected {
  background: var(--text-color);
  color: var(--background-color);
}

#poster-wrapper div.button-group {
  padding: 0;
}

.button-group .button {
  float: left;
  width: 33.33%;
}

.button-group .button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.button-group .button:not(:last-child) {
  border-right: none; /* Prevent double borders */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-group:after {
  content: "";
  clear: both;
  display: table;
}

input[type="color"] {
  height: 3em;
  border: none;
  width: 100%;
  background: none;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  margin: 0;
}


.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--text-color);
  outline: none;
  margin-bottom: 1em;
/*  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
*/}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--background-color);
  border: 4px solid var(--text-color);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #000;
  cursor: pointer;
}

.label {
  font-size: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  display: block;
}