body {
    background: #0F0F0F;
    color: #ebebeb;
    font-size: clamp(16px, 1vw, 1em);
    font-family: system-ui;
    margin: 5em auto 0 auto;
    padding: 0 10px;
    max-width: 700px;
    position: relative;
}


/* THEME MODE TOGGLER BUTTON */
#toggle {
    margin-top: -2em;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: none;
    font-size: 2em;
}

.homeLink {
    margin-top: -3em;
    position: absolute;
    top: 0;
    left: 10px;
    color: inherit;
    text-decoration: none;
}

/* GENERAL STYLES */
header {
    text-align: left;
    margin-bottom: 1em;
}

header > * {
    margin: 0;
}

img {
    width: 100%;
    border: 1px solid #ebebeb;
}

main h1 {
    margin: 0;
}

.profile {
    margin: 1em 0 1em 0;
    max-width: fit-content;
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    gap: 10px;
}

.profile img {
    border: none;
    clip-path: circle();
    width: 4em;
    height: auto;
}

.profile p {
    margin: 0;
}

.date {
    font-size: 80%;
    color: rgb(192, 192, 192);
}