html {
    background: linear-gradient(skyblue 30%, white 70%, white 100%);
}


/* ========= Question Container ========= */
.question-container {
    display: flex;
    justify-content: space-around;
    color: white;
    text-shadow: 2px 2px 2px black;
    margin-top: 16%;
}

h3 {
    margin-block-end: 0;
    margin-block-start: 0;
}

/* ========= Start Screen ========== */
#startScreen {
    padding-top: 80px;
}

.character-start {
    height: 635px;
    width: 480px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -922px 641px;
    margin: auto;
    margin-bottom: 80px;
}

.character-win {
    height: 669px;
    width: 460px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -922px 1318px;
}

.character-lose {
    height: 520px;
    width: 370px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -1672px 2046px;
}

/* ========= Play Game ========== */
.character-container {
    display: flex;
    justify-content: center;
    height: 550px;
}

.center {
    margin: 0 auto;
}

.center-character {
    position: relative;
    width: 500px;
}

.character {
    position: relative;
    margin: 190px 250px 0 130px;
    height: 504px;
    width: 280px;
    background: url(../../assets/images/HiLo_RC_1000_texture_1.png) 0px -1458px;
    z-index: 5;
    transform: scale(0.9);
}

.character1 {
    height: 724px;
    width: 280px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) 297px 1203px;
    margin: -18px 250px 0 133px;
}

.character2 {
    height: 724px;
    width: 344px;
    margin: -19px 250px 0 127px;
    background: url(../../assets/images/HiLo_RC_1000_texture_1.png) 0px 0px;
}

.character3 {
    height: 724px;
    width: 344px;
    margin: -19px 250px 0 126px;
    background: url(../../assets/images/HiLo_RC_1000_texture_1.png) -347px 0px;
}

.character4 {
    margin: -16px 250px 0 126px;
    background: url(../../assets/images/HiLo_RC_1000_texture_1.png) -347px -730px;
}

.character5{
    background: url(../../assets/images/HiLo_RC_1000_texture_1.png) -1px -730px;
    margin: -17px 250px 0 128px;
    animation: shortfly 3s ease-in-out infinite backwards;
}

.character6{
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -1394px -846px;
    width: 350px;
    margin: -17px 250px 0 121px;
}

.character7{
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -1236px -1px;
    width: 430px;
    margin: -18px 250px 0 45px;
    animation: mediumfly 3s ease-in-out infinite backwards;
}

.character8{
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) 14px -1033px;
    width: 469px;
    margin: -18px 250px 0 6px;
}

.character9{
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -462px -1033px;
    width: 455px;
    margin: -18px 250px 0 21px;
    animation: bigfly 3s ease-in-out infinite backwards;
}

.character10{
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -778px 0px;
    width: 455px;
    height: 692px;
    margin: -18px 250px 0 16px;
    animation: flyaway 3s ease-in backwards;
}


/* ======== Start Screen Buttons ========== */
.start {
    height: 99px;
    width: 275px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -434px 287px;
    margin: auto;
    margin-top: 25px;
}

.play-again {
    height: 99px;
    width: 275px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -1385px 1319px;
    margin-top: -40px;
}

.try-again {
    height: 319px;
    width: 375px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -1670px 1523px;
    margin: auto;
    margin-top: -55px;
    transform: scale(0.8);
}

/* ====== Game Buttons ====== */
.btn-container {
    display: flex;
    justify-content: center;
    margin-top: 130px;
}

.answer1, .answer2, .playsound-again{
    margin: 15px;
}

.answer1 {
    height: 129px;
    width: 85px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) 1270px 1350px;
}

.answer2 {
    height: 129px;
    width: 84px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -434px 146px;
}

.playsound-again {
    height: 255px;
    width: 167px;
    background: url(../../assets/images/HiLo_RC_1000_texture_0.png) -263px 285px;
}


@keyframes shortfly {
    35% {
        transform: scale(0.9) translate(0px, -20px);
    }
}

@keyframes mediumfly {
    35% {
        transform: scale(0.9) translate(0px, -40px);
    }
}

@keyframes bigfly {
    50% {
        transform: scale(0.9) translate(0px, -80px);
    }
}

@keyframes flyaway {
    100% {
        transform: scale(0.9) translate(0px, -1000px);
    }
}