:root {
  --width: 300px;
  --x-speed: 13s;
  --y-speed: 7s;
  --transition-speed: 2.2s;
}


.blob { 
  width: var(--width);
  height: var(--width);
}
.blob-2 {
  position: absolute;
  top: 0;
  right: 0;
}
.blob-2 .blob {

}

.blob-3 {
  position: absolute;
  top: 0;
  right: 0;
}

.blob-3 .blob {

}

body {
  margin: 0;
  overflow: hidden;
}

.x {
  animation: x var(--x-speed) linear infinite alternate;
}
.x2 {
  animation: x2 var(--x-speed) linear infinite alternate;
}

.x3 {
  animation: x3 var(--x-speed) linear infinite alternate;
}
.y {
  animation: y var(--y-speed) linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX(calc(100vw - var(--width)));
  }
}
@keyframes x2 {
  100% {
    transform: translateX(calc(-100vw + var(--width)));
  }
}

@keyframes y {
  100% {
    transform: translateY(calc(100vh - var(--width)));
  }
}

 
img {
 max-height: 100vh;}  
  
  div.mbtxt1 {
position: fixed;
width: 100vw;
left: -45%;
top: -65%;
}

div.mbtxt2 {
position: fixed;
width: 100vw;
left: 0%;
bottom: 5%;
}

  /* MENU */

div.menu {
width: 100vw;
top: 5%;
left: 5%;
position:absolute;
z-index: 2;}

div.menuR{
top: 5%;
right: 5%;
text-align: right;
position:absolute;
z-index: 3;
}

div.body {
width: 100vw;
top: 10%;
left: 5%;
position:absolute;
z-index: -2;}


/* TEXT */

h2 {
    font-family: 'Alte Haas Grotesk';
    font-weight: 400;
    font-size: 14px;
    color: #ff0000;
text-align: center;}

/* unvisited link */
a:link {
    font-family: 'Alte Haas Grotesk';
    font-weight: 400;
    font-size:14px;
    color: #000000;
    text-decoration: none;
}

/* visited link */
a:visited {
    font-family: 'Alte Haas Grotesk';
    font-size:14px;
    color: #000000;
    text-decoration: line-through;
}

/* mouse over link */
a:hover {
text-decoration: line-through;
}

/* selected link */
a:active {
    font-family: 'Alte Haas Grotesk';
    font-size:14px;
    color: #000000;
    text-decoration: line-through;
}