@font-face {
    font-family: 'Tanker'; /*a name to be used later*/
    src: url('./fonts/Tanker-Regular.ttf') format('truetype'); /*URL to font*/
}
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family:"Tanker";
  font-size: 32px;
  letter-spacing:2px;
  color:black;
  background:#f2f2f2;
}
.background {
  position: absolute;
  width: 1700px;
  height: 1700px;
  transform: rotate(45deg);
  left: -700px;
  filter: drop-shadow(0 0 2.5rem #001a33);
}

.background2 {
  position: absolute;
  width: 1500px;
  height: 1500px;
  left: -150px;
  top: -700px;
  transform: rotate(-25deg);
  filter: drop-shadow(0 0 2.5rem #001a33);
}

.background3{
  position:absolute;
  width:1200px;
  height:1200px;
  left:1000px;
  top:-400px;
  filter: drop-shadow(0 0 2.5rem #001a33);
}
.background4{
  position:absolute;
  width:1200px;
  height:1200px;
  filter: drop-shadow(0 0 2.5rem #001a33);
  left:800px;
  top:300px;
  transform:rotate(-45deg);
}
/* SVG MUSS skaliert werden */
.background svg,
.background2 svg,
.background3 svg,
.background4 svg {
  width: 100%;
  height: 100%;
}
.blob-container {
  float:left;
  position: relative;
  width:300px;
  height:300px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow:hidden;
}
.blob1{
  position:absolute;
  width:100%;
  height:100%;
}
.circle{
  width:10px;
  height:10px;
  background:transparent;
  border: 2px solid #004d99;
  border-radius:100%;
  z-index:2;
  position:absolute;
}
.cl1{
  border-color:#3a6fa5;
  margin-left:60%;
  margin-top:30%;
}
.cl2{
  border-color:#284d71;
  margin-left:-35%;
  margin-top:50%;
}
.w1{
  border-color:#c98d6a;
}
.w2{
  border-color:#704329;
}
.d1{
  border-color:#990008;
}
.d2{
  border-color:#800006;
}
.b1{
  border-color:#80ff80;
}
.b2{
  border-color:#006600;
}
.c1{
  border-color:#ffff99;
}
.c2{
  border-color:#ffff33;
}
.s1{
  border-color:#ff99ff;
}
.s2{
  border-color:#cc00cc;
}