*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#fff;
    font-family:'Comic Sans MS', Comic Sans, cursive;
}

/* BLOG SECTION */

.blog-post{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    padding:80px 0;

    background:
    repeating-linear-gradient(
        to bottom,
        #ffffff 0px,
        #ffffff 39px,
        #dce7ff 40px
    );
}

/* RED NOTEBOOK LINE */

.blog-post::before{
    content:"";
    position:absolute;
    top:0;
    left:90px;
    width:2px;
    height:100%;
    background:#ff8d8d;
    z-index:0;
}

/* WATERMARK */

.watermark{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.watermark img{
    position:absolute;
    top:70%;
    /* right:30px; */

    transform:translateY(-50%);

    width:2400px;
    height:auto;

    opacity:0.50;
}
/* BLOG CONTENT */

.blog-content{
    position:relative;
    z-index:2;

    max-width:1100px;
    margin:0 auto;

    padding:0 80px 0 140px;
}

.blog-content h1{
    font-size:52px;
    line-height:1.15;
    color:#111;
    margin-bottom:50px;
    font-weight:400;
}

.blog-content h2{
    font-size:32px;
    line-height:1.3;
    color:#111;

    margin-top:40px;
    margin-bottom:20px;
}

.blog-content p{
    font-size:22px;
    line-height:1.9;
    color:#222;

    margin-bottom:22px;
}

.blog-content ul{
    padding-left:35px;
    margin-top:15px;
}

.blog-content li{
    font-size:22px;
    line-height:1.9;
    color:#222;

    margin-bottom:10px;
}

/* TABLET */

@media(max-width:992px){

    .blog-post::before{
        left:60px;
    }

    .blog-content{
        padding:0 40px 0 100px;
    }

    .blog-content h1{
        font-size:42px;
    }

    .blog-content p,
    .blog-content li{
        font-size:20px;
    }

    .watermark img{
        width:650px;
        opacity:.10;
    }
}

/* MOBILE */

@media(max-width:768px){

    .blog-post{
        padding:50px 0;
    }

    .blog-post::before{
        left:25px;
    }

    .blog-content{
        padding:0 20px 0 45px;
    }

    .blog-content h1{
        font-size:32px;
        line-height:1.2;
        margin-bottom:30px;
    }

    .blog-content h2{
        font-size:24px;
    }

    .blog-content p,
    .blog-content li{
        font-size:17px;
        line-height:1.8;
    }

    .watermark img{
        width:700px;
        left:50%;
        top:50%;

        transform:translate(-20%,-50%);
        opacity:.12;
    }
}

/* SMALL PHONES */

@media(max-width:480px){

    .blog-content{
        padding:0 16px 0 40px;
    }

    .blog-content h1{
        font-size:28px;
    }

    .blog-content p,
    .blog-content li{
        font-size:16px;
    }

    .watermark img{
        width:500px;
        left:50%;
        top:50%;

        transform:translate(-15%,-50%);
        opacity:.10;
    }
}