:root {
  
    --color_background:#070714;
    --color_background_rgba:7,7,14;

    --color_font: #defdbf;
  
    --font_size_h4: 1em;
    --font_size_h3: 1.2em;
    --font_size_h2: 1.4em;
    --font_size_h1: 2em;

    --color_primary_dark: #3f4a34;
    --color_primary_placeholder: #9bb780;
    --color_primary_light: #bada99;

    --color_secondary_dark:#053951;
    --color_secondary_light:#65afd1;
  

  --color_darkest_grey:#222222;
  --color_darker_grey:#313131;
  --color_grey:#878787;
  --color_lighter_grey:#a5a5a5;

  --color_yellow:#FFFFAE;
  
  --color_green:#aee1ae;
  --color_lighter_green:#defdbf;
  
  /* --color_darker_blue:#005F5F;
  --color_blue: #83a598; */

  --color_blue: #8396a5; 

  --color_darker_red:#5f0000;
  --color_red: #a58383;

}

/* Text SELECTION */
::selection 
{
    color:var(--color_font);
    background: var(--color_primary_dark);
}

::placeholder 
{
    color: var(--color_primary_placeholder); 
    text-transform: uppercase;
}
/* SCROLLBAR */
::-webkit-scrollbar{background-color:var(--color_darker_grey);width:10px;height:10px;}
::-webkit-scrollbar-thumb{background-color:var(--color_darker_grey);}
::-webkit-scrollbar-corner{background-color:var(--color_darker_grey);}
::-webkit-resizer{background-color:var(--color_darker_grey);}

/* FONT */

/* Create own icons https://fonts.google.com/icons?selected=Material+Symbols+Outlined:search:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%231f1f1f */

