#@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face { 
	font-family: 'pressstart2p regular';
    src: url('font/pressstart2p-regular-webfont.woff') format('woff'),
		 url('font/pressstart2p-regular-webfont.woff2') format('woff2');
   
}

* { user-select: none; }

html { height: 100%; }

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #7bdaf6;
  backface-visibility: hidden;
}

h1 {
  position: absolute;
  top: calc(50% - 50%);
  left: 0;
  right: 0;
  margin: 0;
  padding: 10px 55px;
  color: #4d5782;
  font: 20px/1 'press_start_2pregular', cursive;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}
.pond_container {
	overflow: hidden;
  background-image: url("./images/aquarium_anim.gif");
  height: 462px;
  width: 630px;
  position: relative;
  top: 10%;
  left: 1%;
  border-style: dashed;
	border: thin;
}
.pond {
  overflow: hidden;
  height: 56%;
  width: 64%;
  position: relative;
  margin-top: 120px;
  margin-left: 110px;
  z-index: 0px;
  border-style: dotted;
  border: hidden;
}
.pond_count {
  height: 8%;
  width: 40%;
  position: absolute;
  margin-top: 40px;
  margin-left: 180px;
  z-index: 5px;
  border-style: dotted;
  border: hidden;
}

.pond_cover {
  overflow: hidden;
  background-image: url("./images/kapak.png");
  height: 103px;
  width: 630px;
  position: absolute;
  top: -1800%;
  left: -71.5%;
  border-style: outset;
  border: hidden;
}

.fish {
  position: absolute;
  margin: -15px 0 0 -30px;
  opacity: 0;
  transition: transform 10s;
  animation: spawn .5s forwards;
}
@keyframes spawn {
  100% { opacity: 1; }
}

.fish-bob {
  position: relative;
  margin-top: -20px;
  animation: bob 6s infinite;
}
@keyframes bob {
  50% { transform: translateY(40px); }
}

.fish-direction {
  position: relative;
  transition: transform .5s;
}

.fish-body {
  content: '';
  position: relative;
  margin-left: 0px;
  width: 46px;
  height: 32px;
  border-radius: 0%;
  border-bottom: solid 0px rgba(0, 0, 0, 0);
  transition: transform 2s ease-out;

}
#.fish-body::before {
  content: '';
  display: block;
  position: absolute;
  left: -10px;
  width: 0;
  height: 0;
  border-left: solid 25px orange;
  border-top: solid 15px transparent;
  border-bottom: solid 15px transparent;
}
.fish-body::after {
  content: '';
  display: block;
  position: absolute;
  top: 8px;
  left: 34px;
  width: 0px;
  height: 0px;
  background-color: #fff;
  border-radius: 0%;
}

.fish-1 .fish-body { background-image: url("./images/balik-01.gif"); background-repeat: no-repeat; filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.3)); align-content: center;}
.fish-1 .fish-body::before { border-left-color: #d49919; }
.fish-2 .fish-body { background-image: url("./images/balik-02.gif"); background-repeat: no-repeat; filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.3)); align-content: center; }
.fish-2 .fish-body::before { border-left-color: #74a135; }
.fish-3 .fish-body { background-image: url("./images/balik-03.gif"); background-repeat: no-repeat; filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.3)); align-content: center; }
.fish-3 .fish-body::before { border-left-color: #806fad; }
.fish-4 .fish-body { background-image: url("./images/balik-04.gif"); background-repeat: no-repeat; filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.3)); align-content: center; }
.fish-4 .fish-body::before { border-left-color: #d97eb6; }

.fish-flip .fish-direction { transform: scaleX(-1); }

.fish-spin .fish-body { transform: rotate(720deg); }

.bubble {
  position: absolute;
  width: 7px;
  height: 7px;
  border: solid 1px #fff;
  border-radius: 50%;
  margin: -15px 0 0 20px;
  transform-origin: center top;
  animation: bubble 4s linear forwards;
}
@keyframes bubble {
  100% {
    transform: translateY(-50px) rotate(-1080deg);
    opacity: 0;
  }
}

.bubble-flip {
  margin-left: -28px;
  animation-name: bubble-flip;
}
@keyframes bubble-flip {
  100% {
    transform: translateY(-100px) rotate(1080deg);
    opacity: 0;
  }
}