@import url('https://css.webgestalter.in/fontawesome.css');
@import url('https://css.webgestalter.in/solid.css');
/* @import url('fontawesome.css');
@import url('solid.css'); */

/* RESET */
* { border: none; box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; }
button { cursor: pointer; }
img { max-width: 100%; }
.hidden { display: none!important; }

/* */

html {
  --gap-tiny:   5px;
  --gap-small: 10px;
  --gap:       10px;
  --gap-large: 10px;
  --gap-huge:  10px;

  @media only screen and ( min-width: 1720px ) {
    --gap-tiny:   5px;
    --gap-small: 10px;
    --gap:       20px;
    --gap-large: 40px;
    --gap-huge:  80px;
  }

  --bgpattern1: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAACRJREFUGFdjDA0NNV69evVZBiTACGKjS4AF0SXggsgSKIIwCQDoIRE4lu9TMgAAAABJRU5ErkJggg==");
  --bgpattern2: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAAChJREFUGFdjZEADoaGhxozIYiCB1atXn4ULwgRAisCCyAJgQXQBkCAA/HoROHME7qAAAAAASUVORK5CYII=");
}
html[data-stylemode="dark"] {
  --color1:  #202020;
  --color1B: #151515;
  --color1C: #050505;
  --color2:  #D0D0D0;
}
html[data-stylemode="light"] {
  --color1:  #D0D0D0;
  --color1B: #E5E5E5;
  --color1C: #F5F5F5;
  --color2:  #202020;
}
html {
  --bg1: var(--color1)  var(--bgpattern1);
  --bg2: var(--color1B) var(--bgpattern2);
}

body {
  background-color: var(--color1);
  background-image: var(--bgpattern1);
             color: var(--color2);

  font-family: "Open Sans";
}