html {
    font-size: clamp(16.25px, calc(11px + 1.2vw), 20px);
    display: flex;
    justify-content: safe center;
    /* align-items: safe center; */
}

body {
    background-color: black;
    color: white;
    font-family: 'Manrope';
    font-weight: 300;
    overflow-y: scroll;
}

.hack-image {
    max-width: 0%;
}

.site-padding {
    padding: 20px;
}

.border-right {
    border-right: 1px solid white;
}

.border-left {
    border-left: 1px solid white;
}

.border-head {
    border-top: 1px solid white;
}

.border-tail {
    border-bottom: 1px solid white;
}

.main-container {
    border: 1px solid white;
    min-width: 23.9rem;
    max-width: 58rem;
    margin-bottom: 9rem;
}

.nullwave {
    line-height: 4rem;
    font-family: 'TiltPrism';
    font-size: 3.5rem;
    font-variation-settings: 'HROT' -30, 'VROT' -28;
    transition: font-variation-settings 0.9s ease;
}

.nullwave:hover {
    font-variation-settings: 'HROT' -30, 'VROT' 22;
}

.variable-manrope {
    transition: font-variation-settings 0.7s ease;
}

.variable-manrope:hover {
    font-variation-settings: 'wght' 500;
}

.header-link {
    font-size: 1.2rem;
    font-variation-settings: 'wght' 300;
    height: 2.5rem;
    line-height: 2.5rem;
}

.article {
    padding-top: 0.9rem;
    padding-bottom: 0.7rem;
    text-align: center;
}

.article-thumbnail {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    max-width: 100%;
    max-height: 26rem;
}

.article-thumbnail-small {
    align-items: start;
    max-width: 100%;
    /* min-height: 105px; */
    min-width: 186.75px;
    padding: 0;
    margin: 0;
}

.article-body {
    padding: clamp(25.3px, calc(0.75rem + 3vw), 50px);
    padding-top: clamp(4.366px, 1vw, 0.3rem);
    padding-bottom: 0.5rem;
    line-height: clamp(27.47px, calc(1.65rem + 0.15vw), 34.81px);
    /* line-height: clamp(28px, calc(1.7rem + 0.15vw), 38px); */
    font-size: clamp(16.5px, calc(0.949rem + 0.25vw), 22px);
    word-spacing: 1px;
}

.article-screenshot {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    max-width: 100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.article-title {
    margin-top: 0.15em;
    font-size: clamp(22.4px, calc(0.7rem + 2.5vw), 39px);
    font-family: 'Manrope';
    font-variation-settings: 'wght' 300;
}

.article-author {
    font-size: clamp(17px, calc(0.5rem + 2vw), 30px);
    padding-left: 1em;
    padding-right: 1em;
    margin-top: -0.3em;
    margin-bottom: -0.1em;
    font-variation-settings: 'wght' 300;
}

.line {
    border-bottom: 1px solid white;
    margin: 2rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.author {
    font-size: 1.5rem;
    margin-top: -0.75rem;
    padding-left: 1em;
    padding-right: 1em;
    font-weight: 100;
    font-variation-settings: 'wght' 300;
}

.title {
    font-size: 2.25rem;
    font-weight: 500;
    margin: 0.9rem;
    line-height: 2.5rem;
}

.article-link {
    font-variation-settings: 'wght' 300;
}

.article-date {
    margin-top: -0.05rem;
    font-size: 0.75em;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.essays {
    text-align: left;
    padding: clamp(7.65px, calc(1.7vw), 20.666px);
}

.essays-title {
    font-size: clamp(17.325px, calc(4.5vw - 2.925px), 51.825px);
    padding-top: 0.05em;
    line-height: 1em;
    font-family: 'Manrope';
    font-variation-settings: 'wght' 400;
}

.essays-author {
    font-size: clamp(10.395px, calc(2.7vw - 1.755px), 31.095px);
    font-family: 'Manrope';
    font-variation-settings: 'wght' 300;
}

.essays-quote {
    padding-top: 0.7em;
    font-size: clamp(10.395px, calc(2.7vw - 1.755px), 31.095px);
    font-family: 'Manrope';
    font-variation-settings: 'wght' 300;
}

.creators {
    text-align: left;
    padding: clamp(7.65px, calc(1.7vw - 1.105px), 20.666px);
    padding-left: clamp(11.183px, calc(3vw - 1.95px), 34.5833px);
}

.creator-name {
    font-size: clamp(18.65px, calc(5vw - 3.25px), 57.7px);
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    font-family: 'Manrope';
    font-variation-settings: 'wght' 400;
    line-height: clamp(16.78px, 0.9em, 51.7667px);
}

.creator-details {
    font-size: clamp(11.183px, calc(3vw - 1.95px), 34.5833px);
    padding-top: clamp(13.14pxpx, 0.05em, 2.8733px);
    font-family: 'Manrope';
    font-variation-settings: 'wght' 400;
    line-height: 1.2em;
}

.creator-quote {
    padding-top: 0.5em;
    font-size: clamp(10.395px, calc(2.7vw - 1.755px), 31.1617px);
    font-family: 'Manrope';
    font-variation-settings: 'wght' 300;
}

.creator-biography {
    margin-bottom: 0px;
}

#personal-page-image {
    max-width: 21rem;
}

.creator-thumbnail-small {
    border-right: solid;
    border-color: white;
    border-width: 1px;
    max-width: 100%;
    padding: 0;
    /* margin: clamp(1px, calc(2vw - 1.3px), 23px); */
}

.creator-image-unstacked {
    float: left;
    max-width: 100%;
    margin-right: 1.5rem;
}

.creator-image-stacked {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

@font-face {
    font-family: 'Manrope';
    src: url('fonts/Manrope[wght].woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'TiltPrism';
    src: url('fonts/Tilt-Prism.woff2') format('woff2');
    font-style: normal;
}