/* COLORS: 463F3A 8A817C BCB8B1 F4F3EE E0AFA0 */
/* ========================================== */

* {
    font-family: "Source Serif 4", serif;
}
body {
    max-width: 1000px;
    margin: 0 auto;
}
h1, h2, h3 {
    font-family: "Montserrat", sans-serif;
}
code {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 500;
    font-size: 0.85rem;
    background-color: #F4F3EE;
    padding: 0.15rem 0.25rem;
    /* color: #463F3A; */
}


/* STYLING THE HEADER AND NAV BAR */
/* ============================== */

header {
    margin-top: 1.5rem;
    height: 4rem;
}
header section {
    display: flex;
}
header .logo {
    height: 3.5rem;
}
header ul {
    padding: 0;
}
header li {
    display: inline-block;
    list-style: none;
    margin-left: 1.5rem;
    padding-bottom: 0.5rem;
}
header a {
    color: #463F3A;
    text-decoration: none;
    font-weight: 400;
    padding-bottom: 0.5rem;
    transition: border-bottom 500ms;
    font-family: "Montserrat", sans-serif;
}


/* STYLING THE <MAIN> */
/* ================== */

main {
    /* padding-top: 1.5rem; */
}
h1 {
    margin-top: 1.5em;
    font-size: 4.5rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.95em;
    margin-bottom: 0.5em;
}
.subtitle {
    font-style: italic;
    font-size: 2rem;
    line-height: 1.15em;
    margin-bottom: 6rem;
}
h2 {
    margin-top: 4.5rem;
}
h3 {
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 3rem;
}
p {
    margin: 1rem 0;
    line-height: 1.5em;
}


/* STYLING THE CODE BLOCK */
/* ====================== */

.code {
    margin: 30px;
    background-color: #f3f2f2;
    width: 40%;
    display: inline-block;
}
.code code {
    padding: 0  ;
}
.code h4 {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 400;
    padding: 5px 10px;
    border-bottom: 1px solid rgb(70, 70, 70);
    background-color: #f9f9fb;
    margin: 0;
}
.code blockquote {
    margin: 0;
    padding: 0 40px 5px 16px;
}
.code .highlight_pink {
    color: #ff1a98;
}
.code_html {
    color: #154285;
    font-weight: bold;
}
.code .highlight_gold {
    color: #ffa206;
    font-weight: bold;
}
.code .content {
    color: #999999;
}
.code .comment {
    color: #a9a9a9;
}

.code pre {
    margin: 0;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;
}


/* DEFINING FLEXBOX CLASSES */
/* ======================== */

.flexbox_container {
    display: flex;
}
.row {
    flex-direction: row;
}
.reverse_row {
    flex-direction: row-reverse;
}
.column {
    flex-direction: column;
}
.reverse_column {
    flex-direction: column-reverse;
}
.flex_end {
    justify-content: end;
}
.flex_center {
    justify-content: center;
}
.space_between {
    justify-content: space-between;
}
.space_around {
    justify-content: space-around;
}
.space_evenly {
    justify-content: space-evenly;
}
.flex_wrap {
    flex-wrap: wrap;
}
.reverse_wrap {
    flex-wrap: wrap-reverse;
}
.align_center {
    align-items: center;
}
.align_end {
    align-items: end;
}
.align_baseline {
    align-items: baseline;
}
.content_start {
    align-content: start;
}
.content_end {
    align-content: end;
}
.content_center {
    align-content: center;
}
.content_between {
    align-content: space-between;
}
.content_evenly {
    align-content: space-evenly;
}
.self_end {
    align-self: flex-end;
}
.self_center {
    align-self: center;
}


/* STYLING THE SECTION FOR PREVIOUS AND NEXT PAGE */
/* ============================================== */

.previous_next {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
}
.previous_next div {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.previous_next p {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-size: 1.75rem;
    color: #BCB8B1;
}
.previous_next img {
    height: 1.5rem;
}
.previous_next a {
    text-decoration: none;
}


/* STYLING THE FOOTER */
/* ------------------ */

footer {
    height: 8rem;
}