:root {
    /* reset */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    /* colors */
    --charcoal-gray: #36454f;
    --white: #fff;
    /* limit text width */
    --measure: 60ch;
    /* modular scale */
    --ratio: 1.5;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    /* global style */
    font-family: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
}

* {
    /* limit width of everything to measure */
    max-inline-size: var(--measure);
    /* calculate padding within */
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
address,
p,
hr,
pre,
blockquote,
ol,
ul,
li,
dl,
dt,
dd,
figure,
figcaption,
div,
table,
caption,
form,
fieldset {
    /* reset margins */
    margin: 0;
}

html,
body,
div,
header,
nav,
main,
section,
footer {
    /* some elements we don't want to have limits */
    max-inline-size: none;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

html {
    background-color: var(--charcoal-gray);
    color: var(--white);
    margin: 0;
    min-height: 100vh;
    position: relative;
}

footer,
header,
nav,
section {
    /* setup these elements for block layout */
    display: block;
}

body {
    line-height: 1.5;
    text-decoration-skip-ink: auto;
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
    font-kerning: normal;
}

button, input, label { 
    line-height: 1.1; 
}  

/* stack (for block margin) */
.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack * {
    margin-block: 0;
}

.stack > * + * {
    margin-block-start: var(--space, 1.5rem);
}

/* box (padding) */
.box {
    padding: var(--s1);
    border: 0 solid;
    outline: var(--border-thin) solid transparent;
    outline-offset: calc(var(--border-thin) * -1);
}

/* center (horizontal centering) */
.center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
}

/* (center child elements narrower than the max value) */
.intrinsic {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-center {
    text-align: center;
    text-wrap: balance;
}

/* cluster (inline flex) */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, 1rem);
    justify-content: flex-start;
    align-items: flex-start;
}

/* switcher (inline to block) */
.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}
  
.switcher > * {
    flex-grow: 1;
    flex-basis: calc(( 25rem - 100%) * 999);
}
  
.switcher > :nth-last-child(n+ 5),
.switcher > :nth-last-child(n+ 5) ~ * {
    flex-basis: 100%;
}

/* cover (vertical centering) */
.cover {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.cover > * {
    margin-block: 1rem;
}

.cover > :first-child:not(div) {
    margin-block-start: 0;
}

.cover > :last-child:not(div) {
    margin-block-end: 0;
}

.cover > div {
    margin-block: auto;
}

/* grid (row & columnar layout) */
.grid {
    display: grid;
    grid-gap: 1rem;
}
  
@supports (width: min(250px, 100%)) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    }
}

/* general styling */
nav a {
    color: var(--white);
}

h1 {
    font-weight: 700;
    font-size: calc(var(--s4) * 0.85);
}

h2 {
    font-size: var(--s2);
}

h3 {
    font-size: var(--s1);
}

section {
    --space: 2rem;
}

.uppercase {
    text-transform: uppercase;
    --opentype-case: "case" on;
}

a {
    /* style links */
    color: #ffa554;
    text-decoration: none;
}

a:hover {
    /* style links */
    color: #888;
    text-decoration: underline;
}

.btn {
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    user-select: none;
    background-color: var(--charcoal-gray);
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.5);
}

.btn:active,
.btn:active:focus,
.btn:active:hover,
.btn:focus,
.btn:hover {
    background-color: #979797;
    box-shadow: none;
    color: #fff;
}

.btn.btn-icon {
    font-size: 0.9375rem;
    line-height: normal;
    overflow: hidden;
    padding: 0;
    position: relative;
    height: 3.6rem;
    min-width: 3.6rem;
    width: 3.6rem;
}

.btn-round {
    border-radius: 30px !important;
}

img.album {
    max-width: 116px;
    max-height: 116px;
}

.prose {
    text-wrap: pretty;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-lines: 2;

    hyphens: auto;
    hyphenate-limit-chars: 7 4 3;
    hyphenate-limit-lines: 2;    
    hyphenate-limit-zone: 8%;
    hyphenate-limit-last: always;
}

footer {
    font-size: var(--s-1);
}

/* profile(index) page styling */
.profile-page > .page-header > .box {
    background-image: url("/assets/img/Ruth.avif");
    background-position: center center;
    background-size: cover;
}

.profile-page .photo-container {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.3);
    height: 123px;
    margin: 0 auto;
    overflow: hidden;
    width: 123px;
}

.profile-page #indexTitleText {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.3);
    background: rgba(54, 69, 79, 0.9);
    border-radius: 10px;
    padding-inline: 20px;
}

.profile-page .cover {
    min-block-size: 50vh;
}

.profile-page p {
    font-size: var(--s1);
}

/* portfolio styling */
.portfolio-row canvas {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
}

.portfolio-row canvas {
    max-height: 100%;
    max-width: 100%;
    transition: .5s;
}

.portfolio-row {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-bottom: 150px;
    padding-top: 100px;
}

.portfolio-row a {
    text-decoration-line: none !important;
}

.portfolio-row p {
    color: #fff;
    padding-left: 50px;
    padding-right: 50px;
    position: absolute;
    text-align: left;
    top: 20%;
    transition: .5s;
    visibility: hidden;
    width: 100%;
}

.portfolio-row a:hover canvas {
    opacity: .05;
}

.portfolio-row a:hover p {
    visibility: visible;
}