html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    background-color: #DF2A52;
    background-image: linear-gradient(-90deg, #DF2A52 0%, #E54B4B 97%);
}

@media all and (min-width: 590px) and (min-height: 90px){
    .banner {
        display: block;
        position: absolute;
        height: 100px;
        width: 100%;
        top: 50%;
        margin-top: -50px;
    }
    .dog {
        width: 161px;
        height: 110px;
        display: block;
        position: absolute;
        left: -17px;
        bottom: -24px;
        background: url('../images/dog.png');
        background-size: 100%;
    }
    .bubble {
        display: block;
        width: 342px;
        height: 233px;
        background: url('../images/bubble-2.png');
        background-size: 100%;
        left: 21.5%;
        top: -89px;
        position: absolute;
    }
    .bubble .slogan {
        display: block;
        width: 291px;
        height: 68px;
        background: url('../images/text-1.png');
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        top: 95px;
        left: 44px;
    }
    .logo {
        width: 108px;
        height: 78px;
        display: block;
        position: absolute;
        top: 11px;
        right: 22px;
    }
    .logo .icon {
        width: 44px;
        height: 44px;
        background: url('../images/logo-1.png');
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        top: 0px;
        left: 32px;
    }
    .logo .newsdog {
        width: 108px;
        height: 32px;
        display: block;
        bottom: 0;
        left: 0;
        background: url('../images/logo-2.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
    }
}
@media all and (min-width: 320px) and (max-width: 589px) and (max-height: 500px){
    .banner {
        display: block;
        position: absolute;
        height: 280px;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -140px;
    }
    .dog {
        display: none;
    }
    .bubble {
        display: block;
        width: 378px;
        height: 344px;
        background: url(../images/bubble-1.png);
        background-size: 100%;
        left: 50%;
        bottom: 75px;
        margin-left: -180px;
        position: absolute;
    }
    .bubble .slogan {
        display: block;
        width: 308px;
        height: 72px;
        background: url(../images/text-1.png);
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        bottom: 119px;
        left: 31px;
    }
    .logo {
        width: 206px;
        height: 44px;
        display: block;
        position: absolute;
        bottom: 18px;
        left: 50%;
        margin-left: -103px;
    }
    .logo .icon {
        width: 44px;
        height: 44px;
        background: url('../images/logo-1.png');
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        top: 0px;
        left: 0px;
    }
    .logo .newsdog {
        width: 149px;
        height: 44px;
        display: block;
        bottom: 0;
        right: 0;
        background: url('../images/logo-2.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
    }
}
@media all and (max-width: 319px) and (min-height: 500px){
    body{
        background-color: rgb(230, 0, 51);
        background-image: -webkit-radial-gradient( 50% 10%, circle closest-side, #E54B4B 0%, #DF2A52 1000%);
    }
    .banner {
        display: block;
        position: absolute;
        height: 100%;
        width: 160px;
        top: 0;
        left: 50%;
        margin-left: -80px;
    }
    .dog {
        width: 161px;
        height: 110px;
        display: block;
        position: absolute;
        left: -16px;
        bottom: -5px;
        background: url('../images/dog.png');
        background-size: 100%;
        transform: rotate(-11deg);
        -webkit-transform: rotate(-11deg);
        -ms-transform: rotate(-11deg);
        -o-transform: rotate(-11deg);
        -moz-transform: rotate(-11deg);
    }

    .bubble {
        display: block;
        width: 300px;
        height: 299px;
        background: url(../images/bubble-3.png);
        background-size: 100%;
        left: 50%;
        bottom: 23%;
        margin-left: -150px;
        position: absolute;
    }
    .bubble .slogan {
        display: block;
        width: 151px;
        height: 102px;
        background: url(../images/text-2.png);
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        bottom: 119px;
        left: 50%;
        margin-left: -75px;
    }
    .logo {
        width: 90px;
        height: 101px;
        display: block;
        position: absolute;
        top: 28px;
        left: 50%;
        margin-left: -45px;
    }
    .logo .icon {
        width: 70px;
        height: 70px;
        background: url('../images/logo-1.png');
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        top: 0px;
        left: 10px;
    }
    .logo .newsdog {
        width: 90px;
        height: 26px;
        display: block;
        bottom: 0;
        right: 0;
        background: url('../images/logo-2.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
    }
}