.game-panel{
    background-image: url('../media/bathroom-scene.png');
    background-repeat: no-repeat;
}

.page-title-panel div {
    height: 150px;
    width: 430px;
    background-size: 100% 90%;
}
.page-title-panel div h2{
    line-height: 5.3;
}

ul#items, ul#bathroom{
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}

ul#bathroom li, ul#items li{
    position: relative;
    display: inline-block;
}

.checkmark-active{
    display: initial!important;
}

@media(max-width: 599px){
    #hns-success{
        display: block;
        margin: 0 auto;
        position: relative;
        background: url('../media/PopUp-Congrats-6@2x.png') no-repeat center center;
        height: 100vh;
        width: 100vw;
        animation-duration: 1s;
        animation-name: slidein;
    }

    #hns-success a{
        position: relative;
        height: 43px;
        width: 233px;
        display: block;
    }

    #hns-success a:nth-child(1){
        top: calc(50vh - -65.5px);
        left: calc(50vw - 117px);
    }

    #hns-success a:nth-child(2){
        top: calc(50vh - -73.5px);
        left: calc(50vw - 117px);
    }
    ul#bathroom{
        height: 180px;
        padding: 0;
    }

    ul#bathroom li:nth-child(1){
        height: 20px;
        width: 30px;
        top: 105px;
        left: 144px;
    }
    ul#bathroom li:nth-child(2){
        height: 25px;
        width: 20px;
        top: 77px;
        left: -21px;
    }
    ul#bathroom li:nth-child(3){
        height: 15px;
        width: 10px;
        top: 130px;
        left: 56px;
        transform: rotate(125deg);
    }
    ul#bathroom li:nth-child(4){
        height: 30px;
        width: 20px;
        top: 35px;
        left: -55px;
    }
    ul#bathroom li:nth-child(5){
        height: 30px;
        width: 20px;
        top: 0;
        left: -81px;
    }
    ul#bathroom li:nth-child(6){
        height: 40px;
        width: 20px;
        top: 65px;
        left: -88px;
    }
    ul#bathroom li:nth-child(7){
        height: 40px;
        width: 20px;
        top: 56px;
        left: 132px;
    }
    ul#bathroom li:nth-child(8){
        height: 15px;
        width: 15px;
        top: 59px;
        left: 95px;
    }

    ul#items{
        height: 28px;
        top: 7px;
        left: -10px;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        justify-content: space-around;
    }

    ul#items li img{
        position: absolute;
        top: 0;
        left: 0;
    }

    ul#items li img.checkmark{
        display: none;
        height: 25px;
        top: 0;
        left: 0;
    }

    .search-items{
        height: 80px;
    }

    #soap {
        height: 25px;
    }

    #candles{
        height: 25px;
    }

    #comb{
        height: 25px;
    }

    #deoderant{
        height: 25px;
    }

    #toothpaste{
        height: 25px;
    }

    #vitamins{
        height: 25px;
    }

    #shampoo{
        height: 25px;
    }

    #meds{
        height: 25px;
    }
}

@media(min-width: 600px){
    #hns-success{
        display: block;
        margin: 0 auto;
        position: relative;
        background: url('../media/PopUp-Congrats-6@2x.png') no-repeat center center;
        height: 100vh;
        width: 100vw;
        animation-duration: 1s;
        animation-name: slidein;
    }

    #hns-success a{
        position: relative;
        height: 43px;
        width: 233px;
        display: block;
    }

    #hns-success a:nth-child(1){
        top: calc(50vh - -65.5px);
        left: calc(50vw - 117px);
    }

    #hns-success a:nth-child(2){
        top: calc(50vh - -73.5px);
        left: calc(50vw - 117px);
    }
    ul#bathroom{
        height: 334px;
        padding: 0;
    }

    ul#bathroom li:nth-child(1){
        height: 33px;
        width: 60px;
        top: 200px;
        left: 264px;
    }
    ul#bathroom li:nth-child(2){
        height: 65px;
        width: 61px;
        top: 153px;
        left: -60px;
    }
    ul#bathroom li:nth-child(3){
        height: 57px;
        width: 19px;
        top: 257px;
        left: 89px;
        transform: rotate(125deg);
    }
    ul#bathroom li:nth-child(4){
        height: 64px;
        width: 46px;
        top: 69px;
        left: -122px;
    }
    ul#bathroom li:nth-child(5){
        height: 60px;
        width: 46px;
        top: 0px;
        left: -175px;
    }
    ul#bathroom li:nth-child(6){
        height: 76px;
        width: 33px;
        top: 137px;
        left: -191px;
    }
    ul#bathroom li:nth-child(7){
        height: 41px;
        width: 22px;
        top: 106px;
        left: 228px;
    }
    ul#bathroom li:nth-child(8){
        height: 35px;
        width: 35px;
        top: 116px;
        left: 171px;
    }

    ul#items{
        height: 69px;
        top: 7px;
        left: -24px;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        justify-content: space-around;
    }

    ul#items li img{
        position: absolute;
        top: 6px;
        left: 0;
    }

    ul#items li img.checkmark{
        display: none;
        height: 40px;
        top: 12px;
        left: 6px;
    }

    .search-items{
        height: 80px;
    }

    #soap {
        height: 52px;
    }

    #candles{
        height: 52px;
    }

    #comb{
        height: 52px;
    }

    #deoderant{
        height: 52px;
    }

    #toothpaste{
        height: 52px;
    }

    #vitamins{
        height: 52px;
    }

    #shampoo{
        height: 52px;
    }

    #meds{
        height: 52px;
    }
}

