@font-face {
    font-family: 'euclid';
    src: url(../font/EuclidFlexEDU-Medium-WebXL.woff);
    format:('woff')
  }

  body {
      font-family: 'euclid';
  }


  .text {
    color: rgb(252, 2, 252);
    font-size: 60px;
    position: absolute;
    top: 300px;
  }



  .auge {
      color: white;
      text-shadow: 1px  1px 1px black,
      1px -1px 1px black,
     -1px  1px 1px black,
     -1px -1px 1px black
      
  }


  .auge:hover > .augeBild {
      display: flex;
  }

  .augeBild {
      background-image: url(../images/7aa0fe42d222328d2123c9495bdb87e0.jpg);
      width: 420px;
      height: 370px;
      display: none;
      position: absolute;
      top: 10px;
      left: 400px;
      z-index: -1;
      
  }


  .traum {
    color: white;
    text-shadow: 1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black

  }

  .traum:hover > .traumbild {
      display: flex; }


      .traumbild {
        background-image: url(../images/01624a393b16cfdd4b9e54117629bf66.jpg);
        width: 420px;
        height: 600px;
        display: none;
        position: absolute;
        top: 10px;
        left: 1100px;
        z-index: -1;
      }


.glüht {
    color: white;
    text-shadow: 1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black
}

.glüht:hover > .glühtbild {
    display: flex;
}


.glühtbild {
    background-image: url(../images/5a9ff4ea5046e3cd8fec3bd88d56fade.jpg);
        width: 500px;
        height: 600px;
        display: none;
        position: absolute;
        top: 50px;
        left: 700px;
        z-index: -1;
}

.farben {
    color: white;
    text-shadow: 1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black

}

.farben:hover > .farbenbild {
    display: flex;
}


.farbenbild {
    background-image: url(../images/Unknown.jpeg);
        width: 300px;
        height: 200px;
        display: none;
        position: absolute;
        top: 200px;
        left: 700px;
        z-index: -1;
}

.blau {
    color: white;
    text-shadow: 1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black
}


.blau:hover > .blaubild {
    display: flex;
}


.blaubild {
    background-image: url(../images/1200px-IKB_191.jpg);
        width: 700px;
        height: 1100px;
        display: none;
        position: absolute;
        top: -400px;
        left: -30px;
        z-index: -1;
}