@charset "UTF-8";

body {
  margin: 0;
  overflow: hidden;
  height: 100vh;
  background-color: white;
}

* :active {
  background: black;
}

a{padding-left: 10px;}

div.container {
  position: relative;
  width: 100%;
  height: 100%;
}

header{font-size: x-large;
  font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position:fixed;
top: 8px;
right: 20px;
 text-shadow: 
  2px 0 1px white,
  -2px 0 1px white,
  0 2px 1px white,
  0 -2px 1px white,
  1px 1px 1px white,
  1px -1px 1px white,
  -1px 1px 1px white,
  -1px -1px 1px white;
}

footer {
  color: white;
  font-size: medium;
  font-weight: bold;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  padding: 25px;
  bottom: 0px;
   text-shadow: 
  2px 0 1px black,
  -2px 0 1px black,
  0 2px 1px black,
  0 -2px 1px black,
  1px 1px 1px black,
  1px -1px 1px black,
  -1px 1px 1px black,
  -1px -1px 1px black;
}

a {
  display: inline-flex;
  margin: 10px 0px 0px 20px;
  color: black;
  background-color: white;
  outline: 1px solid black;
  box-shadow: 2px 2px 5px grey;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding: 2px 5px;
  text-decoration: none; 
}

a:hover {background-color: skyblue;}

a.unactive{background-color: lightgrey;
  color: gray;
pointer-events: none;}

img.moving {
  position: absolute;
  animation: movement-1 var(--t, 20s) linear infinite;
}

img{
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}


@keyframes movement-1 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(30vw, -20vh); }
  50%  { transform: translate(-20vw, 30vh); }
  75%  { transform: translate(10vw, -10vh); }
  100% { transform: translate(0, 0); }
}

@keyframes movement-2 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-40vw, 10vh); }
  50%  { transform: translate(20vw, -30vh); }
  75%  { transform: translate(-10vw, 20vh); }
  100% { transform: translate(0, 0); }
}

@keyframes movement-3 {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(25vw, 25vh); }
  66%  { transform: translate(-35vw, -15vh); }
  100% { transform: translate(0, 0); }
}

@keyframes movement-4 {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(10vw, -30vh); }
  60%  { transform: translate(-30vw, 10vh); }
  100% { transform: translate(0, 0); }
}


img.moving:nth-child(4n)   { animation-name: movement-1;}
img.moving:nth-child(4n+1) { animation-name: movement-2;} 
img.moving:nth-child(4n+2) { animation-name: movement-3;}
img.moving:nth-child(4n+3) { animation-name: movement-4;}

img.moving:nth-child(15n+1)  { mix-blend-mode: multiply; }
img.moving:nth-child(15n+2)  { mix-blend-mode: screen; }
img.moving:nth-child(15n+3)  { mix-blend-mode: overlay; }
img.moving:nth-child(15n+4)  { mix-blend-mode: darken; }
img.moving:nth-child(15n+5)  { mix-blend-mode: lighten; }
img.moving:nth-child(15n+6)  { mix-blend-mode: color-dodge; }
img.moving:nth-child(15n+7)  { mix-blend-mode: color-burn; }
img.moving:nth-child(15n+8)  { mix-blend-mode: hard-light; }
img.moving:nth-child(15n+9)  { mix-blend-mode: soft-light; }
img.moving:nth-child(15n+10) { mix-blend-mode: difference; }
img.moving:nth-child(15n+11) { mix-blend-mode: exclusion; }
img.moving:nth-child(15n+12) { mix-blend-mode: hue; }
img.moving:nth-child(15n+13) { mix-blend-mode: saturation; }
img.moving:nth-child(15n+14) { mix-blend-mode: color; }
img.moving:nth-child(15n+15) { mix-blend-mode: luminosity; }


