@font-face {
	font-family: 'MyFont';
	src: url(../fonts/otf/Druk_Wide_Medium_Italic.otf);
}

html{
    cursor: url(../images/cursor_engel.cur), default;
    background-color: #4586d1;
}

.shirt_1:hover ,
.shirt_2:hover ,
.shirt_3:hover ,
.shirt_4:hover ,
.shirt_5:hover ,
.shirt_6:hover ,
.shirt_7:hover ,
#return:hover  {
    cursor: url(../images/cursor_engel_closed.cur), default;
  }

body {
  margin: 0px;
  font-family: MyFont;
  overflow: hidden;
}

#return {
  position: absolute;
  z-index: 0;
  top: 47vh;
  left: 3vw;
  width: auto;
  height: 6vh;
}

.cloud img{
  position: absolute;
  width: 85vw ;
  bottom: -20vw;
  z-index: 0;
  animation: fuwafuwa_cloud 8s ease-in-out 0s infinite normal;
}

#gl canvas {
  z-index: 100;
}

iframe{
  position: absolute;
  margin: 0;
  border: 0;
  top: 5vh;
  left: 15vw;
  width: 80vw;
  height: 70vh;
}

.text{
  position: absolute;
  width: auto;
  height: 6vh;  
  padding-left: 20px;
  padding-right: 20px;
  background-color:#feff00;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:1.0em; 
  opacity: 0;
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

.shirt_1 {
  position: absolute;
  top: 17vh;
  left: 37vw;
  height: 21vh;
  width: 11vw;
}

.shirt_2 {
  position: absolute;
  top: 17vh;
  left: 49vw;
  height: 21vh;
  width: 11vw;
}

.shirt_3 {
  position: absolute;
  top: 17vh;
  left: 62vw;
  height: 21vh;
  width: 11vw;
}

.shirt_4 {
  position: absolute;
  top: 43vh;
  left: 33vw;
  height: 21vh;
  width: 11vw;
}

.shirt_5 {
  position: absolute;
  top: 43vh;
  left: 44vw;
  height: 21vh;
  width: 11vw;
}

.shirt_6 {
  position: absolute;
  top: 43vh;
  left: 55vw;
  height: 21vh;
  width: 11vw;
}

.shirt_7 {
  position: absolute;
  top: 43vh;
  left: 69vw;
  height: 21vh;
  width: 11vw;
}

.shirt_1 .text, 
.shirt_2 .text, 
.shirt_3 .text, 
.shirt_4 .text, 
.shirt_5 .text, 
.shirt_6 .text, 
.shirt_7 .text {
  top: 6vh;
  left: 3vw;
  width: 30vw;
}

.shirt_1:hover .text,
.shirt_2:hover .text,
.shirt_3:hover .text,
.shirt_4:hover .text,
.shirt_5:hover .text,
.shirt_6:hover .text,
.shirt_7:hover .text
{
  opacity: 1;
  z-index: 100;
}


@keyframes fuwafuwa_cloud{
  0%{
    left: 10vw;
  }
  50%{
    left: 16vw;
  }
  100%{
    left: 10vw;
  }
}