:root
{
  /*Color*/
  --dark: #393939;
  --medium: #606060;
  --accent: #f2f2f2;
  --light: #FFF;
  --theme: #E03535;
  --averagecolor: var(--medium);

  /*NavbarTheme (Default)*/
  --navColor_0: #FFF; /* Navigation icon Backdrop */
  --navColor_1: #393939; /* Navigation icon Front */
  --navColor_2: #FFF; /* Navigation butn Backdrop */
  --navColor_3: #393939; /* Navigation butn Front */

  /*Feature*/
  --animationFast: 0.25s;
  --animationMedium: 0.5s;
  --animationSlow: 1s;
  --animationStyle: cubic-bezier(0.5, 0, 0, 1);
  --blur: 100px;
  --blurHeavy: blur(100px) brightness(0.9) contrast(0.9);
  --blurSoft: blur(20px) brightness(0.9) contrast(0.9);
  --perspective: 30cm;

  /*Scale*/
  --headerHeight: 48px;
  --headerBottom: calc(var(--headerHeight) + 1em);
  --radius: 0.85em; /*orignally 3px*/

  /*Margins*/
  --margin_ExtraLarge: 250px;
  --margin_Large: 200px;
  --margin_MediumLarge: 160px;
  --margin_Medium: 60px;
  --margin_Small: 20px;
  --margin_ExtraSmall: 5px;
  --margin_p: 16px;

  /*Font size*/
  --fontSize_H1: 50px;

  /*Shaddows      Thank you Sara Cope - https://css-tricks.com/almanac/properties/b/box-shadow/  //  And https://shadows.brumm.af/ */
  --shadow:       0px 2.8px 2.2px rgba(0, 0, 0, 0.02),
                  0px 6.7px 5.3px rgba(0, 0, 0, 0.028),
                  0px 12.5px 10px rgba(0, 0, 0, 0.035),
                  0px 22.3px 17.9px rgba(0, 0, 0, 0.042),
                  0px 41.8px 33.4px rgba(0, 0, 0, 0.05),
                  0px 100px 80px rgba(0, 0, 0, 0.07);
  --shadowClose:  0px 0.7px 0.6px rgba(0, 0, 0, 0.02),
                  0px 1.7px 1.3px rgba(0, 0, 0, 0.028),
                  0px 3.1px 2.5px rgba(0, 0, 0, 0.035),
                  0px 5.6px 4.5px rgba(0, 0, 0, 0.042),
                  0px 10.4px 8.4px rgba(0, 0, 0, 0.05),
                  0px 25px 20px rgba(0, 0, 0, 0.07);
  --shadowInner:  inset 0 1px 2px rgba(0, 0, 0, 0.15);


  /* For better compatibility */
  --ClientHeight_Initial: 100vh;
  --ClientHeight: 100vh;
  --ClientWidth_Initial: 100vh;
  --ClientWidth: 100vw;
}

.resizing *
{
  transition: all 0s !important;
}


.compact {
   --margin_ExtraLarge: 200px;
   --margin_Large: 120px;
   --margin_MediumLarge: 100px;
   --margin_Medium: 60px;
   --margin_Small: 20px;
   --margin_ExtraSmall: 2px;
   --margin_p: 10px;
   --fontSize_H1: 28pt;
}

.a,.b
{
  fill:none;stroke: var(--dark);stroke-linecap:round;stroke-width:3px;
}
.a
{
  stroke-linejoin:round;
}
.c
{
  fill: var(--dark);
}

::-moz-selection {
  background: var(--theme);
  color: var(--light);
}

::selection {
  background: var(--theme);
  color: var(--light);
}

[controls]
{
  pointer-events: all;
}

body
{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  font-family: "Poppins", "Nunito Sans", sans-serif;
  background-color: var(--light);
  margin: 0;
}

main
{
  height: auto;
  display: block;
  overflow-x: hidden;
}

