@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

body{
    background:dimgray;
    font-family:"Arial", monospace;
    color:#222;
    padding:40px 20px;
}

.page{
    max-width:760px;
    margin:auto;
    background:#fffef9;
    position:relative;
    padding:70px 70px 80px;
    box-shadow:
        0 20px 50px rgba(0,0,0,.18),
        0 0 0 1px rgba(0,0,0,.05);
}

/* red notebook margin */
.page::before{
    content:"";
    position:absolute;
    left:60px;
    top:0;
    bottom:0;
    width:2px;
    background:#d86c6c;
}

/* blue ruled lines */
.paper{
    background-image:
        repeating-linear-gradient(
            transparent,
            transparent 31px,
            rgba(120,170,255,.45) 32px
        );
    line-height:32px;
}

.date{
    font-family:"Special Elite", monospace;
    font-size:.9rem;
    color:#666;
    margin-bottom:32px;
}

h1{
    font-family:"Arial", monospace;
    font-size:2rem;
    margin-bottom:32px;
    font-weight:normal;
}

p{
    margin-bottom:32px;
}

a{
    color:#444;
    text-decoration-style:dotted;
}

a:hover{
    color:#000;
}

hr{
    border:none;
    border-top:1px dashed #bbb;
    margin:48px 0;
}

.footer{
    margin-top:48px;
    color:#777;
    font-size:.85rem;
}

/* little notebook holes */

.holes{
    position:absolute;
    left:18px;
    top:0;
    bottom:0;
    width:20px;
}

.holes::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle,#ddd 6px,transparent 7px)
    center 28px/18px 64px repeat-y;
}

@media(max-width:700px){

.page{
    padding:45px 30px 50px;
}

.page::before{
    left:28px;
}

h1{
    font-size:2rem;
}

p{
  font-size:1rem;
}

}