@import "resets.css";

/* Main */

#wrapper {
    width: 298px;
    height: 598px;
    border: 1px solid #000;
    overflow: hidden;
    position: absolute;
    /* background-color: #fdfce9; */
}
#banner {
    width: 298px;
    height: 598px;
    overflow: hidden;
}

/* Frames */

#bg-canvas, #hand-canvas, #hand-blur, #text1, #text2, #text3, #text4, #abc, #line, #gradient-up, #black-screen, #line, #cta, #click-area {
    position: absolute;
}
#hand-blur, #text1, #text2, #text3, #text4, #abc, #black-screen, #cta, #click-area {
    opacity: 0;
}
#bg-canvas {
    top: 0;
    left: 0;
    /* width: 350px;
    height: 260px; */
    transform-origin: 0 0;
    /* transform: scale(1.3); */
}
.disease {
    top: 7px;
    left: 124px;
    width: 191px;
    height: 191px;
}
#hand-canvas {
    top: 249px;
    left: -280px;
    /* width: 340px;
    height: 370px; */
    transform: rotate(15deg);
}
#hand-blur {
    top: 137px;
    left: -28px;
    width: 340px;
    height: 370px;
    background: url('../img/hand-blur.png') center center no-repeat;
}
#text1 {
    top: 72px;
    left: 46px;
    width: 210px;
    height: 58px;
    background: url('../img/text1.png') center center no-repeat;
}
#text2 {
    top: 52px;
    left: 22px;
    width: 257px;
    height: 85px;
    background: url('../img/text2.png') center center no-repeat;
}
#text3 {
    top: 88px;
    left: 49px;
    width: 202px;
    height: 153px;
    background: url('../img/text3.png') center center no-repeat;
}
#text4 {
    top: 447px;
    left: 65px;
    width: 168px;
    height: 17px;
    background: url('../img/text4.png') center center no-repeat;
}
#abc {
    top: 302px;
    left: 67px;
    width: 168px;
    height: 41px;
    background: url('../img/abc.png') center center no-repeat;
}
#gradient-up {
    top: 0;
    left: 0;
    width: 298px;
    height: 598px;
    background: url('../img/gradient-up.png') center center no-repeat;
}
#black-screen {
    top: 0;
    left: 0;
    width: 298px;
    height: 598px;
    background-color: rgba(0,0,0,.8);
}
#line {
    top: 271px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 1px;
    width: 0;
    background-color: rgba(255,255,255,.2);
}
#cta {
    transform: scale(.1);
    top: 473px;
    left: 66px;
    width: 166px;
    height: 36px;
    border-radius: 5px;
    background: #8dc642 url('../img/cta-text.png') center center no-repeat;
}
#click-area {
    top: 0;
    left: 0;
    width: 298px;
    height: 598px;
    background: rgba(0,0,0,0);
}