:root {
    --main-color: var(--c-dark-blue, #e9c46a);
    --main-bg-color: var(--c-light-brown, #264653);
    --section-bg-color: var(--c-white, #2a9d8f);
    --accent-color: var(--c-green, #f4a261);
    --accent-dark-color: var(--c-dark-brown, #e76f51);
    --accent-color-pop: var(--c-light-violett, #d34e8a);
}

html, body { font-size: 18px; background-color: var(--main-bg-color); color: var(--main-color); }
nav, section, footer { margin: 0.3rem; margin-bottom: 0.6rem; border-radius: 1rem; max-width: 1000px; padding: 1rem; }
nav { display: flex; flex-flow: row wrap; color: var(--section-bg-color); }
nav a { border-radius: 1em; }
nav a:hover { background: var(--accent-color); }
section { background-color: var(--section-bg-color); }
footer { color: var(--section-bg-color); }

a, #main #aufgaben li { color: var(--accent-color); transition: background-color 150ms ease-out 100ms; }
a:hover, #main #aufgaben li:hover { background: var(--accent-dark-color); }

.hidden { display: none; }

/*textarea { min-width: 80vw; min-height: 25vh;}*/
code, inline-code { white-space: pre-wrap; font-family: monospace; }
inline-code { color: var(--accent-color-pop); }

#main #aufgaben li { cursor: pointer; padding: 1rem; text-decoration: underline; color: var(--accent-color); }
#main #aufgaben li:hover { background-color: var(--accent-dark-color); }

#aufgabe h2 span { font-size: 1em; }
#aufgabe h2 img { cursor: pointer; border-radius: 0.5em; margin-right: 0.3em; height: 1em; width: 1em;
    transition: background-color 150ms ease-out 100ms; }
#aufgabe h2 img:hover { background: var(--accent-color); }

#sorting { position: relative; }
#sorting .draggable_line { display: flex; flex-flow: row nowrap; }
.drag_mover { cursor: move; display: inline; font-size: 16px; margin: 2px; margin-right: 1em; border: 2px solid var(--accent-dark-color); min-height: 24px; max-height: 32px; background: var(--accent-color); padding: calc(4*2px); font-weight: 600;
    transition: background-color 25ms ease-out 10ms; }
.drag_mover:hover { background: var(--main-bg-color); }
.drag_over { outline: 2px dotted var(--accent-dark-color); }
.drag_start_element { opacity: 0.4; }
.drag_shadow { position: absolute; left: 2rem;background: rgba(0,0,0, 0.3); }
.drag_shadow code { min-width: 60vw; min-height: 1em; }

.glow-button { border-radius: 4px; font-weight: bold; background: var(--accent-color);
  color: rgba(255, 255, 255, 0.8); text-decoration: none; padding: 15px 40px;
  text-transform: uppercase; transition: all 0.2s ease-in-out; }
.glow-button:hover { color: rgba(255, 255, 255, 1); box-shadow: 0 5px 15px var(--accent-color-pop); }

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  margin: 15% auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  padding: 20px;
  background-color: #fefefe;
}

/* The Close Button */
.close { float: right; color: #aaa; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }


@media (min-width: 512px) {
    nav, section, footer { margin: 2rem auto; }
}