@font-face {
  font-family: 'Bagnard';
  font-weight: 400;
  font-display: swap;
  src: local('Bagnard Regular'), local('Bagnard-Regular'), url(fonts/Bagnard.otf) format('opentype');
}

@font-face {
    font-family: 'Tex Gyre Heros';
    font-style: normal;
    font-weight: 400;
    src: local('Tex Gyre Heros'), local('TexGyreHeros'), url(fonts/texgyreheros-regular.otf) format('opentype');
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Tex Gyre Heros', sans-serif;
    line-height: 1.2;
    min-height: 100vh;
}

body {
  background-color: #fafbfd;
}


/* Header styles */

header h1 {
    font-family: 'Bagnard', serif;
  color: rgb(237, 120, 106);
  font-weight: 400;
  font-size: 50px;
  text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Main styles */

#main {
  color: rgb(119, 119, 119);
}

#main header h2 {
    font-weight: 400;
    font-size: 2em;
    text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1);
}

#main a {
    color: rgb(237, 120, 106);
    font-weight: bold;
}

body > #main {
		padding-top: 2em;
		padding-left: 1em;
		padding-right: 1em;
		line-height: 1.45;

}

body > nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1em 1em 0;
	margin: 0;
	list-style: none;
}
#navigation {
    display: inline-flex;
    list-style: none;
}
#navigation li {
	text-align: center;
	padding: 0.25em 0.5em;
}
#navigation a[href] {
	display: block;
	padding: 0;
	color: hsla(33deg,50%,10%,0.75);
    letter-spacing: 0.1em;
    text-decoration: underline;
}

footer {
    background-color: rgba(119, 119, 119, 0.3);
    border-top: 2px solid rgb(119, 119, 119);
    padding: 2em 3em;
    margin-top: 3em;
}

footer img {
    width: 30px;
}

#footer ul {
    list-style: none;
    margin: auto;
    padding: 0;
}


@media (min-width: 50em) {
	body {
		display: grid;
		grid-template-columns: [left] minmax(1em,1fr) [main] minmax(10em,40em) [right] minmax(10em,1fr);
		grid-template-rows: repeat(7,min-content) auto repeat(2,min-content);
		grid-gap: 0 2em;
	}
	body > * {
		grid-column: 1 / -1;
	}
	body > #main {
		grid-column: main;
		grid-row: 2 / -3;
		padding: 3em 0 0;
	}

    #footer {
		grid-column: main;
		padding: 3em 0 0;

        display: grid;
        grid-template-columns: [fleft]1fr [fcenter]50px [fright]1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
	}

    #footer ul {
        grid-column: fcenter;
    }

    #footer_about {
        grid-column: fleft;
        text-align: left;
    }

    #footer_tagline {
        grid-column: fright;
        text-align: right;
    }

    body > nav {
		position: sticky;
		grid-column: right;
		grid-row: 2;
    }

    #navigation {
        text-align: right;
        display: block;
        list-style: none;

    }

}

@media (max-width: 50em) {
    #footer {
        text-align: center;
    }

    #footer ul {
        display: inline-flex;
    }

    #social {
        display: flex;
        justify-content: center;
        margin: 2em 0;
    }

    #footer li {
        padding-left: 3em;
    }

     #footer li:first-child {
        padding-left: 0;
    }
}