@media all and (min-height: 1px) {

    .wrapper.safe-area {
        padding: 50px 30px 30px 30px;
    }

    .btn-1,
    .btn-2,
    .btn-5,
    .btn-6 {
        width: 210px;
        height: 45px;
    }

    .btn-3,
    .btn-4 {
        width: 110px;
        height: 58px;
    }

    .btn span {
        font-size: 11px;
    }

    .btn-5 span {
        font-size: 11px;
    }

    .header--menu--button {
        top: 14px;
        left: 20px;
        width: 28px;
    }

    .popup--close {
        top: 14px;
        left: 20px;
        width: 28px;
    }

    .close--button,
    .playground--tip--button {
        width: 28px;
        right: 20px;
        top: 14px;
    }

    .neon-h1 {
        font-size: 22px;
        line-height: 28px;
    }

    .outro--slide--text p,
    .intro--slide--text p {
        font-size: 14px;
        line-height: 18px;
    }

    .tutorial--text p,
    .details--block p,
    .timer--block p,
    .mission--result .text {
        font-size: 14px;
        line-height: 18px;
    }

    .details--block .h2 {
        font-size: 16px;
        line-height: 20px;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .swipe-gesture--icon {
        width: 50px;
        margin-bottom: 15px;
    }

    #find--mission .monster--slot {
        height: 150px;
        width: 150px;
        margin-left: -75px;
    }

    #big--mission .monster--slot {
        height: 160px;
        width: 160px;
    }

    #big--mission .trash--slot {
        height: 100px;
        width: 100px;
        margin-left: -50px;
        margin-top: -50px;
    }

    #find--mission .trash--slot {
        margin-left: -60px;
    }

    .monster--slot.correct:before {
        box-shadow: 0 0 100px 80px #FFFF;
    }

    .monster--slot.incorrect:before {
        box-shadow: 0 0 100px 80px #FF005C;
    }

    .mission--result .h2 {
        font-size: 16px;
        line-height: 20px;
        margin-top: 30px;
    }

    .mission--result .mission--score {
        font-size: 80px;
    }

    .safe-area {
        max-width: 100%;
    }

    .container {
        max-height: 480px;
        max-width: 300px;
    }

    .swiper--next {
        right: 10px;
    }

    .swiper--prev {
        left: 10px;
    }

    .swiper--navigation--button {
        width: 25px;
        height: 50px;
    }

    .tutorial--gameplay--image {
        width: 90px;
    }

    .menu--items {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }

    .home--logo--swirl {
        height: 130%;
        width: 130%;
        top: -15%;
        left: -15%;
    }

    .home--logo {
        max-height: 280px;
        height: 100%;
        width: 100%;
        transform: translate(-50%, -50%);
    }
}

@media all and (min-height: 600px) {


    .wrapper.safe-area {
        padding: 70px 30px 30px 30px;
    }

    .btn span {
        font-size: 14px;
    }

    .btn-5 span {
        font-size: 12px;
    }

    .btn-1,
    .btn-2,
    .btn-6 {
        width: 280px;
        height: 58px;
    }

    .btn-3,
    .btn-4 {
        width: 120px;
        height: 60px;
    }

    .header--menu--button {
        top: 20px;
        left: 20px;
        width: 36px;
    }

    .popup--close {
        top: 20px;
        left: 20px;
        width: 36px;
    }

    .close--button {
        top: 20px;
        right: 20px;
        width: 36px;
        height: 36px;
    }

    .close--button,
    .playground--tip--button {
        width: 36px;
        right: 20px;
        top: 20px;
    }

    .neon-h1 {
        font-size: 25px;
        line-height: 32px;
    }

    .outro--slide--text p,
    .intro--slide--text p {
        font-size: 20px;
        line-height: 26px;
    }

    .tutorial--text p,
    .details--block p,
    .timer--block p,
    .mission--result .text {
        font-size: 17px;
        line-height: 20px;
    }

    .details--block .h2 {
        font-size: 25px;
        line-height: 30px;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .swipe-gesture--icon {
        width: 60px;
        margin-bottom: 20px;
    }

    #find--mission .monster--slot {
        height: 230px;
        width: 230px;
        margin-left: -115px;
    }

    #find--mission .trash--slot {
        height: 90px;
        width: 90px;
    }

    #big--mission .trash--slot {
        height: 100px;
        width: 100px;
        margin-left: -50px;
        margin-top: -50px;
    }

    #big--mission .monster--slot {
        height: 180px;
        width: 180px;
    }

    /*.trash--slot.slot-2,*/
    /*.trash--slot.slot-5 {*/
    /*    margin-left: -45px;*/
    /*}*/

    .monster--slot.correct:before {
        box-shadow: 0 0 160px 130px #FFFF;
    }

    .monster--slot.incorrect:before {
        box-shadow: 0 0 160px 130px #FF005C;
    }

    .mission--result .h2 {
        font-size: 20px;
        line-height: 24px;
        margin-top: 30px;
    }

    .mission--result .mission--score {
        font-size: 100px;
    }

    .container {
        max-height: 600px;
        max-width: 340px;
    }

    .home--logo {
        max-height: 300px;
        transform: translate(-50%, -50%);
    }

}

