:root {
    /* Borders & Outlines--------------------*/
    --border-width--sm: 0.0625rem; 
    --border-width--md: 0.1rem; 
    --border-width--lg: 0.15rem;
    --outline-width: 0.1rem;
    
    /* Content areas ------------------------*/
    --content-area-max-width: 50rem; 
    
    /* Color -------------------------------*/
    --color--primary: #8A1D09;
    --color--secondary: #ac4937;
    --color--tertiary: #FFDAB9;
    --color--text: #262b2f;
    --color--text--reverse: #fff;    
    
    /* Spacing -----------------------------*/
    --space--2xs: 0.25rem;
    --space--xs: 0.5rem;
    --space--sm: 0.75rem;
    --space--md: 1rem;
    --space--lg: 1.5rem;
    --space--xl: 2rem;
    --space--2xl: 3rem;
    --space--3xl: 4rem;
    
    /* Text & Fonts ------------------------*/
    --font--title: 'Cormorant Unicase', serif;
    --font--regular: 'Cormorant', serif;
    
    --font-size--xs: 0.75em;
    --font-size--sm: 0.9em;
    --font-size--md: 1em;
    --font-size--lg: 1.125em;
    --font-size--xl: 1.266em;
    --font-size--2xl: 1.424em;
    --font-size--3xl: 1.602em;
    --font-size--4xl: 1.802em;
    --font-size--5xl: 2.027em;
    --font-size--6xl: 2.281em;
    --font-size--7xl: 2.566em;
    --font-size--8xl: 3.653em;
    --font-size--9xl: 4.11em;    
}

html {
    font-family: var(--font--regular);
    font-size: calc(1.2rem + .5vw);
}

html *:focus-visible {
    outline: solid var(--outline-width) var(--color--secondary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font--title);    
}

h1 {    
    text-align: center;
    font-size: var(--font-size--6xl);
}
h2 {    
    font-size: var(--font-size--4xl);
}
h3 {    
    font-size: var(--font-size--3xl);
}
h4 {    
    font-size: var(--font-size--2xl);
}
h5 {    
    font-size: var(--font-size--xl);
}
h6 {    
    font-size: var(--font-size--lg);
}
p {
    font-size: var(--font-size--md);
}
a {
    color: var(--color--primary);
    text-decoration-color: var(--color--tertiary);
    text-underline-offset: var(--space--2xs);
    transition: all ease 0.2s;
    display: inline-block;
}
a:active,
a:hover,
a:focus {
    background-color: var(--color--tertiary);
}
button {
    padding: var(--space--2xs) var(--space--xs);
    background-color: var(--color--primary);
    border: solid var(--border-width--md) var(--color--secondary);
    color: var(--color--text--reverse);
    border-radius: 0.2rem;
    transition: all ease 0.2s;
}
button:active,
button:hover,
button:focus {
    background-color: var(--color--tertiary);
    color: var(--text);
}
input,
textarea {
    border-radius: 0;
    border: solid var(--border-width--sm) var(--color--secondary);
}
input:focus,
textarea:focus {
    background-color: var(--color--tertiary);
}
img {
    max-width: 100%;
    display: block;
}

/*------------------------------------------------------------------------------
Header
------------------------------------------------------------------------------*/
header {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;        
    padding: var(--space--xs);
    border-bottom: var(--color--secondary) var(--border-width--sm) solid;
}

.site-header {
    display: flex;
    place-content: center;
    gap: var(--space--sm);
}

.home-link {
    font-family: var(--font--title);    
    text-decoration: none;    
    color: var(--color--text);
    display: inline-flex;
    flex: 0 0 100%;
    gap: var(--space--xs);
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;
    margin-bottom: var(--space--md);
}

.site-name {
    font-size: var(--font-size--4xl);
    margin: 0;
    font-weight: var(--font-weight--regular);
}

.logo {
    width: 1.2rem;
}

.main-navigation {
    display: flex;
    justify-content: center;
    gap: var(--space--md);
}

.nav-item {
    font-size: var(--font-size--xl);
    padding: var(--space--2xs);
}

@media (min-width: 831px) {
    header {
        justify-content: space-between;
    }
    
    .home-link {
        margin-bottom: 0;
    }
    .nav-item {
        font-size: var(--font-size--md);
    }
}

/*------------------------------------------------------------------------------
Main
------------------------------------------------------------------------------*/
main {
    min-height: 75vh;
    margin: auto;
    padding: var(--space--sm);
}

/*------------------------------------------------------------------------------
Footer
------------------------------------------------------------------------------*/
footer {
    margin: var(--space--sm) 0;
    text-align: center;
    width: 100%;    
}

.instagram {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space--xs);
}

.instagram img {
    width: 1.5rem;
}

.email {
    margin-bottom: var(--space--sm);
}

/*------------------------------------------------------------------------------
Pages
/*------------------------------------------------------------------------------
Home
------------------------------------------------------------------------------*/
.front-navigation {    
    display: flex;
    flex-flow: row wrap;
    gap: var(--space--md);
    justify-content: center;
}

@media (min-width: 831px) {
    .front-navigation {
        margin-top: var(--space--3xl);
    }
}

.image-link a {
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    width: 12rem;
    height: 12rem;
    color: var(--color--text--reverse);
    font-size: var(--font-size--3xl);
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.5);
}

.image-link a:active,
.image-link a:hover,
.image-link a:focus {
    background-color: var(--color--primary);
}

.image-link span {
    grid-column: 1/span 1;
    grid-row: 1 /span 1;
}

.image-link img {
    grid-column: 1/span 1;
    grid-row: 1 /span 1;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*------------------------------------------------------------------------------
About
------------------------------------------------------------------------------*/
.about-content {
    max-width: var(--content-area-max-width);
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap: var(--space--md);
    place-items: center;
}

@media (min-width: 471px) {
    .about-content {
        flex-flow: row nowrap;
    }
}

.about-content>div {
    flex: 1 1 50%;
}

.about-content img {
    border-radius: 50%;
}

/*------------------------------------------------------------------------------
Shop
------------------------------------------------------------------------------*/
.shop-content {
    max-width: var(--content-area-max-width);
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    text-align: center;
    gap: var(--space--md);
}

.shop-content .intro {
    flex: 0 0 100%;
}

.shop {
    flex: 0 0 50%;
    max-width: 20rem;
}

.shop a {
    display: flex;
    place-content: center;
    height: 10rem;
}

.shop img {
    height: 100%;
}
/*------------------------------------------------------------------------------
Contact
------------------------------------------------------------------------------*/
.hp-item {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

.contact-content {
    display: flex;
    place-items: center;
}

.contact-form {
    text-align: right;
    margin: auto;
    display: block;
}

.form-item {
    margin-bottom: var(--space--sm);
}

/*------------------------------------------------------------------------------
Portfolio
------------------------------------------------------------------------------*/
.gallery {
    display: flex;
    flex-flow: row wrap;
    gap: var(--space--sm);
    margin: var(--space--sm);
}

@media (min-width: 681px) {
    .gallery-image {
        flex: 1 1 30%;
    }
}