@media(min-width: 900px) {
    ul#bathroom{
        height: 500px;
        padding: 0;
    }

    ul#bathroom li:nth-child(1){
        height: 33px;
        width: 60px;
        top: 311px;
        left: 411px;
    }
    ul#bathroom li:nth-child(2){
        height: 65px;
        width: 61px;
        top: 229px;
        left: -24px;
    }
    ul#bathroom li:nth-child(3){
        height: 57px;
        width: 19px;
        top: 390px;
        left: 200px;
        transform: rotate(125deg);
    }
    ul#bathroom li:nth-child(4){
        height: 64px;
        width: 46px;
        top: 131px;
        left: -100px;
    }
    ul#bathroom li:nth-child(5){
        height: 60px;
        width: 46px;
        top: 30px;
        left: -152px;
    }
    ul#bathroom li:nth-child(6){
        height: 76px;
        width: 33px;
        top: 220px;
        left: -159px;
    }
    ul#bathroom li:nth-child(7){
        height: 41px;
        width: 22px;
        top: 167px;
        left: 493px;
    }
    ul#bathroom li:nth-child(8){
        height: 35px;
        width: 35px;
        top: 203px;
        left: 427px;
    }

    ul#items{
        height: 90px;
        top: 12px;
        left: -42px;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        justify-content: space-around;
    }

    ul#items li img{
        position: absolute;
        top: 6px;
        left: 0;
    }

    ul#items li img.checkmark{
        display: none;
        height: 50px;
        top: 22px;
        left: 15px;
    }

    .search-items{
        height: 80px;
    }
}

@media(min-width: 1200px) {
    .game-panel {
        height: 698px;
        width: 1000px;
        border-radius: 35px;
    }

    ul#bathroom{
        height: 590px;
        padding: 0;
    }

    ul#bathroom li:nth-child(1){
        height: 33px;
        width: 60px;
        top: 391px;
        left: 476px;
    }
    ul#bathroom li:nth-child(2){
        height: 72px;
        width: 67px;
        top: 297px;
        left: -15px;
    }
    ul#bathroom li:nth-child(3){
        height: 61px;
        width: 25px;
        top: 483px;
        left: 246px;
        transform: rotate(125deg);
    }
    ul#bathroom li:nth-child(4){
        height: 64px;
        width: 46px;
        top: 147px;
        left: -101px;
    }
    ul#bathroom li:nth-child(5){
        height: 60px;
        width: 49px;
        top: 30px;
        left: -155px;
    }
    ul#bathroom li:nth-child(6){
        height: 76px;
        width: 39px;
        top: 265px;
        left: -159px;
    }
    ul#bathroom li:nth-child(7){
        height: 41px;
        width: 30px;
        top: 207px;
        left: 593px;
    }
    ul#bathroom li:nth-child(8){
        height: 41px;
        width: 35px;
        top: 248px;
        left: 517px;
    }

    ul#items{
        height: 90px;
        top: 12px;
        left: -42px;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        justify-content: space-around;
    }

    ul#items li img{
        position: absolute;
        top: 6px;
        left: 0;
    }

    ul#items li img.checkmark{
        display: none;
        height: 50px;
        top: 22px;
        left: 15px;
    }
}