@charset "utf-8";
/* CSS Document */

:root {
  --col_highlight: #98c03f;
  --col_highlight_bright: #aad64c;
  --col_highlight_dark: #83aa2f;
  --col_background: #f2f2f2;
  --col_text: #45433e;

  --radius_s: 0.7rem;

  --font_serif: "Baloo 2";
  --font_sans: "Kanit";
  --light: 100;
  --regular: 400;
  --bold: 700;

  --border-style: solid;
  --max-width: min(100vw, 1440px);

  --shadow: 0 0 20px -10px rgba(0,0,0,0.8);
}

/***************************************************************************
                             NORMALIZE                                             
****************************************************************************/
*,:after,:before {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;
  font-weight: inherit;
}

a,h1,h2,h3,h4,h5,strong,b {
  font-weight: var(--bold);
}

h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.4rem;
}
h3,h4,h5 {
  font-size: 1rem;
}

/***************************************************************************
                             HTML,BODY                                               
****************************************************************************/
html {
  overflow-y: scroll;
  font-weight: var(--regular);
}

html,
body {
  width: 100vW;
  min-height: 100vH;
  position: relative;
  padding: 0;
  margin: 0;
}

body {
  overflow: visible;
  min-width: 280px;
}

/***************************************************************************
                             FONTS & COLORS                                         
****************************************************************************/
html {
  background: var(--col_background);
  color: var(--col_text);
  font-size: 15px;
  line-height: 1.75em;
  font-weight: 300;
}


html,body,textarea,input,select {
  font-family: var(--font_sans), Arial, Helvetica, sans-serif;
  color: var(--col_text);
}

::selection {
  background: rgba(255, 210, 220, 0.7);
}
::-moz-selection {
  background: rgba(255, 210, 220, 0.7);
}

a {
  color: var(--col_highlight);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border: 0px none;
  font-weight: 500;
}

a:focus {
  border: 0px none;
}

@media screen and (min-width: 600px)  { html {font-size: 16px;}}
@media screen and (min-width: 800px)  { html {font-size: 17px;}}
@media screen and (min-width: 1000px) { html {font-size: 18px;}}
@media screen and (min-width: 1200px) { html {font-size: 19px;}}
@media screen and (min-width: 1400px) { html {font-size: 20px;}}
@media screen and (min-width: 1600px) { html {font-size: 21px;}}
@media screen and (min-width: 1800px) { html {font-size: 22px;}}
@media screen and (min-width: 2000px) { html {font-size: 23px;}}

/***************************************************************************
                             LOGO                                 
****************************************************************************/
.spanner {flex-grow: 1;}

#header {
  background-color: var(--col_highlight);
  height: auto;
  position: fixed;
  width: 100vW;
  z-index: 10;
  color: var(--col_background);
  border-bottom: 1px solid var(--col_highlight_dark);
}

#navline {
  background-color: var(--col_background);
  box-shadow: var(--shadow);  
}
#infos {
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  display: flex;
  max-width: var(--max-width);
  height: 1.8rem;
  font-size: 0.7rem;
}
#infos > *{ 
  margin-left: 1rem; 
  transition: all 0.5s; 
  min-width: 1.3rem; 
  height: 1.3rem; 
  line-height: 1.3rem; 
  display: block; 
  text-align: center;
  color: var(--col_background); 
  box-sizing: border-box;
}
#infos > *:first-child{ margin-left: 0}

#infos a{
  color:  var(--col_background); padding: 0 0.3rem; 
  margin-left: 0.7rem;
  border-radius: 1rem;
}
#infos a:hover{ 
  background-color: var(--col_background); 
  color: var(--col_highlight); 
  
}


#nav {
  display: flex;
  margin: 0 auto;
  max-width: var(--max-width);
  padding: 0;
  list-style: none;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
}
#nav a { 
  color: var(--col_text); 
  height: 3rem; 
  display: flex; 
  align-items: center; 
  position: relative;
  transition: all 1s;
}
#logo a { 
  color: var(--col_highlight);
}
#nav a:after{
  content: "";
  position: absolute;
  left: 50%; 
  transform: translateX(-50%) scaleX(0); 
  bottom:0; 
  height: 4px; 
  width:max(100%, 6rem);
  background-color: var(--col_highlight_bright);
  transition: all 0.7s;
}

#nav .active a:after{
  transform: translateX(-50%); 
  background-color: var(--col_highlight_dark);
}

#nav li:hover a:after{
  transform: translateX(-50%); 
}

#main{padding-top: 4.8rem;}


#hero{
  width: 100vW; 
  height: calc(100vH - 15rem);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-direction: column; 
  position: relative;
  background: url(/bgbild_m.jpg);
}
#hero h1{ 
  z-index: 1; 
  font-weight: var(--bold);
  font-size: min(12vW, 150px);
  color: var(--col_background);
  text-shadow: 0px 0px 6px var(--col_highlight), 0px 0px 12px var(--col_highlight);
  letter-spacing: 0.4vW;
  height: 1em;
  line-height: 1em;
}
#hero h3{ 
  z-index: 1; 
  font-weight: var(--regular);
  font-size: min(2.5vW, 32.5px);
  color: var(--col_background);
  text-shadow: 0px 0px 6px var(--col_highlight), 0px 0px 12px var(--col_highlight);
  letter-spacing: 0;
}




#pixels{ 
  width: 100vW; 
  height: calc(100vH - 15rem);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-direction: column; 
  position: relative;
}
#pixelback{
  width: 100vW; 
  height: 100%;;
  background-color: var(--col_highlight);
  overflow: hidden;
  position: absolute; 
  display: block;
}
#pixels h1{ 
  z-index: 1; 
  font-weight: var(--bold);
  font-size: min(12vW, 150px);
  color: var(--col_background);
  text-shadow: 0px 0px 6px var(--col_highlight), 0px 0px 12px var(--col_highlight);
  letter-spacing: 0.4vW;
  height: 1em;
  line-height: 1em;
}
#pixels h3{ 
  z-index: 1; 
  font-weight: var(--regular);
  font-size: min(2.5vW, 32.5px);
  color: var(--col_background);
  text-shadow: 0px 0px 6px var(--col_highlight), 0px 0px 12px var(--col_highlight);
  letter-spacing: 0;
}

#pixelssvg{
  position: absolute; 
  display: block;
}


.page {max-width: var(--max-width); margin: 0 auto; min-height: 80vH;;}