style.css

:root {
    --codefont: "Jetbrains Mono", monospace;
    --contfont: 'Arimo', sans-serif;
    --contsize: 16px;
    
}

body {
    background: url("assets/bg.jpg");
    font-family: 'Arimo', sans-serif;
    font-size: 16px;
    max-width: 850px;
    margin: auto;
    line-height: 1.6;
}

hr {
    margin: 0px 20px;
}





.myblog {
    font-family: var(--codefont);
    font-size: 64px;
    text-align : center;
    font-weight: 400;
    margin: 10px;
}
.link {
    text-decoration: none;
}
.card {
    margin-bottom: 35px;
    color: black;
    margin: 20px;
}

.cardheader {
    font-size: 22px;
}

.carddesc {
    margin-top: -15px;
}





.arthead {
    /* Article Header */
    margin: 20px;
    font-family: var(--codefont);
    font-size: 38px;
    text-align: center;
    font-weight: 400;
    margin: 10px;
}

/* For the code */
code,
pre,
blockquote {
  background: #f2f2f2;
}
pre,
blockquote {
  border-left: 2px solid #28a5da !important; 
  border: 1px solid transparent;
}
blockquote {
    padding-left: 10px;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
  font-family: var(--codefont);
}

pre {padding: 1em;}

blockquote:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05);
}

.back {
    /* For the back button in article */
    font-family: var(--contfont);
    margin: 20px;
    text-decoration: none;
}
.options {
    text-align: center;
    margin: auto;
    font-family: var(--contfont);
}


img {max-width: 200px;}

h1 {font-size: 32px;}


/* For dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
    body {
        background: #2E3440;
        color: #f2f2f2;
    }
    pre, code, blockquote {
        background-color: #15202b;
    }
    img {
        filter: grayscale(40%);
    }
}
/* For printer */
@media print {
    .back {
        display: none;
    }
}