body {
    position: relative;
}

main {
    width: 100%;
    box-sizing: border-box;
    padding:  2vh 10vw;
}

h2 {
    color: var(--mid-dark);
    font-weight: 500;
}

section {
    margin-bottom: 3em;
}

.reading-bar {
    width: 0%;
    height: 7px;
    background-color: var(--primary);
    position: fixed;
    top: calc(var(--header-height) - 7px);
    left: 0;
    z-index: 9999;
    transition: width 0.16s ease-out;
}

a {
    color: var(--primary);
    transition: .2s;
}

a:hover {
    color: var(--secondary);
}

.hidden {
    display: none;
}

/* Blog elements */

.header-image {
    max-height: 50vh;
    width: 100%;
    object-fit: cover;
}

.meta-data-date {
    display: flex;
    gap: 2em;
    justify-content: right;
}

.meta-data-date p {
    font-weight: 300;
    font-style: italic;
    font-size: .8em;
}

img {
    margin: 1em auto;
}

img.large {
    max-width: 100%;
    max-height: 80vh;
}

img.medium {
    max-width: 40%;
    max-height: 65vh;
}

img.small {
    max-width: 20%;
    max-height: 55vh;
}

.center {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    display: block;
}

code {
    background-color: var(--mid-dark);
    padding: 2px 8px;
    display: block;
    width: fit-content;
    margin: 6px 0;
    font-family: "PT Mono", system-ui;
    color: var(--light);
}

code:hover {
    background-color: var(--dark);
}

@media screen and (max-width: 600px) {
    img.large {
        max-width: 100%;
        max-height: 100vh;
    }
    
    img.medium {
        max-width: 60%;
        max-height: 85vh;
    }
    
    img.small {
        max-width: 40%;
        max-height: 65vh;
    }
}

@media screen and (max-width: 400px) {
    img.large {
        max-width: 100%;
        max-height: 100vh;
    }
    
    img.medium {
        max-width: 80%;
        max-height: 85vh;
    }
    
    img.small {
        max-width: 60%;
        max-height: 70vh;
    }
}

@media screen and (max-width: 250px) {
    img.large,
    img.medium,
    img.small {
        max-width: 100%;
        max-height: 100vh;
    }
}