/* Layout */

.small-only {
  display: initial;
}

.large-only { 
    display: none; 
}

.wrapper { 
    flex-direction: column;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

main {
    grid-row: auto;
}

.sidebar {
    height: auto;
    position: static;
}

.name {
    order: 0;
    font-size: 2.8rem;
}

.tagline {
    order: 1;
    font-size: 1.3rem;
}

body {
    padding-inline: 1rem;
}

.site-nav {
    display: none;
}

.sidebar footer{
    order: 3;
    margin-top: 0.75rem;   
    padding-bottom: 1.5rem;
}

nav a {
    display: block; 
    padding: .5rem 0; 
}

.catchphrase {
    order: 2;
    max-inline-size: 35ch;
}

.box {
    padding: 1rem;
    margin-inline: 0;
    max-width: 100%;
}

h2.small-only {
    padding: 4rem 2rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #c2c2c2
}

#about {
    padding-top: clamp(2rem, 5vw, 4rem)
}

#about p:first-of-type {
    margin-top: -3rem;
}

/* Spacing Tweaks */

:root { 
    --mobile-gutter: 1rem; 
}
body { 
    padding-inline: var(--mobile-gutter);
}

main { 
    padding-inline: 0; 
}
.content { 
    padding-inline: 0; 
}

h2.small-only { 
    padding: 2rem 0; 
}