/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500&display=swap');
@import url('https://db.onlinewebfonts.com/c/4e6b64b851b83ff12bd20d6e7df57123?family=PushkinW01-ScriptHigh');
@font-face {font-family: "PushkinW01-ScriptHigh"; src: url("//db.onlinewebfonts.com/t/4e6b64b851b83ff12bd20d6e7df57123.eot"); src: url("//db.onlinewebfonts.com/t/4e6b64b851b83ff12bd20d6e7df57123.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/4e6b64b851b83ff12bd20d6e7df57123.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/4e6b64b851b83ff12bd20d6e7df57123.woff") format("woff"), url("//db.onlinewebfonts.com/t/4e6b64b851b83ff12bd20d6e7df57123.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/4e6b64b851b83ff12bd20d6e7df57123.svg#PushkinW01-ScriptHigh") format("svg"); }

:root {
  /* change the values below to your colors from your palette
ADD BROWNS LIKE WOOD, GREENS EITHER DEEP OR LIGHT, DUSTY BLUE 
  Green
  White
  Black
  Grey
  */
  --primary-color: #304945;
  --secondary-color: #FFFFFF;
  --accent1-color: #000000;
  --accent2-color: #C0C0C0;

  /* change the values below to your chosen font(s) */
  --brand-font: "PushkinW01-ScriptHigh", sans-serif;
  --heading-font: "Play", sans-serif;
  --paragraph-font: "Zen Kaku Gothic New", Helvetica, sans-serif;

  /* these colors below should be chosen from among your palette colors above */
  --headline-color-on-white: var(--accent1-color);  /* headlines on a white background */ 
  --headline-color-on-color: #000000; /* headlines on a colored background */ 
  --paragraph-color-on-white: #000000; /* paragraph text on a white background */ 
  --paragraph-color-on-color: var(--primary-color); /* paragraph text on a colored background */ 
  --paragraph-background-color: #FFFFFF;
  --nav-link-color: var(--primary-color);
  --nav-background-color: #FFFFFF;
  --nav-hover-link-color: var(--primary-color);
  --nav-hover-background-color: var(--accent2-color);
}

body {
  background-color: #ffffff;
  font-family: var(--paragraph-font), sans-serif;
  padding: 0px;
  font-size: 18px;
  margin: 0;
  color: var(--headline-color-on-white);
}

h2 {
  font-family: var(--brand-font);
  color: var(--paragraph-color-on-color);
  font-size: 32px;
}


footer a {
  color: var(--headline-color-on-white);
  font-family: var(--paragraph-font)
}


nav a:hover {
  color: var(--nav-hover-link-color);
  background-color: var(--nav-hover-background-color);
  padding: 10px;
}

/* HOME GRID */ 

.home-grid {
  display: grid;
  grid-template-columns: .75fr 1.25fr 1.25fr .75fr;
  grid-template-rows: auto 3vw auto auto ;  
}

.home-grid img {
  max-width: 100%;
}

.home-header {
  display: grid;
  grid-column: 1/5;
  grid-template-columns: 1fr 1fr 2fr .5fr;
  grid-template-rows: 5vw 20vw;
  background: url("https://nanny.whitti.com/images/banner-left.jpg");
  background-position: left top;
  /* Keeps Image at top but content scrolls up
  background-attachment: fixed;*/
  background-size: 100vw 25vw;
  background-repeat: no-repeat;
}

.home-title-image{
  width: 100%;
  grid-column: 1/7;
  grid-row: 1;
}

.home-logo {
  grid-column: 1;
  grid-row: 1;
}

.home-logo img {
  width: 100px;
  padding-left: 20px;
}

.home-image1 {
  grid-column: 2/3;
  grid-row: 3/5;
  width: 60vw;
  
}

.home-header1 {
  grid-column: 3/4;
  grid-row: 3/4;
  text-align: center;
  align-self: flex-end;
  padding: 0px 15px 0px 15px;
  font-size: 4.5vw;
  margin: 0;
}

.home-paragraph1 {
  grid-column: 3/4;
  grid-row: 4/5;
  text-align: center;
  align-self: flex-start;
  margin: 0;
  padding: 0px 30px 0px 30px;
  font-size: 1.3vw;
}

.home-image2 {
  grid-column: 3/4;
  grid-row: 5/6;
  width: 60vw;
}

.home-header2 {
  grid-column: 2/3;
  grid-row: 5/6;
  text-align: center;
  align-self: flex-end;
  padding: 0px 15px 0px 15px;
  font-size: 4.5vw;
}

.home-paragraph2 {
  grid-column: 2/3;
  grid-row: 5/6;
  text-align: center;
  align-self: center;
  margin: 0;
  padding: 0px 30px 0px 30px;
  font-size: 1.3vw;
}

.home-copyright { 
  grid-column: 1/5;
  grid-row: 6/7;
  text-align: center;
  align-self: center;
  text-align: center;
  padding: 30px 0px 30px 0px;
  font-size: 1vw;
}

.home-footer {
  display: grid;
  grid-template-columns:.75fr auto auto auto auto auto auto auto .75fr;
  grid-template-rows: auto;
  
}

.home-footer img {
  max-width: 100%;
}

.home-footer-Image1 {
  grid-column: 2/3;
}

.home-footer-Image2 {
  grid-column: 3/4;
}

.home-footer-Image3 {
  grid-column: 4/5;
}

.home-footer-Image4 {
  grid-column: 5/6;
}

.home-footer-Image5 {
  grid-column: 6/7;
}

.home-footer-Image6 {
  grid-column: 7/8;
}

.home-footer-Image7 {
  grid-column: 8/9;
}



@media only screen and (max-width: ) { 
/* beginning of media query */
  .home-grid {
    display: block;
  }
  
  header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-template-rows: 100px 50px 50px 100px;
    background: url("https://cdn.glitch.global/78f7f305-a99e-418a-b819-0b44a2d650b3/opt-7.jpg?v=1647548915787");
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-title-image{
    width: 100%;
    grid-column: 1/7;
    grid-row: 1;
  }

  .home-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .home-logo img {
    width: 50px;
  }

  .home-nav {
    grid-column: 1;
    grid-row: 1;
  }

  .home-title {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
    align-self: flex-end;
    font-family: var(--brand-font);
    font-size: 1.5em;
    margin: 0;
    color: red;
  }

  .home-quote{
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    align-self: flex-start;
    margin: 0;
    font-size: .5em;
  }

  
  nav a:hover {
    background-color: white;
    padding: 0;
  }
  
  nav ul{
    display: block;
    width: 50px;
    margin: 0;
    white-space: nowrap;
  }
  nav li {
    text-align: center;
    display: inline;
    padding: 10px;
  }

  .home-image1 {
    display: block
    
  }

  .home-header1 {
    display: block
  }

  .home-paragraph1 {
    display: block
  }

  .home-image2 {
    display: block
  }

  .home-header2 {
    display: block
  }

  .home-paragraph2 {
    display: block
  }

}