footer
{
  padding: 1em;
  background: var(--accent);
  display: grid;
  grid-gap: 4px;
}

footer div
{
  display: grid;
  grid-gap: 30px;
  width: fit-content;
  margin: auto;
}

footer p
{
  margin-top: 0;
  text-align: center;
  color: var(--medium);
  font-size: 11pt;
}

footer
{
  bottom: 0;
  width: -webkit-fill-available;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  z-index: 3;
}

footer a:hover *
{
  color: var(--theme);
  stroke: var(--theme);
}

footer a:hover .c
{
  fill: var(--theme);
  stroke: none !important;
}

footer div
{
  grid-template-columns: unset;
  margin: unset;
}

footer svg
{
  height: 1.25em;
  width: 1em;
  margin-right: 0.5em;
}

footer svg > *
{
  stroke-width: 2px !important;
}

footer a
{
  display: inline-flex;
  align-items: center;
}

footer span
{
  margin-top: 0;
  text-align: center;
  color: var(--medium);
  font-size: 11pt;
}

@media screen and (max-width: 800px) {
  footer div
  {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: unset;
  }
}

ul
{
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  margin-block-start: 0;
  margin-block-end: 0;
}

li
{
  list-style-type: none;
}

a:-webkit-any-link {
  color: var(--theme);
}

a:link {
  color: var(--theme);
}

img, video, embed, image
{
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
  pointer-events: none;
  box-sizing: border-box;
  object-fit: cover;
}

/* Navigationbar */

