@import url("normalize.css");

body {
 background: #F5F4EF;
 color: #000305;
 font-size: 10px; /* Base font size: 14px */
 font-family: Helvetica, sans-serif;
 /* line-height: 1.429; */
 margin: 0;
 padding: 0;
 text-align: left;
 width: 100%;
 min-height: 1vw;
}

:root {
    --vw: 1vw;
    --vh: 1vh;
    --hhigh: min(calc(100*var(--vw)),calc(50*var(--vh)));
    --hlow: min(calc(100*var(--vw)),calc(10*var(--vh)));
    --fsbig: min(calc(0.5*var(--hhigh)),calc(5*var(--vw)));
    --fssmall: min(calc(0.5*var(--hlow)),calc(3*var(--vw)));
    --btop: calc(var(--hhigh) - 2*var(--fsbig));
}

.center {
 width:100%;
 text-align: center;
}

.high {
    height: var(--hhigh);
}

.low {
    height: var(--hlow);
}

.big-text {
    font-size: var(--fsbig);
}

.small-text {
    font-size: var(--fssmall);
}

.ball {
  position: relative;
  top: var(--btop);
 }

.bounce {
  animation-name: example;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
}

.bounceinitial {
  animation-name: example2;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  top: calc(-2*var(--btop));
}


.slide {
  animation-name: rutsch;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  position: relative;
} 


@keyframes example {
  0%   {top:0px;}
  10%  {top:var(--btop);}
  20%  {top:calc(0.5*var(--btop));}
  30%  {top:var(--btop);}
  40%  {top:calc(0.75*var(--btop));}
  50%  {top:var(--btop);}
  60%  {top:calc(0.875*var(--btop));}
  70%  {top:var(--btop);}
  80%  {top:calc(0.9375*var(--btop))}
  90%  {top:var(--btop);}
  100% {top:var(--btop);}
}

@keyframes example2 {
  0%   {top:calc(-2*var(--btop));}
  10%  {top:var(--btop);}
  20%  {top:  0px;}
  30%  {top:var(--btop);}
  40%  {top:calc(0.5*var(--btop));}
  50%  {top:var(--btop);}
  60%  {top:calc(0.75*var(--btop));}
  70%  {top:var(--btop);}
  80%  {top:calc(0.875*var(--btop));}
  90%  {top:var(--btop);}
  100% {top:var(--btop);}
}


@keyframes rutsch {
  0%   {left:-100%;}
  100% {left:0px;}
}