@font-face {
    font-family: asset;
    src: url('../resources/fonts/Asset/Asset-Regular.ttf');
}

h3{
    color: white;
}

h2{
    color: white;
}


body{
    max-height: 100%;
    margin: 0;
    font-family: 'Asset', cursive;
    user-select: none;
    content: url("../resources/sprites/duck/hit.png") url("../resources/sprites/duck/flyrightup.") url("../resources/sprites/duck/flyrightdown.gif") url("../resources/sprites/duck/flyleftup.gif") url("../resources/sprites/duck/flyleftdown.gif") url("../resources/sprites/duck/phishRight.gif") url("../resources/sprites/duck/phishLeft.gif") url("../resources/sprites/duck/falling.gif") ;
}

.sky { 
    background-image: url("../resources/sprites/background/sky1.png");
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: crosshair;
}


.bushes{
    z-index: 1;
    position: relative;
    height: 100%; 
    background-image: url("../resources/sprites/background/bushes.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.duck{
    left: 48%;
    bottom: 20%;
    background-image: url("../resources/sprites/duck/phishLeft.gif");
    position: absolute;
    animation-timing-function: linear;
    width: 156px;
    height: 146px;
    background-size: 100%;
}

.dog{
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
}

#dog1{
    width: 10vw;
    height: 6vw;
    z-index: 3;
    left: 0%;
    bottom: 20%;
    background-image: url("../resources/sprites/dog/dogeWalking.gif");
    animation-duration: 0.7s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    content: url("../resources/sprites/dog/dogeWalking.gif") url("../resources/sprites/dog/snif.gif") url("../resources/sprites/dog/pawelJumper.gif");
}

#dog2{
    width: 10vw;
    height: 8vw;
    left: 48%;
    bottom: 10%;
    content: url("../resources/sprites/dog/gotOne.png") url("../resources/sprites/dog/gotTwo.png") url("../resources/sprites/dog/bk.gif");
}

.easingOut{
    animation-name: dog2Show;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.comboMessage{
    display: none;
    z-index: 7;
    position: absolute;
    top: 15%;
    left: 15%;
    animation-name: flash;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
}

@keyframes flash {
    0% {color: red}
    100% {color: black}
}

/* @keyframes dog2Show{
    0%  {left: 48%; bottom: 20%;}
    20%  {left: 48%; bottom: 35%;}
    80%  {left: 48%; bottom: 35%;}
    100%  {left: 48%; bottom: 20%;}
}


@keyframes dogWalk1 {
    0%   {left:0%; bottom:20%;}
    100% {left:20%; bottom:20%;}
}

@keyframes dogSniff1 {
    0%   {left:20%; bottom:20%;}
    100% {left:20%; bottom:20%;}
}


@keyframes dogWalk2 {
    0%   {left:20%; bottom:20%;}
    100% {left:40%; bottom:20%;}
}

@keyframes dogSniff2 {
    0%   {left:40%; bottom:20%;}
    100% {left:40%; bottom:20%;}
} */


/* 0.7 */
@keyframes dogJump {
    0%  {left:45%; bottom:20%;}
    25%  {left:45%; bottom:25%;}
    50%  {left:47%; bottom:30%;}
    75%  {left:50%; bottom:35%;}
    100% {left:52%; bottom:32%;}
}