:root {
    --main-bg-color: #EDD4B2;
    --main-text-color: #333333;
    --highlight-color1: #913a6a;
    --highlight-color2: #913a6a;
    --shadow-color: #f2bc51;
}

* {
    margin: 0em;
    padding: 0em;
}

body {
    font-family: 'Rethink Sans', sans-serif;
    background-color: var(--main-bg-color);
}

p { color: var(--main-text-color); }
h1 { color: var(--highlight-color1); }
h2 { color: var(--main-text-color); }
h3 { color: var(--main-text-color); }
a { color: var(--highlight-color1); }
a:hover { color: var(--highlight-color2); }

h1, h2, h3 { font-weight: 600; }

h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

#main-content {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

#badge {
    height: 5rem;
    width: auto;
    position: absolute;
}

@media (max-width: 640px) {
    #badge {
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
    }
    #main-content { margin-top: 1.5rem; }
}

#name, #location {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#name {
    font-size: 2rem;
    line-height: 1.35;
}

#location {
    font-size: 1.25rem;
    line-height: 1.65;
}

#mailbox { margin-top: 1.5rem; }
#mailbox p { text-align: center; }
span.mail::after {
	content: "mnbramson@gmail.com";
}
span.bar {
  margin-left: 1rem;
  margin-right: 1rem;
}

#about { margin-top: 2rem; }
#about p { line-height: 1.25; }

#stuff { margin-top: 1.5rem; }

#stuff h3 {
    color: var(--highlight-color1);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.stuff-row {
    display: grid;
    grid-template-columns: 1fr 6fr;
}

.stuff-row div:nth-child(1) { padding-top: 0.5rem; }
.stuff-row div:nth-child(2) p { margin-bottom: 0.375rem; }
@media (max-width: 640px) {
    .stuff-row div:nth-child(1) { padding-right: 0.75rem; }
}

#moon {
    max-height: 3rem;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#moon_left {
    stroke: var(--highlight-color2);
    fill: var(--highlight-color2);
}

#moon_right {
    stroke: var(--highlight-color2);
    fill: none;
}

#moon:hover #moon_right {
    stroke: var(--shadow-color);
    fill: var(--highlight-color2);
}
#moon:hover #moon_left {
    stroke: var(--shadow-color);
    fill: var(--shadow-color);
}

#bridge {
    display: block;
    width: 75%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.bridge-main { fill: var(--highlight-color2); }
.bridge-troll { fill: none }
#bridge:hover .bridge-main { fill: var(--shadow-color); }
#bridge:hover .bridge-troll { fill: var(--highlight-color2); }

#atgc p {
    font-family: 'Courier Prime', monospace;
    font-size: 1.5rem;
    line-height: 0.75;
    color: var(--highlight-color2);
    text-align: center;
}

#atgc:hover .atgc-color { color: var(--shadow-color); }