body {
    font-family:"Comic Sans MS", "Comic Sans", monospace;
    background:url("brb bg.png");
    margin:0;
    image-rendering: optimizeQuality;
}
.decor {
    position: relative;
    pointer-events: none;
}
.static {
    display:block;
    width:100%;
    height:auto;
}
.content img {
    opacity:90%;
}
span {
    opacity:0;
}
@media only screen and (max-width: 810px) {
    .pencil {
        display:block;
        position: absolute;
        top: 19%;
        left: -10%;
        width: 30%;
        height: auto;
        z-index:1;
    }
    .overlay {
        display:none;
    }
    .center {
        position: fixed;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width:75%
    }
    .container {
        transform:rotate(-2deg);
        background:url("brb content bg.png");
        background-color:white;
        background-size:cover;
        background-position-x:90%;
        background-repeat:no-repeat;
        padding:6% 3%;
    }
    .content{
        width:100%;
        text-align: center;
        vertical-align:middle;
    }
    .content.first {
        max-width:100%;
        margin-top:3%;
    }
    .content.first.left {
        display:none;
    }
    .content.first img {
        width:70%;
        vertical-align: middle;
        display:inline-block;
    }
    .content.second {
        max-width:100%;
    }
    .content.second img {
        width:50%;
    }
    .content p{
        margin:0;
        font-size:2.5375vw!important;
    }
    .content h1{
        margin:0;
        font-size:2.9vw!important;
    }
}
@media only screen and (min-width:811px) and (max-width: 1200px) {
    .pencil {
        display:block;
        position: absolute;
        top: 58%;
        left: -7%;
        width: 23%;
        height: auto;
        z-index:1;
    }
    .overlay {
        max-width:274%;
        display:block;
        position:absolute;
        top:1631%;
        left:-58%;
        z-index:1;
    }
    .center {
        position: fixed;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width:55%
    }
    .container {
        transform:rotate(-2deg);
        background:url("brb content bg.png");
        background-color:white;
        background-size:cover;
        background-position-x:90%;
        background-repeat:no-repeat;
        padding:6% 3%;
    }
    .content{
        width:100%;
        text-align: center;
        vertical-align:middle;
    }
    .content.first {
        max-width:100%;
        margin-top:3%;
    }
    .content.first.left {
        display:none;
    }
    .content.first img {
        width:60%;
        vertical-align: middle;
        display:inline-block;
    }
    .content.second {
        max-width:100%;
    }
    .content.second img {
        width:40%;
    }
    .content p{
        margin:0;
        font-size:1.5375vw!important;
    }
    .content h1{
        margin:0;
        font-size:1.9vw!important;
    }
}
@media only screen and (min-width: 1201px) {
    .pencil {
        display:block;
        position: absolute;
        top: -107%;
        left: -6%;
        width: 15%;
        height: auto;
        z-index:1;
    }
    .overlay {
        max-width:200%;
        display:block;
        position:absolute;
        top:1500%;
        left:-45%;
        z-index:1;
    }
    .center {
        position: fixed;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width:55%
    }
    .container {
        transform:translate(0, -5%) rotate(-2deg);
        background:url("brb content bg.png");
        background-color:white;
        background-size:100% 100%;
        background-repeat:no-repeat;
        background-position:center center;
        padding:6% 3%;
    }
    .content{
        width:100%;
        display:inline-block;
        text-align: center;
        vertical-align:middle;
    }
    .content.first {
        max-width:51%;
    }
    .content.first.bottom {
        display:none;
    }
    .content.first img {
        width:100%;
        vertical-align: middle;
        display:inline-block;
    }
    .content.second {
        margin-left:1%;
        max-width:48%;
    }
    .content.second img {
        width:80%;
    }
    .content p{
        margin:0;
        font-size:0.9375vw!important;
    }
    .content h1{
        margin:0;
        font-size:1.3vw!important;
    }
}