/* Basic.css  */

* {box-sizing: border-box}
:root{
--sans:1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
--mono:'Courier New', Courier, 'Ubuntu Mono', 'Liberation Mono', monospace;
--c1:#0074d9;
--c-button:#0074d9;
--c2:#eee;
--c3:#fff;
--c4:#000;
--c5:#fff;
--m1: 8px;
--rc: 8px;
}

@media (prefers-color-scheme: dark) {
 :root {
  --c1:#87c2f6;
  --c-button:#0074d9;
  --c2:#333;
  --c3:#1e1f20;
  --c4:#fff;
 }
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;

}

/* General settings */

body {
  margin: 0;
  font: var(--sans);
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: var(--c3);
  color: var(--c4);
}
img, iframe {border: none; max-width: 100%}

a {color: var(--c1);  text-decoration:none}

a:hover {color: var(--c1); text-decoration: underline}

pre {font: 1em/1.6 var(--mono); background: var(--c2); padding: 1em; overflow: auto}

code {font: 1em/1.6 var(--mono);}

blockquote {border-left: 5px solid var(--c2); padding: 1em 1.5em; margin: 0}

hr {border:0; border-bottom: 1px solid var(--c4)}

 /* Headlines */

h1,h2,h3,h4,h5,h6 {margin: 0.6em 0; font-weight: normal}

h1 {font-size: 2.625em; line-height: 1.2}

h2 {font-size: 1.625em; line-height: 1.2}

h3 {font-size: 1.3125em; line-height: 1.24}

h4 {font-size: 1.1875em; line-height: 1.23}

h5,h6 {font-size: 1em; font-weight:bold}

/* Table */

table {border-collapse: collapse; border-spacing: 0; margin:1em 0}

th, td {text-align: left; vertical-align: top;border: 1px solid; padding: 0.4em}

thead,tfoot{background: var(--c2)}

/* Rounded Corners*/

a.button, a.button:hover, a.button:visited, a.button:focus, a.button:active  {
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  color: var(--c5);
}

pre,code,input,select,textarea,.button,button,img {border-radius: var(--rc)}


/* Forms */

input,select,textarea{font-size: 1em; color:var(--c4); background: var(--c2); border: 0; padding: 0.6em}

.button, button, input[type=submit], input[type=reset] {font-size: 1em; display: inline-block; color: var(--c5); background: var(--c-button);  border: 0; margin: 0 4px;  padding: 0.6em; cursor: pointer; text-align: center}

.button:hover,.button:focus,button:hover,button:focus,input:hover,textarea:hover,select:hover {opacity: 0.8}

/** END BASIC.CSS **/

/** Overrides */

:root {
 --sans: Georgia, "Times New Roman", Times, serif;
}

@media (prefers-color-scheme: dark) {
 :root { --c1:#87c2f6; --c2:#333; --c4:#eee; }
}

.light {
  --c1:#0074d9;
  --c2:#ddd;
  --c3:#eee;
  --c4:#333;
}

.dark {
  --c1:#87c2f6;
  --c2:#333;
  --c3:#1e1f20;
  --c4:#eee;
}

input, select, textarea {
  font-size: inherit;
}

.button, button, input[type=submit], input[type=reset] {
  margin-top: 4px;
}

/* Cards */

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cards > * {
  background: var(--c2);
  border-radius: var(--rc);
  padding: 1em;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
  flex: 0 1 calc(25% - var(--m1));
  margin-top: var(--m1);
}

/**
Custom
*/

body {
 padding-bottom: 50%;
}

header, main,footer {
  margin: 0 auto;
  width: 60%;
  text-align: left;
  padding: 1em;
}

aside {
  color: #fff;
  background-color: var(--c1);
  padding: 15px;
  margin: 10px 8px 10px 8px;
  text-align: center;
}

@media (max-width: 481px) {
  main,footer {width: 98%}
  .cards>div,aside,article {flex:none; width:100%; margin-left: 0;}
  header { padding: 1em; width: 100%; }
}

.highlight { background-color: coral; }

.cursor-pointer {
 cursor: pointer;
}

/** Error Snack Bar **/

:root {
  --snack-bar-duration: 2;
}
#error-message {
 min-width: 250px;
 margin-left: -125px;
 position: fixed;
 left: 50%;
 bottom: 0.5em;
 z-index: 1;
}
#error-message p {
  background-color: grey;
  color: #eee;
  padding: 1em;
  margin: 0;
  border-radius: 0.5em;
  margin-top: 0.125em;
}

.inline {
    display: inline-block;
}

a.external {
    background-image: url(/images/external-link.svg);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 20px;
}

.reverse {
    display: flex;
    flex-direction: row-reverse;
}

[draggable] {
    cursor: move;
}