/*Here is where we embed the font familys from google fonts*/

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
  font-family: Lora;
  font-size: 16px;
  line-height: 1.2;

  background-color: #819171;
  color: #EDE8D7;
  /*top, right, bottom, left*/
  /*auto keeps things centred left and right depending on page width*/
  margin: 80px auto 48px auto;
  /*Width of whole page*/
  width: 1120px;
}

header {
  display: flex;
  /*aligns things in a row across page*/
  flex-direction: row;
  /*aligns things vertically*/
  align-items: center;
  /*aligns things horiztonally*/
  justify-content: space-between;
}

h1 {
  font-family: space mono;
  font-size: 50px;
  font-weight: 400;
}

h2 {
  font-family: space mono;
  font-size: 26px;
  font-weight: 400;
  /*top, right, bottom, left*/
  margin: 0 0 10px 0;
}

h3 {
  font-family: space mono;
  font-size: 22px;
  font-weight: 400;
  /*top, right, bottom, left*/
  margin: 0 0 10px 0;
}

p, ul, li{
  margin: 0 0 10px 0;
}

a {
  font-family: space mono;
  font-size: 20px;
  font-weight: 200;
  color: #EDE8D7;
  text-decoration: none;
  /*top, right, bottom, left*/
  margin: 0 0 0 32px;
  transition: color 1s;
}

a:hover, a.selected {
  color: #A6AE9D;
}

ul {
  text-align: center;
  margin: 24px 0 24px 0;
}

section {
  margin: 80px 0 80px 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 32px;
  grid-auto-flow: dense;
}

section.homepage img {
  grid-column:  4 / span 8;
}

section.project img {
  max-height: 640px;
}

section.project div.artwork{
  grid-column: 2 / span 4;
}

section.project div.description{
  grid-column: 7 / span 5;
}

section.about div.abt-img{
  grid-column: 1 / span 7;
}

section.about div.abt-text{
  grid-column: 8 / span 5;
}

section.contact div.contact-text{
  grid-column: 8 / span 5;
}
section.contact div.contact-img{
  grid-column: 1 / span 7;
}
section.contact div.contact-form{
  grid-column: 5 / span 2;
  margin: 30px 0 0 0;
  text-align: center;
}




footer {
  display: flex;
  /*aligns things in a row across page*/
  flex-direction: row;
  /*aligns things vertically*/
  align-items: center;
  /*aligns things horiztonally*/
  justify-content: center;
}

footer a {
  font-size: 24px;
  margin: 0 16px 0 16px;
}


/*mobile freindly /browser width*/

@media (max-width: 1248px) {
  body {
    width: auto;
    margin: 80px 64px 48px 64px;
  }
}
@media (max-width: 1206px) {
  header {
		flex-direction: column;
  }
  
  nav {
    margin: 32px 0 0 0;
  }
  
  header img{
    max-width: 300px;
  }
  
  header a {
    margin 0 16px 0 16px;
  }
}

@media (max-width: 1000px) {
  section {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 24px;
     /*aligns things vertically*/
  	align-items: center;
  	/*aligns things horiztonally*/
  	justify-content: center;
  }
  
  section.homepage img, 
  section.project div.artwork, 
  section.project div.description, 
  section.about div.abt-img, 
  section.about div.abt-text,
  section.contact div.contact-text,
  section.contact div.contact-img,
  section.contact div.contact-form{
  	grid-column:  1 / span 4;
		}
  
  div.nav-title h1 {
    font-size: 30px;
  }
  
}

@media (max-width: 590px) {
  section.homepage img {
    width: 100%;
  }
  
  body {
    margin: 24px 24px 24px 24px;
  }
  
  nav {
    margin: 34px 12px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  	justify-content: center;
  }
   nav a {
    margin: 20px 0 0 0;
  }
  
}

@media (max-width: 428px) {
  div.nav-title h1 {
    text-align: center;
    font-size: 30px;
  }
  a, ul {
    margin: 30px 0 0 0;
    text-align: center;
  }
 section.contact div.contact-form a {
   font-size: 16px;
  }