@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@font-face {
    font-family: "Maragsa";
    src:
        local("Maragsa-Display"),
        url("Maragsa-Display.otf") format("opentype") tech(color-COLRv1),
        url("Maragsa-Display.otf") format("opentype"),
        url("Maragsa-Display.woff2") format("woff2");
}


:root {
    --colour-bg: #fff3e4;
    --colour-fg: #599f68;
    --colour-highlight: #add1b3;
}

html, body {
    color: var(--colour-fg);
    background-color: var(--colour-bg);
    font-family: Maragsa, serif;
    margin: 0;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1em;
    box-sizing: border-box;
}

hr {
    color: var(--colour-fg);
}

main.home {
    height: 100vh;
}

.logo {
    font-size: 2.5rem;
    display: block;
    width: 10em;
}

.bailey {
    text-align: left;
    margin: 0;
}

.homespun {
    text-align: right;
    margin: 0;
    transform: translateY(-0.15em);
}

.info {
    font-size: 1.5rem;
    margin-bottom: 0.25em;
    max-width: 33em;
}

p {
    font-family: "Outfit", cursive;
}

.links {
    font-size: 1.2rem;
}

a.nav {
    margin-left: 1em;
    margin-right: 1em;
    color: var(--colour-fg);
}

a.home {
    text-decoration: none;
    color: var(--colour-fg);
}

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

a:visited {
    color: var(--colour-fg);
}

a:hover {
    color: var(--colour-highlight);
}

a:active {
    
}

.overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    background-image: url("lino-print-2.png");
    z-index: 2;
    opacity: 70%;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.galleryImage {
    width: 15em;
    margin: 1em;
}

.flexbr {
    flex-basis: 100%;
    height: 0;
}

.profileImage {
    width: 15em;
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1em;
}

.contact>a {
    margin: 0.2em;
}

h2 {
    margin-bottom: 0;
}
h4 {
    margin-top: 0;
}

.icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.4em;
    display: inline;
    color: var(--colour-fg);
}

.kern {
    width: 0.02em;
    display: inline-block;
}

@media only screen and (max-width: 450px) {
  .logo {
      font-size: 2rem;
  }
}