* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6,
nav {
  /* font-family: 'Prata', serif; */
  /* font-family: 'DM Sans', sans-serif; */
}

h1,
h2,
h3 {
  font-weight: bold;
}

a {
  /* text-decoration: underline; */
}

a:focus {
  outline-offset: 2px;
}

header {
  position: relative;
  margin-top: 80px;
  margin-bottom: 50px;
}

header .flex-navbar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header .flex-navbar>:first-child {
  flex-grow: 1;
  text-align: left;
}

header .social {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

header .social a {
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  outline-offset: 5px;
}

nav.main {
  font-size: 18px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

nav.main a {
  padding: 10px 5px;
  display: inline-block;
}

nav.main a.active {
  text-decoration: underline;
}

main {
  position: relative;
  min-height: 50vh;
}

footer {
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;
}

h1 {
  /* text-transform: uppercase; */
  text-align: center;
  font-size: 28px;
}

h1 a,
h1 a:hover {
  color: inherit;
  text-decoration: none;
}

h1 a:focus {
  outline-offset: 10px;
}

h2 {
  text-align: center;
  font-size: 22px;
  padding: 20px 0 50px;
}

h3 {
  font-size: 18px;
}

h3.img-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
}

p.img-description {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  /* font-style: italic; */
}

.grid {
  margin-right: -30px;
  margin-left: -30px;
}

.grid-item {
  position: relative;
  float: left;
  padding: 0 30px 60px 30px;
}

.grid-item p,
.grid-item h3 {
  margin: 10px 5px 0;
}

.grid-sizer,
.grid-item {
  width: 100%;
}

@media (min-width: 768px) {

  .grid-sizer,
  .grid-item {
    width: 50%;
  }

}

@media (min-width: 992px) {

  header .flex-navbar {
    flex-direction: row;
  }

  /* .grid-sizer,
    .grid-item {
        width: 33.33333333%;
    } */

}

@media (min-width: 1200px) {

  .container {
    width: 970px;
  }

  /* .grid-sizer,
    .grid-item {
        width: 25%;
    } */

}

body {
  color: black;
  background: white;
}

::selection {
  color: white;
  background-color: black;
}

header .social a.instagram {
  background-image: url(/images/instagram-icon-black.png);
}

nav.main a {
  /* color: #edd3cc; */
  /* color: hsl(13, 48%, 34%); */
}

a {
  color: inherit;
  /* color: #c7a69d; */
  /* color: hsl(13, 27%, 50%); */
}

a:hover,
a:focus {
  color: inherit;
  /* color: #c79385; */
  /* color: hsl(13, 37%, 55%); */
}

a:focus {
  /* border-color: #c79385; */
  /* border-color: hsl(13, 37%, 55%); */
}

h1,
h2,
h3 {
  /* color: #e7d1cb; */
  /* color: hsl(13, 37%, 35%); */
}

.visible-light {
  display: initial;
}

.visible-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  body {
    /* color: white; */
    /* background: black; */
  }

  ::selection {
    /* color: black; */
    /* background-color: white; */
  }

  header .social a.instagram {
    /* background-image: url(/images/instagram-icon-white.png); */
  }

  nav.main a {
    /* color: #edd3cc; */
  }

  a {
    /* color: #c7a69d; */
  }

  a:hover,
  a:focus {
    /* color: #c79385; */
  }

  a:focus {
    /* border-color: #c79385; */
  }

  h1,
  h2,
  h3 {
    /* color: #e7d1cb; */
  }

  .visible-light {
    /* display: none; */
  }

  .visible-dark {
    /* display: initial; */
  }
}