@charset "UTF-8";

/* CSS rules go below */


/*
    DO NOT REMOVE YEGON 
*/
body, html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color:beige

    
}
/*
    DO NOT REMOVE YEGON 
*/


.pixel-1 {
    margin: 50%;
}

.butterfly {

    transform: rotate(35deg) !important;
    animation: moveAround 90s linear infinite;

}

.rice {

    transform: rotate(85deg) !important;
    animation: moveAround 80s linear infinite;

}



.moving-image {
  position: absolute;
  width: 10vw;
    transform: rotate(90deg);
  animation: moveAround 40s linear infinite;
}

@keyframes moveAround {
  0%   { top: 0; left: 0; }
  25%  { top: 0; left: 100%; }
  50%  { top: 100%; left: 100%; }
  75%  { top: 100%; left: 0%; }
  100% { top: 0; left: 0; }
}


.box {
    position: relative;
    display: block;
    float: left;
    clear: both;
    border: 1px solid black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.sheep {
    width: 85vw;
    height: 15vh;
    margin-top: 15vh;
    margin-bottom: 5vh;
    background-color: rgba(240, 255, 255, 0.801);
}

.cow {
    height: 30vh;
    width: 90vw;
    background-color: rgba(255, 244, 230, 0.833);
}

.chicken {
    width: 90vw;
    height: 100vh;
}

.bear {
    height: 50vh;
    width: 85vw;
}

.cat {

    height: 100vh;
    width: 5vw; /* even though total width is 100vw it breaks */
}

.bunny {
    height: 70vh;
    width: 5vw;
    margin-top: 30vh;
    background-color: rgba(255, 244, 230, 0.809);
}

.whale {
    width: 100vw;
    height: 100vh;
}