/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
html {
  background-color: #eaf6ed;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
img {
  max-width: 100%;
}

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* template */

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 5px;
}

.wrapper > * {
  grid-column: col-start / span 12;
}

nav ul {
  display: flex;
  list-style:none;
  justify-content: space-between;
}

.main-nav li {
  flex: 1;
  background: gray;
  text-align: center;
  outline-color: black;
  text-decoration: none;
  line-height: 3;
  color: orange;
}

/* about page styling */

.about-page {
  display: flex;
  border-radius: 25px;
  background-color:#ffcfcf;
  padding-right: 2em;
  padding-left: 2em;
  width:min(50vw, 400px);
  height:min(70vh, 600px);
  margin: 1%;
  overflow: auto;
}
.about-page > p {
  flex: 1;
}

/* horses styling*/

.horses-text {
  display: flex;
  flex-flow: column;
  border-radius: 25px;
  background-color:#ffcfcf;
  padding-right: 2em;
  padding-left: 2em;
  /*width:min(50vw, 400px);*/
  height:min(70vh, 600px);
  margin: 1%;
  overflow: auto;
}
.horses-text > p {

}

/* project page styling*/

.project-list {
  display: flex;
  list-style: none;
  flex-direction: row;
}

@media (min-width: 600px) {

  .projects {
    grid-column: col-start / span 3;
    grid-row: 3;
  }
  .shop {
    grid-column: col-start / span 3;
    grid-row: 4;
  }
  .about {
    grid-column: col-start 4 / span 9;
  }

  nav ul {
    display: flex;
    justify-content: space-between;
  }
  .omelas-cover {
    grid-column: 2 / span 2;
    grid-row: 3;
  }
  .rdf-cover {
    grid-column: 3 / span 2;
    grid-row: 5;
  }
  .music-for-introverts-cover {
    grid-column: 9 / span 4;
    grid-row: 4;
  }
  .horses {
    grid-column: 11 / span 2;
    grid-row: 7;
  }

  /* mfi page styling*/
  .mfi-1 {
    grid-column: 2 / span 10;
    grid-row: 4;
  }
  .mfi-2 {
    grid-column: 7 / span 4;
    grid-row: 5;
  }
  .mfi-3 {
    grid-column: 2 / span 5;
    grid-row: 6;
  }
  .mfi-4 {
    grid-column: 7 / span 4;
    grid-row: 6 / span 1;
  }
  .mfi-5 {
    grid-column: 3 / span 8;
    grid-row: 7;
  }
  .mfi-title {
    grid-column: 4 / span 2;
    grid-row: 8;
  }
  .mfi-6 {
    grid-column: 7 / span 4;
    grid-row: 8;
  }
  .mfi-7 {
    grid-column: 2 / span 3;
    grid-row: 9;
  }
  .mfi-8 {
    grid-column: 2 / span 4;
    grid-row: 10;
  }
  .mfi-9 {
    grid-column: 2 / span 10;
    grid-row: 11;
  }
  .mfi-10 {
    grid-column: 7 / span 4;
    grid-row: 12;
  }
  .mfi-11 {
    grid-column: 2 / span 10;
    grid-row: 13;
  }
  .mfi-12 {
    grid-column: 2 / span 5;
    grid-row: 14;
  }
  .mfi-13 {
    grid-column: 2 / span 5;
    grid-row: 15;
  }
  .mfi-14 {
    grid-column: 7 / span 4;
    grid-row: 15;
  }
  .mfi-15 {
    grid-column: 5 / span 6;
    grid-row: 16;
  }
  .mfi-16 {
    grid-column: 2 / span 10;
    grid-row: 17;
  }
  .mfi-17 {
    grid-column: 4 / span 6;
    grid-row: 18;
  }
  .mfi-18 {
    grid-column: 7 / span 5;
    grid-row: 19;
  }
  .mfi-19 {
    grid-column: 2 / span 3;
    grid-row: 20;
  }
  .mfi-gif {
    grid-column: 5 / span 10;
    grid-row: 3;


  /*rdf page styling*/

  .rdf-title {
    grid-column: 6 / span 3
  }

  .rdf {
    grid-column: 5 / span 4
  }

  /*horses styling*/

   section {
    display: grid;
    grid-auto-flow: column;
    gap: 1%;
  }
  .horses-shirt {

  }
}

@media (min-width: 700px) {
  .main-nav {
    grid-column: col-start / span 12;
    grid-row: 2;
  }
  .projects{
    grid-column: col-start 3 / span 2;
    grid-row: 3 / 4;
  }
  .shop {
    grid-column: col-start 7 / span 5;
    grid-row: 4 / 5;
  }
  .about {
    grid-column: col-start 8 / span 2;
    grid-row: 7;
  }
  .main-footer {
    grid-column: col-start / span 12;
    grid-row: 9;
  }
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}