@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

body {
    background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
    height: 100vh;
}

h1 {
    text-align: center;
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
}

/*The fish tank*/
div {
    width: 500px;
    height: 300px;
    border: 10px solid #000;
    margin: 0 auto;
  	background-size: cover;
    background-repeat: no-repeat;
    background-image: url("http://www.publicdomainpictures.net/pictures/20000/velka/aquarium-plants.jpg");
}

img {
    width: 100px;
    display: block;
  	animation-timing-function: linear;
}

/*Fish on the top*/
#goldfish-1 {
	margin-top: 30px;
  	animation: swim 5s infinite;
}

/*Fish on the bottom*/
#goldfish-2 {
    margin-top: 80px;
  	animation: swim 7s infinite;
}

#tilikum {
  animation: swim 30s infinite;
}

#jelly {
  margin-top: -80px;
  animation: swim 30s infinite;
}

#jelly2 {
  margin-top: -180px;
  animation: swim2 5s infinite;
}

/*Keyframes for both fish*/
@keyframes swim {
    0% {
		margin-left: 0px;
      	 transform: scaleX(-1);
    }

  	50% {
    	margin-left: 400px;
      	transform: scaleX(-1);
  	}

    75% {
    	margin-left: 400px;
      	transform: scaleX(1);
  	}

    100% {
		margin-left: 0px;
      	transform: scaleX(1);
    }
}

/*FOR MOBILE VIEW ONLY, DON'T EDIT! - div and keyframes styles when viewed on mobile*/
@media only screen and (max-width: 736px) and (orientation: portrait) {
    div {
        width: 90%;
    }
    @keyframes swim {
        0% {
            margin-left: 0px;
            transform: scaleX(-1);
        }
        50% {
            margin-left: 200px;
            transform: scaleX(-1);
        }
        75% {
            margin-left: 200px;
            transform: scaleX(1);
        }
        100% {
            margin-left: 0px;
            transform: scaleX(1);
        }
    }
}

@keyframes swim2 {
  0% {
    margin-top: -250px;
    transform: scaleY(1);
  }
  50% {
    margin-top: -80px;
    transform: scaleY(1);
    height: 50px;
  }
  75% {
    margin-top: -80px;
    transform: scaleY(1);
    height: 50px;
  }
  100% {
    margin-top: -250px;
    transform: scaleY(1);
  }
}