:root {
 --backgroundColor: #333333;
 --buttonColor: #576505; /* used for long, but too bright: #9eb508; !* olive *!*/
 --buttonFontSize: 14px;
 --buttonHeight: 50px;
 --mainEditorTextareaHeight: 240px; /* 8 cm is good for 4 button rows. 240px is good for 5 button rows.*/
 --editorFontSize: 20px; /* 18px is too small to edit on my phone */
 --mainColor: #ffffff;
 --menuItemHeight: 44px;
 --pausedBackgroundColor: #660000;
 --textareaColor: #adc70811;
 /*--backgroundColor: #472c00; brown*/
 /*--mainColor: #00b2ff; !*blue*!*/
 /*--mainColor: #0f0;    !*green*!*/
 /*--mainColor: #f72e00;   !*amber*!*/
 /*--mainColor: #ff0000; !*red*!*/
 /*--mainColor: #ff886d; !*salmon*!*/
}

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

.hidden {
 display: none
}

select, option, input:focus, textarea:focus {
 border: 1px solid var(--mainColor);
 color: var(--mainColor);
 outline: none;
}

select, option {
 background-color: var(--backgroundColor);
 color: var(--mainColor);
}

input::selection, textarea::selection {
 background-color: var(--mainColor);
 color: black;
}

input::placeholder, textarea::placeholder {
 color: var(--mainColor);
 filter: brightness(70%);
}

body,html {
 background-color: var(--backgroundColor);
 color: var(--mainColor);
 font-family: 'Arial', sans-serif;
 /*height: 100%;*/
 margin: auto;
 max-width: 20cm;
 overscroll-behavior: none;
 padding: 0;
 width: 100%;
}

body {
 overflow: hidden;
}

div {
 margin: 0;
 padding: 0;
}

h1, h2, h3, h4, h5, h6 {
 display: inline-block;
 margin-bottom: 0;
 margin-top: .1cm;
}

a {
 color: var(--mainColor);
}

.flexClass {
 display: flex;
 /*flex-direction: row;*/
 justify-content: flex-end;
}

.fullWidthRow > * {
 flex: 1;
}

/*.spinnerGroup {*/
/* display: flex;*/
/*}*/

div {
 border-collapse: collapse;
}

label {
 font-size: var(--buttonFontSize)
}

button, input, textarea {
 background-color: var(--backgroundColor);
 border-collapse: collapse;
 border-radius: 0;
 border: 1px solid var(--mainColor);
 color: var(--mainColor);
 cursor: pointer;
 margin: 0;
 padding: 2px;
}

button {
 background-color: var(--buttonColor);
 height: var(--buttonHeight);
 margin: 0;
 min-width:var(--buttonHeight);
 padding: 0 10px;
 /*overflow: hidden;*/
 /*touch-action: none; !* Intention: How do ignore tap and hold on buttons? e.g.*/
 /* no scrolling of the page should be possible if the tap starts on a button*!*/
}

input, textarea {
 background-color: var(--textareaColor);
 font-family: 'Arial', sans-serif;
 font-size: var(--editorFontSize);
}

/*button:hover, button:focus {*/
/* transform: scale(1.05);*/
/*}*/

/*.spinner {*/
/* animation: spin 1s ease infinite;*/
/* border-left-color: #09f;*/
/* border-radius: 50%;*/
/* border: 2px solid var(--mainColor);*/
/* height: 15px;*/
/* width: 15px;*/
/*}*/

/*@keyframes spin {*/
/* 0% { transform: rotate(0deg); }*/
/* 100% { transform: rotate(360deg); }*/
/*}*/

/* Forces the main color on things, e.g. emojis.
This used to be called greenFilter.*/
.forceMainColor {
 /*red: filter: grayscale(100%) sepia(1) hue-rotate(355deg) brightness(1) saturate(10);*/
 /*blue: filter: grayscale(100%) sepia(1) hue-rotate(150deg) brightness(0.5) saturate(10);*/
/*filter: grayscale(100%) sepia(1) hue-rotate(90deg) brightness(0.5) saturate(10); !*green*!*/
 filter: grayscale(100%) sepia(0) ; /* white/gray for #9eb508; olive background */
}

.textarea {
 box-sizing: border-box;
 height: 10cm;
 resize: vertical;
 width: 100%;
 outline: none;
}

@keyframes blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0; }
}

.blinkingFast {
 animation: blink 1s linear infinite;
}

.blinkingSlow {
 animation: blink 4s linear infinite;
}

/* Phones only aka small screens */
@media only screen and (max-width: 600px) {
 body, html {
  margin: 0;
 }
 .textareaContainer {
  width: 100%
 }
 #mainEditorTextarea {
  height: var(--mainEditorTextareaHeight);
 }
 .hideOnPhone {
  display: none;
 }
}

/* Desktop only */
@media only screen and (min-width: 600px) {
 .buttonLikeBox {
  max-width: 100px;
  width: 100px;
 }
}

.item, .heading {
 align-items: center;
 background-color: var(--backgroundColor);
 border: 1px solid var(--textareaColor);
 font-size: var(--buttonFontSize);
 justify-content: left;
 min-height: var(--menuItemHeight);
 user-select: none;
}

.buttonMenuItem {
 padding-left: 0
}

.buttonLikeBox {
 align-items: center;
 background-color: var(--buttonColor);
 border: 1px solid var(--mainColor);
 height: var(--buttonHeight);
 justify-content: center;
 margin: 0;
 min-width:var(--buttonHeight);
 padding: 0 10px;
 text-align: center;
}
.buttonWidthAndPadding {
 min-width:80px; /* This is optimized for my phone. I tried to make it flexible and look good, but it took to much time. */
 padding: 0 0;
}

.buttonInMenu {
 background-color: blue;
}

.buttonColors {
 background-color: var(--buttonColor);
}

.item:hover {
 cursor: default;
}

.heading {
 height: var(--buttonHeight);
}

.centerContent {
 align-items: center;
 display: flex;
 justify-content: center;
}

button:hover, button:active {
 box-shadow: none;
}

.all {
 border-color: #829606;
 border-radius: 2px;
 border-style: solid;
 border-width: 0;
 box-shadow: 0 -2px 0 rgba(0,0,0,0.6) inset !important;
 margin: 2px 2px;
 padding-bottom: 0.75em;
 padding-top: 0.8125em;
 text-decoration: none;
 transition: background-color 300ms ease-out;
}