header
{
  z-index: 50;
  height: var(--headerHeight);
  position: fixed;
  top:1em;
  left: 1em;
  right: 1em;
  display: grid;
  grid-template-columns: var(--headerHeight) auto;
  pointer-events: none;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

/*GENEREL*/

h1
{
  color: var(--theme);
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size: var(--fontSize_H1);
  line-height: var(--fontSize_H1);
  text-transform: uppercase;
  margin: 0;
  hyphens: auto;
  margin-top: var(--margin_Large);
}

h2
{
  color: var(--medium);
  width: 100%;
  font-weight: bold;
  font-size: 16pt;
  text-transform: uppercase;
  margin: 0;
  hyphens: auto;
  margin-top: var(--margin_Medium);
}

h3
{
  color: var(--dark);
  width: 100%;
  font-weight: bold;
  font-size: 14pt;
  margin: 0;
  hyphens: auto;
  margin-top: var(--margin_Small);
}

h4
{
  width: 100%;
  font-weight: 300;
  font-size: 12pt;
  margin: 0;
  hyphens: auto;
  margin-top: var(--margin_ExtraSmall);
}

a
{
  display: block;
  font-size: 12pt;
  margin-top: var(--margin_ExtraSmall);
}

p
{
  color: var(--medium);
  width: 100%;
  font-weight: normal;
  font-size: 12pt;
  margin: 0;
  hyphens: auto;
  margin-top: var(--margin_p);
}

text
{
  color: var(--dark);
  width: 100%;
  font-weight: normal;
  font-size: 12pt;
  margin: 0;
  hyphens: auto;
}

#Logo
{
  display: grid;
  grid-column: span 2;
  position: absolute;
  width: var(--headerHeight);
  height: var(--headerHeight);
  border-radius: var(--radius);
  overflow: hidden;
  pointer-events: all;
}

.compact #Logo
{
  width: 100%;
  grid-column: 1 / span 2;
}

#Logo a
{
  position: absolute;
  top: 0px;
  width: var(--headerHeight);
  height: var(--headerHeight);
  margin-top: 0;
}

#Logo svg
{

  display: block;
  margin: auto;
  width: 32px;
  overflow: visible;
  position: relative;
  top: 50%;
  left: 0.5px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#Logo path
{
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke: var(--navColor_1);

  transition: stroke var(--animationFast) ease-in-out;
  -webkit-transition: stroke var(--animationFast) ease-in-out;
  -moz-transition: stroke var(--animationFast) ease-in-out;
  -o-transition: stroke var(--animationFast) ease-in-out;
  -ms-transition: stroke var(--animationFast) ease-in-out;
}

#Logo div
{
  display: block;
  position: relative;
  width: auto;
  height: var(--headerHeight);
  background-color: var(--navColor_0);
  border-radius: var(--radius);

  transition: background-color var(--animationFast) ease-in-out;
  -webkit-transition: background-color var(--animationFast) ease-in-out;
  -moz-transition: background-color var(--animationFast) ease-in-out;
  -o-transition: background-color var(--animationFast) ease-in-out;
  -ms-transition: background-color var(--animationFast) ease-in-out;
}

#Navbar
{
  grid-column: 2;
  display: flex;
  position: absolute;
  right: 0;
  height: var(--headerHeight);
  border-radius: var(--radius);
  overflow: scroll;
  background-color: var(--navColor_2);
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  pointer-events: all;

  transition: background-color var(--animationFast) ease-in-out;
  -webkit-transition: background-color var(--animationFast) ease-in-out;
  -moz-transition: background-color var(--animationFast) ease-in-out;
  -o-transition: background-color var(--animationFast) ease-in-out;
  -ms-transition: background-color var(--animationFast) ease-in-out;
}
#Navbar::-webkit-scrollbar {
  display: none;
}

#Navbar a
{
  font-weight: normal;
  margin: auto 20px;
  line-height: var(--headerHeight);
  color: var(--navColor_3);

  transition: color var(--animationFast) ease-in-out;
  -webkit-transition: color var(--animationFast) ease-in-out;
  -moz-transition: color var(--animationFast) ease-in-out;
  -o-transition: color var(--animationFast) ease-in-out;
  -ms-transition: color var(--animationFast) ease-in-out;
}
.compact #Navbar a
{
  margin:  auto 15px;
}

#Navbar rect
{
  opacity: 0.75;
  border-radius: 1px;
  height: 2px;
  margin: auto 15px;
  display: inline-grid;
  position: relative;
  top: -10px;
  background-color: var(--navColor_3);

  transition: background-color var(--animationFast) ease-in-out;
  -webkit-transition: background-color var(--animationFast) ease-in-out;
  -moz-transition: background-color var(--animationFast) ease-in-out;
  -o-transition: background-color var(--animationFast) ease-in-out;
  -ms-transition: background-color var(--animationFast) ease-in-out;
}

#Navbar li
{
  display: grid;
  max-width: calc(100vw - (2em + var(--headerHeight)));
  grid-template-columns: auto auto auto;
  width: match-content;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

#Navbar::-webkit-scrollbar {
  display: none;
}

.compact #Navbar
{
   background-color: unset;
}

.compact #Navbar rect
{
  margin:  auto 10px;
}

.off
{
  opacity: 0.66;
}


.fadeDown
{
  animation: FadeinDown var(--animationSlow) var(--animationStyle);
}

.fadeDown2
{
  animation: FadeinDown2 var(--animationSlow) var(--animationStyle);
}

.fadeUp
{
  animation: FadeinUp var(--animationSlow) var(--animationStyle);
}

.fadeUp2
{
  animation: FadeinUp2 var(--animationSlow) var(--animationStyle);
}

#scrollArrow
{
  animation: Bounce var(--animationSlow) ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes Bounce {
  0%
  {
    transform: translateY(0px);
  }
  50%
  {
    transform: translateY(8px);
  }
  100%
  {
    transform: translateY(0px);
  }
}

@keyframes FadeinDown {
  0%
  {
    opacity: 0;
    transform: translateY(50px);
  }
  100%
  {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes FadeinDown2 {
  0%
  {
    opacity: 0;
    transform: translateY(100px);
  }
  /* 25%
  {
    opacity: 0;
    transform: translateY(30px);
  } */
  100%
  {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes FadeinUp {
  0%
  {
    opacity: 0;
    transform: translateY(-50px);
  }
  100%
  {
    opacity: 1;
    transform: translateY(-0px);
  }
}

@keyframes FadeinUp2 {
  0%
  {
    opacity: 0;
    transform: translateY(-100px);
  }
  /* 25%
  {
    opacity: 0;
    transform: translateY(-30px);
  } */
  100%
  {
    opacity: 1;
    transform: translateY(-0px);
  }
}

@media screen and (max-width: 500px) {
  :root
  {
    --headerBottom: calc(var(--headerHeight) + 0.5em);
  }
  header
  {
    top: 0.5em;
  }

  #Logo
  {
    width: 32px;
  }
}

.button
{
   background: var(--theme);
}

.button,
.button2
{
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
  display: flex;
  width: max-content;
  border-radius: var(--radius);
  transition: all var(--animationFast) ease-in-out;
  -webkit-transition: all var(--animationFast) ease-in-out;
  -moz-transition: all var(--animationFast) ease-in-out;
  -o-transition: all var(--animationFast) ease-in-out;
  -ms-transition: all var(--animationFast) ease-in-out;
  cursor: pointer;
  box-shadow: var(--shadowClose);
}

.button:hover,
.button2:hover,
.button:focus,
.button2:focus
{
  transform: scale(1.05);
}

.button p,
.button2 p
{
  width: fit-content;
  font-weight: normal;
  margin-top: 0;
}

.button p
{
   color: var(--light);
   padding: 10px 20px;
}

.button2 p
{
   color: var(--theme);
   padding: 8px 16px;
   border: 2px solid var(--theme);
   border-radius: var( --radius);
}

.button img,
.button2 img
{
  width: 12pt;
  height: 12pt;
  margin: auto;
  margin-right: 20px;
  object-fit: contain;
}

a:link
{
  text-decoration: none;
}

input
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  font-family: 'Nunito', sans-serif;
  padding: 0;
  margin: 0;
  border: 0;
  display: block;
  outline: none;
}

textarea
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  color: var(--dark);
  font-family: 'Nunito', sans-serif;
  padding: 0;
  margin: 0;
  border: 0;
  display: block;
  resize: none;
  outline: none;
}

.sliderSVG
{
  background: #00000001;
  cursor: pointer;
  display: grid;
}

.sliderSVG path
{
  d: path("M8,2A6,6,0,1,1,2,8,6,6,0,0,1,8,2M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Z");
  transition: all var(--animationFast) var(--animationStyle);
  -webkit-transition: all var(--animationFast) var(--animationStyle);
  -moz-transition: all var(--animationFast) var(--animationStyle);
  -o-transition: all var(--animationFast) var(--animationStyle);
  -ms-transition: all var(--animationFast) var(--animationStyle);
  transition: all var(--animationFast) var(--animationStyle);
}

.sliderSVG:hover path
{
  d: path("M8,3A5,5,0,1,1,3,8,5,5,0,0,1,8,3M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Z");
}

.sliderSVG.on path
{
  d: path("M8,8A0,0,0,1,1,8,8,0,0,0,0,1,8,8M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Z");
}

.playPause
{
  z-index: 1;
  background: #00000001;
  cursor: pointer;
  display: block;
  grid-row: 1;
  overflow: visible;
  transform: translateX(10%); /* For vissual ballance */
}

.playPause polygon
{
  stroke-linejoin: round;
  stroke-width: 12px;
  fill: var(--light);
  stroke: var(--light);
  transition: all var(--animationMedium) var(--animationStyle);
  -webkit-transition: all var(--animationMedium) var(--animationStyle);
  -moz-transition: all var(--animationMedium) var(--animationStyle);
  -o-transition: all var(--animationMedium) var(--animationStyle);
  -ms-transition: all var(--animationMedium) var(--animationStyle);
  transition: all var(--animationMedium) var(--animationStyle);
}