:root {
    --color-background: #313244;
    --color-background-header: #45475a;
    --color-text: #cdd6f4;
    --color-accent: #cba6f7;
    --color-link: #89dceb;
    --color-link-hover: #f5e0dc;
}

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

html,
body {
    background-color: var(--color-background);
    color: var(--color-text);
    height: 100%;
    margin: 0;
}

header {
    padding: 3rem;
}

h1 {
    font-family: 'iAWriterDuoS-Bold', 'Courier New', Courier, monospace;
    position: relative;
}

h1::before {
    color: var(--color-accent);
    position: absolute;
    left: -4ch;
    width: 3ch;
    text-align: right;
    font-family: 'Courier New', Courier, monospace;
}

h1::before {
    content: "#";
}

footer {
    color: var(--color-text);
    font-size: 1rem;
    inset: auto 0px 0px;
    padding: 1rem 1.5rem;
    position: fixed;
    text-align: center;
    width: 100%;
    font-family: sans-serif;
    background-color: var(--color-background);
}

a {
    color: var(--color-link);
}

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

.page-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Push content to bottom of viewport */
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.brick-wall-wrapper {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
}

.brick-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 0;
}

.brick {
    background: #b54f4f;
    color: white;
    padding: 0 1rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
}

.brick:nth-child(1) {
    border-radius: 6px 2px 4px 8px;
    transform: rotate(-0.5deg);
}

.brick:nth-child(2) {
    border-radius: 3px 6px 5px 2px;
    transform: rotate(0.25deg);
}

.brick:nth-child(3) {
    border-radius: 5px 3px 7px 4px;
    transform: rotate(-0.4deg);
}

.brick:nth-child(4) {
    border-radius: 2px 5px 3px 6px;
    transform: rotate(0.5deg);
}

.brick:nth-child(5) {
    border-radius: 7px 2px 4px 3px;
    transform: rotate(-0.25deg);
}

.brick:nth-child(6) {
    border-radius: 4px 7px 2px 5px;
    transform: rotate(0.4deg);
}

.brick:nth-child(7) {
    border-radius: 3px 4px 6px 2px;
    transform: rotate(-0.5deg);
}

.brick:nth-child(odd) {
    clip-path: polygon(0% 2%, 97% 0%, 100% 94%, 3% 100%);
}

.brick:nth-child(even) {
    clip-path: polygon(0% 0%, 100% 1%, 98% 100%, 2% 97%);
}

.person-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--color-background-header);
}

.person-placeholder {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    margin: 0 0 3rem 0;
    padding: 0;
    font-size: 32rem;
}

.person-placeholder img {
    height: 240px;
}

.type-1 {
    background-color: #b54f4f;
}

.type-2 {
    background-color: #a05c4f;
}

.type-3 {
    background-color: #d17f5c;
}

.type-4 {
    background-color: #c35b4b;
}

.type-5 {
    background-color: #b04f3f;
}

.type-6 {
    background-color: #d37f6a;
}

.type-7 {
    background-color: #9c3f36;
}

.type-8 {
    background-color: #e08c70;
}

.type-9 {
    background-color: #ab6c5a;
}