/* fonts */
p {
    font-family: 'Archivo';
    font-size: 30px;
    text-align: center;

    position: fixed;
    left: 50%;
    top: 20px;
    transform: translate(-50%);
}

#scoreBackground {
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translate(-50%);

    height: 90px;
    width: auto;
}



.visible {
    display: block;
}

.invisible {
    display: none;
}

.homeScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    background-image: url('https://kwong09.github.io/puppy-party/assets/startScreenBackground.png');
    background-size: cover;

    background-color: blue;
    height: 500px;
    width: 800px;
}

#startButton {
    height: 50px;
    width: auto;
    position: fixed;
    top: 30%;
    left: 325px;
    cursor: pointer;

    animation: floatingAni2 2s infinite ease-in-out;
}

#menuButton {
    height: 50px;
    width: auto;
    position: fixed;
    top: 80%;
    left: 70px;
    cursor: pointer;

    animation: floatingAni2 2s infinite ease-in-out;
}

.menuScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;

    background-image: url('https://kwong09.github.io/puppy-party/assets/menuScreen.png');
    background-size: cover;
    height: 500px;
    width: 800px;
}

.menuScreen img {
    height: 110px;
    width: 110px;
    cursor: pointer;
    position: absolute;
    transform: translateX(-100px);

    top: 200px;
    animation: floatingAni1 2s ease-in-out infinite;
}

#jumpingStartButton {
    height: 90px;
    width: auto;
    left: 275px;

    animation: floatingAni2 2s infinite ease-in-out;
    
    display: none;
    top: 400px;
}

#outfitStartButton {
    left: 25%;
}

#giftStartButton {
    left: 50%;
}

#collectingStartButton {
    left: 75%
}

@keyframes floatingAni1 {
    0%{transform: translate(-50px, 0px);}
    50%{transform: translate(-50px, -10px);}
    100%{transform: translate(-50px, 0px);}
}

@keyframes floatingAni2 {
    0%{transform: translateY(0px);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0px);}
}

.jumpingGameScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
    
    background-image: url('https://kwong09.github.io/puppy-party/assets/fieldBackground.png');
    background-size: cover;
    height: 500px;
    width: 800px;
}

#jumpingCharacter {
    width: 150px;
    height: 150px;
    position: relative;
    top: 500px;
    left: 50px;
    transform: translate(0%, -100%);
}

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#jumpingObstacle1 {
    width: 60px;
    height: 60px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/poisonIvy.png');
    background-size: cover;
    position: relative;
    top: 350px;
    left: -10px;
    transform: translate(0%, -100%);
    animation: jumpingObstacleAni 1.2s infinite linear;
}

@keyframes jumpingObstacleAni {
    0%{left: 850px;}
    100%{left: -50px;}
}

@keyframes jumpingCharacterAni {
    0%{top:500px;}
    20%{top:300px;}
    80%{top:300px;}
    100%{top:500px;}
}

.jumpingCharacterAni {
    animation: jumpingCharacterAni 2s linear;
}


.winScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
    
    background-image: url('https://kwong09.github.io/puppy-party/assets/winCake.png');
    background-size: cover;
    height: 500px;
    width: 800px;
}


.collectingGameScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
    
    background-image: url('https://kwong09.github.io/puppy-party/assets/kitchenBackground.png');
    background-size: cover;
    height: 500px;
    width: 800px;
}



#collectingCharacter {
    width: 150px;
    height: 150px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/dogBaking.png');
    background-size: cover;
    position: relative;
    top: 500px;
    left: 150px;
    transform: translate(0%, -100%);
}

#collectingObstacle1 {
    width: 60px;
    height: 60px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/eggIngredient.png');
    background-size: cover;
    position: relative;
    top: 500px;
    left: 500px;
    transform: translate(0%, -100%);

    animation: collectingObstacleAni 1.5s infinite linear;
}

@keyframes collectingObstacleAni {
    0% {top: -150px};
    100% {top: 500px};
}

.clickDragGameScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
    
    background-image: url('https://kwong09.github.io/puppy-party/assets/giftBackground.png');
    background-size: cover;
    height: 500px;
    width: 800px;
}

#giftBasket {
    width: 300px;
    height: 300px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/giftBox1.png');
    background-size: cover;
    position: relative;
    top: 170px;
    left: 100px;
}

#giftItem1, #giftItem2, #giftItem3, #giftItem4, #giftItem5 {
    width: 90px;
    height: 90px;
    position: absolute;
    cursor: not-allowed;
    background-size: cover;
}

#giftItem1 {
    top: 150px;
    left: 560px;
    cursor: grab;
    background-image: url('https://kwong09.github.io/puppy-party/assets/gift1.png');

}

#giftItem2 {
    top: 270px;
    left: 560px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/gift2.png');
}

#giftItem3 {
    top: 390px;
    left: 560px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/gift3.png');
}

#giftItem4 {
    top: 200px;
    left: 670px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/gift4.png');
}

#giftItem5 {
    top: 330px;
    left: 670px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/gift5.png');
}




.outfitGameScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
    
    background-image: url('https://kwong09.github.io/puppy-party/assets/outfitBackground.png');
    background-size: cover;
    height: 500px;
    width: 800px;
}

#baseCharacter {
    width: 300px;
    height: 400px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/base.png');
    background-size: cover;
    position: fixed;
    top: 250px;
    left: 400px;
    transform: translate(-50%, -50%);
}

#hatSelection {
    width: 300px;
    height: 400px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/hat1.png');
    background-size: cover;
    position: fixed;
    top: 250px;
    left: 400px;
    transform: translate(-50%, -50%);
}

#outfitSelection {
    width: 300px;
    height: 400px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/shirt1.png');
    background-size: cover;
    position: fixed;
    top: 250px;
    left: 400px;
    transform: translate(-50%, -50%);
}

#hatRight, #hatLeft, #outfitRight, #outfitLeft {
    width: 50px;
    height: 50px;
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    background-size: cover;
}

#hatRight {
    top: 100px;
    left: 600px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/nextButton.png')
}

#hatLeft {
    top: 100px;
    left: 200px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/backButton.png')
}

#outfitRight {
    top: 300px;
    left: 600px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/nextButton.png')
}

#outfitLeft {
    top: 300px;
    left: 200px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/backButton.png')
}

#outfitFinishButton {
    width: 110px;
    height: 110px;
    background-image: url('https://kwong09.github.io/puppy-party/assets/allDoneDog.png');
    background-size: cover;
    position: absolute;
    top: 375px;
    left: 675px;
    cursor: pointer;
}





.instructionsScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
    
    background-image: url('https://kwong09.github.io/puppy-party/assets/outfitInstructions.png');
    background-size: cover;
    height: 500px;
    width: 800px;
}

#nextButton {
    height: 70px;
    width: 70px;
    position: fixed;
    background-color: white;
    left: 720px;
    top: 375px;

    background-image: url('https://kwong09.github.io/puppy-party/assets/nextButton.png');
    background-size: cover;
    cursor: pointer;
}