:root {
    --font-desktop-big: 150px;
    --font-desktop-medium: 50px;
    --font-mobile-big: 90px;
    --font-mobile-medium: 51px;
    --line-height-desktop: 58px;
    --line-height-mobile: 72px;
    --margin-left-desktop: 25px;
    --margin-left-mobile: 3px;
    --color1: rgba(222, 219, 239, 1);
    --color2: #ff0026;
    --color3: rgba(182, 179, 209, 1);
}

@font-face {
    font-family: "Lawrence Regular";
    src: url("Lawrence-Regular.woff2");
}

html {
    height: 100%;
}

body {
    height: 100%;
    font-family: sans-serif;
    letter-spacing: -1px;
    margin: 0;
    margin-left: var(--margin-left-desktop);
    -webkit-font-smoothing: antialiased;
}

p {
    font-size: 1.2rem;
}

a {
    color: black;
}

a:hover {
    color: red;
}

a:visited {
    color: inherit;
}

canvas {
    width: 100%;
    height: 80%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
}

.subpage-canvas {
    position: absolute;
    /* height: 3000px; */
    bottom: auto;
}

#name {
    padding-top: 0.2rem;
    font-size: var(--font-desktop-medium);
    color: transparent;
}

#name a {
    text-decoration: none;
    color: transparent;
}

.leadnav {
    padding-top: 3px;
    font-size: var(--font-desktop-medium);
    color: transparent;
}

.sections {
    margin-top: 60px;
    font-size: var(--font-desktop-big);
    line-height: var(--line-height-desktop);
}

.sections a {
    text-decoration: none;
    color: transparent;
}

.sections a:hover {
    color: transparent;
}

.sections > * {
    margin-bottom: 90px;
}

.writing {
    padding-bottom: 50px;
}

.about figure {
    margin: 0;
}

.about figure img {
    border: 1px solid black;
    padding: 6px;
    max-width: 95%;
}

.links p {
    padding-left: 6rem;
}

.pad-left {
    padding-left: 6rem;
}

.max-width {
    max-width: 600px;
}

.blog {
    padding-bottom: 50px;
}

.blog p {
    letter-spacing: -0.5px;
    max-width: 700px;
    /* line-height: 1.3rem; */
    font-family: serif;
    font-size: 1.4rem;
    -webkit-font-smoothing: auto;
}

hr {
    width: 6rem;
    text-align: left;
    margin-left: 0;
}

h2, h3 {
    font-weight: 500;
}

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

canvas {
    width: 100%;
    height: 80%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
}

@media screen and (max-width: 450px) {

    body {
        margin-left: var(--margin-left-mobile);
    }

    #name {
        font-size: var(--font-mobile-medium);
    }

    .sections {
        margin-top: 26px;
        font-size: var(--font-mobile-big);
        line-height: var(--line-height-mobile);
    }

    .sections > * {
        margin-bottom: 28px;
    }

}