* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: Overpass-mono;
    src: url('./OverpassMono-Bold.ttf') format('ttf')
  }


:root {
    --nav-bg-color: oklch(43.53% 0.133 141.88);
    --content-bg-color: oklch(22.89% 0.02 258.35);
    --nav-text-color: oklch(86.5% 0.02 258.35);
    --content-text-color: oklch(43.53% 0.133 141.88);
    --text-size: 17px;
    --line-height: 1.25em;
}

.main-div {
    display:flex;
    height: 100vh;
}

.section {
    padding: 32px;
}

#layout-left {
    background-color: var(--nav-bg-color);
    color: var(--nav-text-color);
    width: 20%;
    min-height: 100%;
    font-family: Overpass-mono, monospace;
    text-align: right;
    padding-right: 32px;
    padding-top: var(--line-height);
    font-size: var(--text-size);

}

#layout-right {
    background-color: var(--content-bg-color);
    color: var(--content-text-color);
    height: 100%;
    min-width:80%;
    padding-left: 32px ;
    align-self: stretch;
    font-family: Overpass-mono, monospace;

}

#content-left {
    padding:0px;
    list-style-type: none;

}

#content-right {
    padding:0px;
    align-items: center;
    max-width: 60rem;
    margin-right: 32px;

}

.headshot {
    border-radius: 50%;
    display: block;
    margin-top: 32px;
    margin-bottom: 32px;
    margin-left: auto;
    margin-right: auto;
}

.outside-links {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 32px;
    justify-content: space-between;
    width: auto;
    display: flex;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.social-links {
    color: var(--content-text-color);
}

.content-text {
    color: var(--nav-text-color)
}

a {
	color: var(--nav-text-color);
	text-decoration: none

}

a.link {
    color: var(--content-text-color)
}

ul {
	list-style-type: none;
	line-height: var(--line-height)
}

li {
    margin-bottom: 3px;
}

p {
    margin-bottom: 32px;
}

h1 {
    font-weight: 800;
    font-size: var(--text-size);
    margin-right: 0;
    margin-left: 0;
    line-height: var(--line-height);
}

#bulleted-list {
    list-style-type: square;
    list-style-position: inside;
    padding-left: 30px;
}