@font-face 
{
    font-family: 'NS';
    src: url('../font/NotoSans-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face
{
    font-family: 'ICON';
    src: url('../font/MaterialIcons-Regular.ttf') format('truetype');
}

* { 
    margin: 0;
    padding: 0;
    color: var(--color_font);
}

html 
{
    min-height: 100%;    
    height: 100%;
    height: 100dvh;
    min-width: 420px;
}

body 
{
    font-family: 'NS', Verdana, Geneva, Tahoma;
    font-size: var(--font_size_h4);  
    font-weight: normal;
    word-break: normal;
    min-height: 100%;
    height: 100%;
    height: 100dvh;
    width: 100%;
    overflow-x: hidden;
    background: var(--color_background);
    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    display: flex;
    /* top to bottom */
    flex-direction: column;
    /* in one line */
    flex-wrap: nowrap;
    /* Position content, top to down */
    justify-content: flex-start;
    align-content: flex-start;
    /* mittig positionieren */
    align-items: center;
}

img 
{
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    margin: 6px;
}

h1 
{  
    text-align: center;
    font-size: var(--font_size_h1);
    font-weight: 900;
    text-transform: uppercase;
    padding: 0.8rem 0rem 0.4rem 0rem;
}
h2 
{
    text-align: center;
    font-size: var(--font_size_h2); 
    font-weight: 800;
    text-transform: uppercase;
    padding: 1.8rem 0rem 0.4rem 0rem;
}
h3 
{
    text-align: center;
    font-size: var(--font_size_h3); 
    font-weight: 700;
    padding: 1rem 0rem 0.4rem 0rem;
}
h4 
{
    text-align: center;
    font-size: var(--font_size_h4);
    font-weight: 600; 
    padding: 0.8rem 0rem 0.4rem 0rem;
}

.icon 
{
    font-family: 'ICON', Verdana, Geneva, Tahoma;
    font-weight: unset;
    overflow-x: hidden;
}

/* Text */
table, p 
{
    margin: auto;
    align-items:center;
    justify-content:center;
    vertical-align: middle;
    text-align: center;
}

table th 
{
    padding: 0.2rem 0.4rem;
    text-transform: uppercase;
}

table td 
{
    padding: 0.2rem;
}

form 
{
    margin: 0.2em;
    padding: 0em;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    /* width: calc(100%); Boese */
}

input 
{
    /* width: 100%; Boese */
    font-family: inherit;
    margin: 0.4em;
    padding: 0.4em 1.2em 0.4em 1.2em; /* 6px 12px; Boese dann kann width nicht korrekt bestimmt werden */
    background-color: var(--color_primary_dark);
    /* color: var(--color_blue); */
    font-size: var(--font_size_h3);
    border-radius: 1em; 
    border: 0em solid var(--color_primary_light);
    text-align: left;
    font-weight: 700;
    box-shadow: 0 0 0px;
}
label.icon 
{
    font-size: var(--font_size_h1); 
    position: relative;
    left: 0.2em;
    top: 0.24em;
}

textarea:focus,
input:focus {
  color: var(--color_font);
  outline: none !important;
  box-shadow: 0 0 0px;
}

textarea:disabled,
input:disabled,
textarea:read-only,
input:read-only {
  color: var(--color_font);
  border-left: 12px solid var(--color_darker_grey);
  background-color:var(--color_darker_grey);
}

/* BASE */

header {
  width: 100%;
  background-color: var(--color_lighter_grey);
  white-space: nowrap;
  text-align: center;
}

#logo_img {
  margin: 24px 0px 0px 0px;
}

/* MAIN CONTENT */

div#content_container 
{
    margin: auto;
    /* min-height: 100%; */
    /* height: 100dvh; */
    /* height: 100%; */
    width: 100%;
    position: relative;
}

div#content 
{
    /* min-height: 100%; */
    /* height: 100%; */
    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    display: flex;
    /* top to bottom */
    flex-direction: column;
    /* in one line */
    flex-wrap: nowrap;
    /* Position content, top to down */
    justify-content: flex-start;
    align-content: flex-start;
    /* mittig positionieren */
    align-items: center;
    padding-top: 6rem;
}

.frame 
{
    margin: 1rem 2rem;
    padding: 1.2rem;
    box-shadow: 1;
    background-color: rgba(var(--color_background_rgba), 0.8);
    border: 0.1rem solid rgba(255,255,255,0.1);
    border-radius: 2rem;
    /* box-shadow: 10px 5px 5px red; */
}

/* NAVIGATION */

#navbar 
{
    position: fixed;
    top: 1rem;
    /* text-align: center; */
    display: table;  
    display: table-cell;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

div.link_list 
{
    padding: 1.2rem;
    align-items: center;
    text-align: center;
}

div.link_list a:first-child
{
    border-radius: 1em 0em 0em 1em;  
}
div.link_list a:last-child
{
    border-radius: 0em 1em 1em 0em; 
}

a,
a:focus 
{
    margin: 0.2em 0em;
    padding: 0.2em 0.8em 0.2em 0.8em; /* 6px 12px; Boese dann kann width nicht korrekt bestimmt werden */
    color: var(--color_background);
    text-decoration-thickness: none;
    text-decoration-style: none;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--color_primary_light);
    background: var(--color_primary_light);
    border: 0em solid var(--color_primary_dark); 
    text-align: center;
    font-size: var(--font_size_h3);
    font-weight: 500;
}

a.active,
a:hover 
{ 
    outline: none !important;
    box-shadow: 0 0 0px;
    text-decoration: none;
    cursor: pointer;
    /* color: var(--color_font); */
    background-color: var(--color_primary_dark);
    background: var(--color_primary_dark);
}

a:hover span, 
a:hover span.icon 
{
    color: var(--color_font);
}
a span 
{
    color: var(--color_primary_dark);
}
a span.icon 
{
    font-size: var(--font_size_h2); 
    position: relative;
    left: 0.2em;
    top: 0.25em;
    color: var(--color_primary_dark);
}

a.icon 
{
    border-radius: 50%;
    padding: 0.2em;
    margin: 0.2em;
}

button 
{
    font-family: inherit;
    margin: 0.4em;
    padding: 0.4em 1.2em 0.4em 1.2em; /* 6px 12px; Boese dann kann width nicht korrekt bestimmt werden */
    color: var(--color_background);
    text-decoration-thickness: none;
    text-decoration-style: none;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--color_primary_light);
    background: var(--color_primary_light);
    border-radius: 1em; 
    border: 0em solid var(--color_primary_dark); 
    text-align: center;
    font-size: var(--font_size_h2);
    font-weight: 700;
}
button span 
{
    color: var(--color_primary_dark);
}
button:hover 
{
    cursor: pointer;
    /* color: var(--color_font); */
    background-color: var(--color_primary_dark);
    background: var(--color_primary_dark);
}
button:hover span 
{
    color: var(--color_primary_light);
}

div#navigation_east,
div#navigation_west 
{
    position: fixed;
    top: 24px;
    display: flex;
    gap: 6px;
    padding: 6px;
    background-color: transparent;
}

div#navigation_nord 
{
    gap: 6px;
    padding: 12px 0px 4px 0px;
    background-color: transparent;
}

div#navigation_east 
{
    position: absolute;
    right: -6px;
    flex-direction: column;
}
div#navigation_west 
{
    position: absolute;
    left: -6px;
    flex-direction: column;
}

div#navigation_east a {
  border-right: 12px solid var(--color_font);
  padding-right: 24px;
}
div#navigation_west a {
  border-left: 12px solid var(--color_font);
  padding-left: 24px;
}
div#navigation_nord a {
  margin: 0px 2px;
  border-top: 6px solid var(--color_font);
  padding-left: 24px;
}

/* MESSAGE */

div#base_message {
    margin: 24px;
    padding: 12px;
    font-size: var(--font_size_m1);
    visibility: hidden;
    z-index: 100;
    position: fixed;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color_primary_dark);
    border: 0px solid var(--color_primary_dark);
    border-radius: 1em;
}

div#base_message.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

footer {
    text-transform: none;
}

footer div 
{
    justify-content: center;
    align-items: center;
    text-align: center;
}

footer div span
{
    color: var(--color_primary_dark);
}

.clipboard 
{
    /* font-weight: bold */
    cursor: pointer;
}