@media all and (min-width: 768px) and (min-height: 768px) {

    .neon-h1 {
        font-size: 40px;
        line-height: 1;
    }

    .home--logo--swirl {
        width: 100%;
        top: 0;
        left: 0;
    }

    .btn-1,
    .btn-2,
    .btn-6 {
        width: 300px;
        height: 62px;
    }

    .btn-3,
    .btn-4 {
        width: 130px;
        height: 65px;
    }

    .btn-1 span,
    .btn-2 span,
    .btn-6 span {
        font-size: 16px;
    }

    .btn-3 span,
    .btn-4 span {
        font-size: 16px;
    }

    .popup--close,
    .header--menu--button {
        width: 40px;
        height: 40px;
        top: 30px;
        left: 30px;
    }

    .close--button,
    .playground--tip--button {
        width: 40px;
        height: 40px;
        top: 30px;
        right: 30px;
    }

    .missions--items {
        max-width: 380px;
    }

    .mission--item--image {
        height: 90px;
        margin-top: -55px;
    }

    .mission--item--title {
        font-size: 15px;
        bottom: 20px;
    }

    .mission--result .mission--score {
        font-size: 160px;
    }

    .missions--progress {
        max-width: 380px;
    }

    .outro--slide--text p, .intro--slide--text p {
        font-size: 26px;
        line-height: 30px;
    }

    .swiper--navigation--button {
        width: 30px;
        height: 60px;
    }

    .safe-area {
        max-width: 1024px;
    }

    .container {
        max-height: 700px;
        max-width: 480px;
    }

    .tutorial--text p, .details--block p, .timer--block p, .mission--result .text {
        font-size: 22px;
        line-height: 26px;
    }

    #find--mission .monster--slot {
        height: 240px;
        width: 240px;
        margin-left: -120px;
        /*margin-top: -120px;*/
        /*top: 50%;*/
        /*left: 50%;*/
    }

    #find--mission .trash--slot {
        height: 100px;
        width: 100px;
    }

    #big--mission .monster--slot {
        height: 220px;
        width: 220px;
    }

    #big--mission .trash--slot {
        height: 120px;
        width: 120px;
        margin-left: -60px;
        margin-top: -60px;
    }

    .finish--spaceman {
        display: block;
        width: 160px;
        height: auto;
        position: absolute;
        top: -20%;
        left: 55%;
        z-index: 0;
    }

    .mission--result .h2 {
        font-size: 30px;
        line-height: 34px;
        margin-top: 70px;
    }

    .missions--progress--score {
        font-size: 25px;
    }

    .missions--progress--title {
        font-size: 15px;
    }

    .final--title {
        font-size: 30px;
        line-height: 1;
        margin-top: 50px;
    }

    .outro--monsters {
        width: 350px;
        height: 350px;
        margin-top: -175px;
        margin-left: -175px;
    }

    .outro--monster {
        width: 170px;
        height: 170px;
    }

    .game-over--result-description {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
    }

    .tutorial--gameplay--image {
        width: 120px;
    }

    .tutorial--monster--image {
        max-width: 400px;
    }

    /*.placement--1 .trash--slot.slot-1, .placement--2 .trash--slot.slot-1, .placement--3 .trash--slot.slot-1 {*/
    /*    left: 50%;*/
    /*    top: 6%;*/
    /*}*/

    /*.placement--1 .trash--slot.slot-2, .placement--2 .trash--slot.slot-2, .placement--3 .trash--slot.slot-2 {*/
    /*    left: 86%;*/
    /*    top: 26.73%;*/
    /*}*/

    /*.placement--1 .trash--slot.slot-3, .placement--2 .trash--slot.slot-3, .placement--3 .trash--slot.slot-3 {*/
    /*    left: 86%;*/
    /*    bottom: 26%;*/
    /*}*/

    /*.placement--1 .trash--slot.slot-4, .placement--2 .trash--slot.slot-4, .placement--3 .trash--slot.slot-4 {*/
    /*    left: 50%;*/
    /*    bottom: 6%;*/
    /*}*/

    /*.placement--1 .trash--slot.slot-5, .placement--2 .trash--slot.slot-5, .placement--3 .trash--slot.slot-5 {*/
    /*    left: 14.75%;*/
    /*    bottom: 26%;*/
    /*}*/

    /*.placement--1 .trash--slot.slot-6, .placement--2 .trash--slot.slot-6, .placement--3 .trash--slot.slot-6 {*/
    /*    left: 14.75%;*/
    /*    bottom: 56.45%;*/
    /*}*/

    .home--logo {
        max-height: 360px;
        transform: translate(-50%, -50%);
    }
}

@media all and (orientation: landscape) {

    .menu--items {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
    }

}