img.moving:nth-child(1)  { --t: 18s; width: 500px;  animation-delay: -5s; }
img.moving:nth-child(2)  { --t: 25s; width: 550px; animation-delay: -12s; }
img.moving:nth-child(3)  { --t: 14s; width: 540px;  animation-delay: -3s; }
img.moving:nth-child(4)  { --t: 30s; width: 640px; animation-delay: -20s; }
img.moving:nth-child(5)  { --t: 22s; width: 580px;  animation-delay: -8s; }
img.moving:nth-child(6)  { --t: 27s; width: 510px; animation-delay: -16s; }
img.moving:nth-child(7)  { --t: 19s; width: 550px;  animation-delay: -6s; }
img.moving:nth-child(8)  { --t: 24s; width: 590px;  animation-delay: -14s; }
img.moving:nth-child(9)  { --t: 16s; width: 530px;  animation-delay: -2s; }
img.moving:nth-child(10) { --t: 28s; width: 630px; animation-delay: -18s; }
img.moving:nth-child(11)  { --t: 11s; width: 150px;  animation-delay: -7s; }
img.moving:nth-child(12)  { --t: 32s; width: 550px; animation-delay: -17s; }
img.moving:nth-child(13)  { --t: 29s; width: 540px;  animation-delay: -32s; }
img.moving:nth-child(14)  { --t: 17s; width: 640px; animation-delay: -220s; }
img.moving:nth-child(15)  { --t: 11s; width: 580px;  animation-delay: -83s; }
img.moving:nth-child(16)  { --t: 43s; width: 510px; animation-delay: -164s; }
img.moving:nth-child(17)  { --t: 21s; width: 550px;  animation-delay: -62s; }
img.moving:nth-child(18)  { --t: 20s; width: 590px;  animation-delay: -1s; }
img.moving:nth-child(19)  { --t: 21s; width: 500px;  animation-delay: -2s; }
img.moving:nth-child(20)  { --t: 22s; width: 550px; animation-delay: -3s; }
img.moving:nth-child(21)  { --t: 23s; width: 540px;  animation-delay: -4s; }
img.moving:nth-child(22)  { --t: 24s; width: 640px; animation-delay: -5s; }
img.moving:nth-child(23)  { --t: 25s; width: 580px;  animation-delay: -6s; }
img.moving:nth-child(24)  { --t: 26s; width: 510px; animation-delay: -7s; }
img.moving:nth-child(25)  { --t: 27s; width: 350px;  animation-delay: -8s; }
img.moving:nth-child(26)  { --t: 28s; width: 390px;  animation-delay: -9s; }
img.moving:nth-child(27)  { --t: 29s; width: 530px;  animation-delay: -10s; }
img.moving:nth-child(28) { --t: 30s; width: 630px; animation-delay: -11s; }
img.moving:nth-child(29)  { --t: 31s; width: 500px;  animation-delay: -12s; }
img.moving:nth-child(30)  { --t: 32s; width: 550px; animation-delay: -13s; }
img.moving:nth-child(31)  { --t: 33s; width: 540px;  animation-delay: -14s; }
img.moving:nth-child(32)  { --t: 12s; width: 640px; animation-delay: -15s; }
img.moving:nth-child(33)  { --t: 11s; width: 580px;  animation-delay: -16s; }
img.moving:nth-child(34)  { --t: 43s; width: 510px; animation-delay: -17s; }
img.moving:nth-child(35)  { --t: 21s; width: 550px;  animation-delay: -18s; }
img.moving:nth-child(36)  { --t: 28s; width: 590px;  animation-delay: -19s; }
img.moving:nth-child(37)  { --t: 18s; width: 500px;  animation-delay: -20s; }
img.moving:nth-child(38)  { --t: 25s; width: 550px; animation-delay: -21s; }
img.moving:nth-child(39)  { --t: 14s; width: 540px;  animation-delay: -22s; }
img.moving:nth-child(40)  { --t: 30s; width: 640px; animation-delay: -23s; }
img.moving:nth-child(41)  { --t: 22s; width: 380px;  animation-delay: -24s; }
img.moving:nth-child(42)  { --t: 27s; width: 510px; animation-delay: -25s; }
img.moving:nth-child(43)  { --t: 19s; width: 550px;  animation-delay: -26s; }
img.moving:nth-child(44)  { --t: 24s; width: 590px;  animation-delay: -27s; }
img.moving:nth-child(45)  { --t: 16s; width: 330px;  animation-delay: -28s; }
img.moving:nth-child(46) { --t: 28s; width: 630px; animation-delay: -29s; }
img.moving:nth-child(47)  { --t: 11s; width: 600px;  animation-delay: -30s; }
img.moving:nth-child(48)  { --t: 32s; width: 550px; animation-delay: -31s; }
img.moving:nth-child(49)  { --t: 29s; width: 540px;  animation-delay: -32s; }
img.moving:nth-child(50)  { --t: 17s; width: 640px; animation-delay: -33s; }
img.moving:nth-child(51)  { --t: 11s; width: 580px;  animation-delay: -34s; }
img.moving:nth-child(52)  { --t: 43s; width: 510px; animation-delay: -35s; }
img.moving:nth-child(53)  { --t: 21s; width: 550px;  animation-delay: -36s; }
img.moving:nth-child(54)  { --t: 28s; width: 590px;  animation-delay: -37s; }
img.moving:nth-child(55)  { --t: 18s; width: 500px;  animation-delay: -38s; }
img.moving:nth-child(56)  { --t: 25s; width: 550px; animation-delay: -39s; }
img.moving:nth-child(57)  { --t: 14s; width: 540px;  animation-delay: -40s; }
img.moving:nth-child(58)  { --t: 30s; width: 640px; animation-delay: -41s; }
img.moving:nth-child(59)  { --t: 22s; width: 580px;  animation-delay: -42s; }
img.moving:nth-child(60)  { --t: 27s; width: 510px; animation-delay: -43s; }
img.moving:nth-child(61)  { --t: 19s; width: 550px;  animation-delay: -44s; }
img.moving:nth-child(62)  { --t: 24s; width: 590px;  animation-delay: -45s; }
img.moving:nth-child(63)  { --t: 16s; width: 530px;  animation-delay: -46s; }
img.moving:nth-child(64) { --t: 28s; width: 630px; animation-delay: -47s; }
img.moving:nth-child(65)  { --t: 11s; width: 500px;  animation-delay: -48s; }
img.moving:nth-child(66)  { --t: 32s; width: 550px; animation-delay: -49s; }
img.moving:nth-child(67)  { --t: 29s; width: 540px;  animation-delay: -50s; }
img.moving:nth-child(68)  { --t: 17s; width: 640px; animation-delay: -51s; }
img.moving:nth-child(69)  { --t: 11s; width: 300px;  animation-delay: -52s; }
img.moving:nth-child(70)  { --t: 43s; width: 510px; animation-delay: -53s; }
img.moving:nth-child(71)  { --t: 21s; width: 250px;  animation-delay: -54s; }
img.moving:nth-child(72)  { --t: 28s; width: 590px;  animation-delay: -55; }
img.moving:nth-child(73)  { --t: 18s; width: 500px;  animation-delay: -56s; }
img.moving:nth-child(74)  { --t: 25s; width: 550px; animation-delay: -57s; }
img.moving:nth-child(75)  { --t: 14s; width: 540px;  animation-delay: -58s; }
img.moving:nth-child(76)  { --t: 30s; width: 640px; animation-delay: -59s; }
img.moving:nth-child(77)  { --t: 22s; width: 580px;  animation-delay: -60s; }
img.moving:nth-child(78)  { --t: 27s; width: 510px; animation-delay: -61s; }
img.moving:nth-child(79)  { --t: 19s; width: 550px;  animation-delay: -62s; }
img.moving:nth-child(80)  { --t: 24s; width: 590px;  animation-delay: -63s; }
img.moving:nth-child(81)  { --t: 19s; width: 550px;  animation-delay: -64s; }
img.moving:nth-child(82)  { --t: 24s; width: 590px;  animation-delay: -65s; }
img.moving:nth-child(83)  { --t: 16s; width: 530px;  animation-delay: -66s; }
img.moving:nth-child(84) { --t: 28s; width: 630px; animation-delay: -67s; }
img.moving:nth-child(85)  { --t: 11s; width: 500px;  animation-delay: -68s; }
img.moving:nth-child(86)  { --t: 32s; width: 550px; animation-delay: -69s; }
img.moving:nth-child(87)  { --t: 29s; width: 540px;  animation-delay: -70s; }
img.moving:nth-child(88)  { --t: 17s; width: 640px; animation-delay: -71s; }
img.moving:nth-child(89)  { --t: 11s; width: 300px;  animation-delay: -72s; }
img.moving:nth-child(90)  { --t: 43s; width: 300px; animation-delay: -73s; }
img.moving:nth-child(91)  { --t: 21s; width: 250px;  animation-delay: -74s; }
img.moving:nth-child(92)  { --t: 28s; width: 590px;  animation-delay: -75; }
img.moving:nth-child(93)  { --t: 18s; width: 500px;  animation-delay: -76s; }
img.moving:nth-child(94)  { --t: 25s; width: 550px; animation-delay: -77s; }
img.moving:nth-child(95)  { --t: 14s; width: 540px;  animation-delay: -78s; }
img.moving:nth-child(96)  { --t: 30s; width: 640px; animation-delay: -79s; }
img.moving:nth-child(97)  { --t: 22s; width: 580px;  animation-delay: -80s; }
img.moving:nth-child(98)  { --t: 27s; width: 510px; animation-delay: -81s; }
img.moving:nth-child(99)  { --t: 19s; width: 550px;  animation-delay: -82s; }
img.moving:nth-child(100)  { --t: 24s; width: 590px;  animation-delay: -83s; }



img.moving:nth-child(4n+1) { top: 20%; left: 20%; }
img.moving:nth-child(4n+2) { top: 50%; left: 25%; }
img.moving:nth-child(4n+3) { top: 40%; left: 60%; }
img.moving:nth-child(4n)   { top: 50%; left: 55%; }