* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "avenir";
  src: "fonts/avenir",
}

@font-face {
  font-family: "fontello";
  src: "fonts/fontello",
}

#div_background > div
{
    top: 0px;
    left: 0px;
    width: auto;
    height: auto;
    right: 0px;
    bottom: 0px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    background-image: url("img/Noise.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#div_background
{
    display: inline-block;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    right: 0vw;
    bottom: 0vw;
    z-index: -1;
    background-color: #000000;
}

body {
  background-color: #000000;
  padding: 0vw 5vw 0vw;
}

footer {
  padding: 5vw 0vw 10vw;
  text-align: center;
  clear: center;
  color:  grey;
  font: bold;
  font-family: "avenir", Arial, sans-serif;
  font-size: 0.9em;
}

p {
  font-family: "avenir", Arial, sans-serif;
  font-weight: lighter;
  font-size: 1em;
  text-align: justify;
  color: white;
  line-height: 1.2em;
}

.Startseite {
  position: relative;
  text-align: center;
  height: 100vh;
  background-color: transparent;
}

.header-logo {
  width: 90vw;
  position: relative;
  top: calc(var(--vhh)*50 - 40vw/4.4117647);
}

#WeiterDreieck2 {
  position: absolute;
  bottom: calc(var(--vhh)*10);
  left: calc(50vw - 0.5em);
  color: rgb(251, 20, 111); 
  text-decoration: none;
  font-size: 2em;
  transform: rotate(180deg);
  
}#WeiterDreieck {
  position: absolute;
  bottom: calc(var(--vhh)*10);
  left: calc(50vw - 0.5em);
  color: rgb(251, 20, 111); 
  text-decoration: none;
  font-size: 2em;
  transform: rotate(180deg);
}



#WeiterDreieck:hover {
  font-size: 4em;
  
/*bottom: calc(var(--vhh)*9);*/
}

#img-me {
  width: 65vw;
  padding: 0vw 0vw 0vw 2vw;
  bottom: 5vh;
  float:right; 
}

.HL {
  width: 65vw;
}

#HL1 {
  padding: 5vw 0vw 2vw;
}

#HL2 {
  padding: 15vw 0vw 2vw;
  margin-right: 25vw;
}

#HL3 {
  padding: 10vw 0vw 4vw;
}

#conA {
  margin: calc(var(--bs)*2) 0vw calc(var(--bs)*2) 0vw;
  width: var(--rs);
  height: var(--rs);
  position: relative;
  background-color: white;
  z-index: 1;
  float: left;
}

#conB {
  margin: calc(var(--bs)*2) 0vw calc(var(--bs)*2) 0vw;
  width: var(--rs);
  height: var(--rs);
  position: relative;
  background-color: white;
  z-index: 1;
  float: right;
}

#bild {
  position: absolute;
  width: calc(var(--rs) - var(--bs)*2);
  height: calc(var(--rs) - var(--bs)*2);
  padding: var(--bs) var(--bs) var(--bs) var(--bs);
  z-index: 2;
}

#bild:hover {
  opacity: 0.85;
}

#textbox {
  margin: calc(2*var(--bs)) calc(2*var(--bs)) calc(2*var(--bs)) calc(2*var(--bs));
  position: absolute;
  width: calc(var(--rs) - 4*var(--bs));
  height: calc(var(--rs) - 4*var(--bs));
  z-index: 3;
}

.bottom-left-oben {
  position: absolute;
  font-weight: bolder;
  bottom: 1.6em;
  font-size: 1.25em;
  line-height: 1.2em;
}

.bottom-left-obens {
  position: absolute;
  font-weight: bolder;
  bottom: 1.6em;
  font-size: 1.25em;
  line-height: 1.2em;
  text-shadow: 0 0 1px black;
}

.bottom-left-mitte {
  position: absolute;
  font-weight: lighter Oblique;
  bottom: 0em;
  font-size: 0.9em;
  line-height: 1.2em;
}

.bottom-left-mittes {
  position: absolute;
  font-weight: lighter Oblique;
  bottom: 0em;
  font-size: 0.9em;
  line-height: 1.2em;
  text-shadow: 0 0 1px black;
}

#A {
  margin: 1vw 2vw 0vw 0vw;
  width: 22vw;  
}

#A:hover {
  opacity: 0.5;
}

.icons {
  margin: 0vw 5vw 0vw 0vw;
  color: rgb(251, 20, 111); 
  font-family: "fontello", Arial, sans-serif;
  text-decoration: none;
}

.icons:hover {
  color: white; 
}

#insta{
  font-size: 6em;
}

#fb{
  font-size: 5.4em;
}

#mail{
  font-size: 6em;
}


#link { 
  color: grey; 
  text-decoration: none;
}

#link:hover {
  color: rgb(251, 20, 111);
  text-decoration: line-through;
}

@media all and (min-width: 768px) {

  body {
    padding: 0vw 10vw 0vw;
  }

  .header-logo {
    width: 80vw;
  }

  #WeiterDreieck {
    font-size: 2.5em;
  }

  #WeiterDreieck2 {
    font-size: 2.5em;
  }
  
  #WeiterDreieck:hover {
    font-size: 3em;
    opacity: 0.6;
  }

  p {
    font-size: 1.5em;
    line-height: 1.4em;
  }

  #img-me {
    width: 25vw;
    padding: 0vw 0vw 0vw 2vw;
  }

  #conA {
    margin: calc(var(--bs2)) 0vw calc(var(--bs2)) 0vw;
    width: var(--rs2);
    height: var(--rs2);
    position: relative;
    background-color: white;
    z-index: 1;
    float: left;
  }
  
  #conB {
    margin: calc(var(--bs2)) 0vw calc(var(--bs2)) 0vw;
    width: var(--rs2);
    height: var(--rs2);
    position: relative;
    background-color: white;
    z-index: 1;
    float: right;
  }
  
  #bild {
    position: absolute;
    width: calc(var(--rs2) - var(--bs2)*2);
    height: calc(var(--rs2) - var(--bs2)*2);
    padding: var(--bs2) var(--bs2) var(--bs2) var(--bs2);
    z-index: 2;
  }
  
  #bild:hover {
    opacity: 0.85;
  }
  
  #textbox {
    margin: calc(2*var(--bs2)) calc(2*var(--bs2)) calc(2*var(--bs2)) calc(2*var(--bs2));
    position: absolute;
    width: calc(var(--rs2) - 4*var(--bs2));
    height: calc(var(--rs2) - 4*var(--bs2));
    z-index: 3;
  }

  #img {
    width: 37vw;
    height: 37vw;
    padding: 1vw 1vw 1vw;
  }

  .HL {
    width: 25vw;
  }

  footer {
    padding: 5vw 0vw 2vw;
    font-size: 1em;
  }

}

/*@media all and (min-width: 1000px) {


}*/