@font-face {
    font-family: 'Didact Gothic';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/didact-gothic-v12-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Didact Gothic Regular'), local('DidactGothic-Regular'),
        url('../fonts/didact-gothic-v12-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/didact-gothic-v12-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/didact-gothic-v12-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/didact-gothic-v12-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/didact-gothic-v12-latin-regular.svg#DidactGothic') format('svg');
    /* Legacy iOS */
}

/* josefin-sans-regular - latin */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/josefin-sans-v13-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Josefin Sans Regular'), local('JosefinSans-Regular'),
        url('../fonts/josefin-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/josefin-sans-v13-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/josefin-sans-v13-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/josefin-sans-v13-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/josefin-sans-v13-latin-regular.svg#JosefinSans') format('svg');
    /* Legacy iOS */
}

/* cardo-700 - latin */
@font-face {
    font-family: 'Cardo';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/cardo-v10-latin-700.eot');
    /* IE9 Compat Modes */
    src: local('Cardo Bold'), local('Cardo-Bold'),
        url('../fonts/cardo-v10-latin-700.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/cardo-v10-latin-700.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/cardo-v10-latin-700.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/cardo-v10-latin-700.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/cardo-v10-latin-700.svg#Cardo') format('svg');
    /* Legacy iOS */
}

/* bungee-inline-regular - latin */
@font-face {
  font-family: 'Bungee Inline';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bungee-inline-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/bungee-inline-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bungee-inline-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bungee-inline-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bungee-inline-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bungee-inline-v6-latin-regular.svg#BungeeInline') format('svg'); /* Legacy iOS */
}

/*I wanted everything in one box to be able to center the whole thing as a unit, and used a grid within that to organize the different sections*/

.grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    background-color: #e47e3f;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    padding: 10px;
    min-width: 0;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.header {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: #A1563C;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 15px;
    min-width: 0;
}

.logo {
    float: left;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 20px;
}

.DIY {
    text-align: right;
    font-family: 'Bungee Inline';
    float: right;
    padding-top: 5px;
    padding-right: 20px;
    font-size: 2em;
    color: #F0EFE8;
    text-shadow: -7px 7px 2px black;
}

body {
    background-color: #4A505D;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;

}

.sidenav {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 5;
    font-family: 'Josefin Sans', sans-serif;
    font-variant: small-caps;
    background-color: #e47e3f;
}

.sidenav ul {
    list-style: none;
    text-decoration: none;
    padding: 10px;
    align-content: center;

}

.sidenav ul li a:link {
    display: block;
}

.sidenav li {
    background-color: #91939c;
    text-align: center;
    margin: 1em;
}

.sidenav a {
    padding: 1em;
    color: #F0EFE8;
    text-decoration: none;
}

.sidenav ul li a:hover {
    display: block;
    background-color: #a1563c;
}


/*I could not get the swipebox JS to work unless the div was named "swipebox," so I ended up repeating two identical sections with different names. I do not have a "main" div where there's any swipeboxing, so this works, even if it's maybe not elegant.*/

.swipebox {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
    /* background-color: #e47e3f; */
    margin: auto;
    max-width: 750px;
    padding-top: 25px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 1.15em;
    color: #000000;
}

/* .gallery_main {
    display: inline-grid;
    /* grid-column-start: 2;
    grid-column-end: -1;
    grid-row-start: 2;
    grid-row-end: 5; */
    /* background-color: #e47e3f; */
    /* margin: auto; */
  /*  font-family: 'Didact Gothic', sans-serif;
    font-size: 1em;
    color: #f0efe8;
}
*/
/* #gallery_text {
    font-family: 'Cardo', serif;
    text-align: center;
    background-color: #F0EFE8;
    color: #91939c;
    font-size: 16px;
    border-style: double;
    border-color: #91939c;
    font-variant: small-caps;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-self: center;
    margin-bottom: 20px;
    max-width: 700px;
} */

.main {
    grid-column-start: 2;
    grid-column-end: -1;
    grid-row-start: 2;
    /* grid-row-end: 5; */
    background-color: #e47e3f;
    margin: auto;
    max-width: 750px;
    padding-top: 40px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 1em;
    color: #f0efe8;
}

.main img {
    width: 100%;
    margin: auto;
}

/*contact form-specific styling*/
label.error {
    float: none;
    color: red;
    padding-left: .5em;
    vertical-align: top;
}

p {
    clear: both;
}

.submit {
    margin-left: 12em;
}

/* about */
span#about {
  font-family: 'Didact Gothic';
  font-size: 1.15em;
  color: #000000;
  background-color: #91939c;
}
span#about a {
  color: #ffffff;
  text-shadow: 1px 1px 2px black;
  text-decoration: none;
}
span#about a:hover {
  color: #000000;
  text-shadow: 1px 1px 2px white;
}

span#about p {
  margin-top: .15em;
  /* padding: 20px; */
}

/* coming soon styling */
span.comingsoon {
  font-size: 1.15em;
}

span.comingsoon a {
  color: #ffffff;
  text-shadow: 1px 1px 2px black;
  text-decoration: none;
}

span.comingsoon a:hover {
    color: #000000;
    text-shadow: 1px 1px 2px white;

}
/*footer, obviously*/
.footer {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;
    background-color: #A1563C;
    list-style: none;
    color: black;
    text-align: center;
    padding: 20px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 1em;

}

.footer li {
    display: inline;
    float: inherit;
    padding: 15px;
}

.footer ul {
    list-style: none;
}

.footer a {
    color: #91939c;
    padding: 3px;
    text-decoration: none;
}

.footer a:hover {
    background-color: #91939c;
    padding: 3px;
    color: #a1563c;
}

h1 {
  font-family: 'Bungee Inline';
  text-shadow: 7px 7px 2px black;
}