* {

  box-sizing: border-box;

}

body {

  width: 90%;
  margin: 2em auto;
  background-image: url("../Image_Assets/backgrounds/quiltpat1.jpeg");
  background-size: 250px;

}

h1 {
  font-family: RomanceA;
}

h2 {
  font-family: RomanceA;
}

h3 {
  font-family: RomanceA;
}

p {
  font-family: basiic;
}

/* font source remember to keep the files tidy!  */

@font-face {

  font-family: RomanceA;
  src: url(RomanceA.ttf);

  font-family:  basiic;
  src: url(basiic.ttf);
}

.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);

/*
  grid-template-rows: repeat(12, 1fr);
  grid-auto-rows: 1fr;
*/

  gap: 20px;
}

/* Mobile First */

#borderimg {
  border: 7px solid transparent;
  padding: 5px;
  border-image: url(../Image_Assets/border-images/border-image2.jpeg) 45 round;
}

#borderimg2 {
  border: 4px solid transparent;
  /* padding: 0px; */
  border-image: url(../Image_Assets/border-images/border-image2.jpeg) 45 round;
}


/* nav ul {
  list-style: none:
  margin: 0
  padding: 0
}

*/

.container > * {

  background-color: beige;
  grid-column: col-start / span 12;
}

.mainsite img {
  max-width: 100%;
  height: auto;

}

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

.logo_con {

  width: 50%;
  margin-left: auto;
  margin-right: auto;

}

/* Nav Bar */

nav .link {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color:  #f1f1f1f1;
  height: 100%;
  overflow: auto;
}

.link li a  {
  display: block;
  text-align: center;
  color: #000;
  padding: 18px 16px;
  text-decoration: none;

}

.link li a.active {
  background-color: #343148;
  color: white;
}

.link li a:hover:not(.active) {
  background-color: #555;
  color: white;
}


a:link, a: visited {
  color: #333333;
}

/*  Mobile Nav Menu */

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
  
}
/* hide links inside nav menu expect 4 logo/home */

.topnav #myLinks {
  display: none;
}

/* Style Nav Menu links */

  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    display: block;
    font-family: RomanceA;
}

/* Style hamburger menu */

    .topnav a.icon {
      background:  #cea755;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      padding: 10.8px;
}
  .icon img {

  max-width: 100%;
  height: 20px;

}

.icon {
  padding: 0;
}
    

/* add color bg on mouse-over */

  .topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* style active link (home or logo) */

  .active {
    backgroound-color: #04AA6D;
    color: white;
}

.m1 {
  background-color: #7c8e69;
}

.m2 {
  background-color: #af4555;
}

.m3 {
  background-color: #c1654e;
}

.m4 {
  background-color: #639ebf;
}

.m5 {
  background-color: #905fac;
}

.hidemobile {

display: none;

}

/* .content {
  padding: 10px;
}
*/

.fonthead {
  text-align: center;
}

.content p {
  text-align: center;
}

.vend {

}

.volun {

}

.donate {
  
}


.footer {
  text-align: center;
  padding: 30px;
}

.insta {
  width: 25px;
  height: auto;
}

/* tablet screen size */

@media (min-width: 700px)  {
  
  .header {
    grid-area: 1 / 3 / 3 / 11;
    background-color: ;
    text-align: left;
    padding: 25px;
}
 .nav {
  grid-area: 4 / 1 / 8 / 3;
  background-color: #f1f1f1;
  padding: 0;
}

  .link {
    display: contents;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    
    border: 1px solid #555555;
}

/* styles links within nav bar */

  li a {
    display: block;
    color: black;
    padding: 8px 16px;
    text-decoration: none;
}

  li {
    text-align: center;
    border-bottom: 1px solid #555555;
}

li:last-child {
  border-bottom: none;
}

/* highlights link to signify what page youre on */

li a.active {
  background-color: #343148;
  color: white;
}

/* creates interactive highlight when mouse hovers over link */

li a:hover:not(.active) {
  background-color: #555555;
  color: white;
}


.content {

  grid-area: 3 / 3 / 7  / 8;
  background-color: #CDC6BD;

}

.events {

  grid-area: 3 /8 /7 / 11;
  background-color: #EDE3D2;

}

.info {

  grid-area: 7 / 3 / 9 / 11;
  background-color: #717388;

}

.info2 {

  grid-area: 9 / 3 / 11 /11;
  background-color: #EDE3D2;

}

.footer {

  grid-area: 11 / 3 / 13 /11;
  background-color: #717388;
  

}


/* Desktop Screen Size */
@media (min-width: 996px) {

/* Border Image */

#borderimg {
  border: 10px solid transparent;
  padding: 5px;
  border-image: url(../Image_Assets/border-images/border-image2.jpeg) 45 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 0px;
  border-image: url(../Image_Assets/border-images/border-image2.jpeg) 45 round;
}

.logo_con {
  grid-area: 2 / 1 / 5 / 3;
  display: grid;
  padding: 0;
  width: 100%;
  background-color: #c4c4c9;
}

.mainsite {
  display: grid;
  grid-area: 2 / 4 / 22 / 11;
  grid-template-columns: repeat(12, minmax(0, 1fr)); 
  grid-template-rows: repeat(12, minmax(0, auto));
  gap: 15px; 
  grid-auto-rows: 50px;
}

.header {
  /* display: grid; /* for nested grid edit: 4/17 turning off to see if it helps keep grid tracks equal.*/
  grid-area: 1 / 1 / 3 / 13;
  background-color: #7c8e69;
  background-image: /* url("./Image_Assets/fruitbird.jpg"), url("./Image_Assets/west.jpg"), */ url("../Image_Assets/backgrounds/calimap.jpeg");/* , url("./Image_Assets/banners/flwrpatchroad.jpg"); */
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  /* grid-template-columns: repeat(6, 1fr); /* this puts a nested grid within the header container. I am using this to move the h1 (.fonthead) element around edit: see display:grid */
 /* grid-template-rows: repeat(5, 54px); */ /* see display:grid edit */
  text-align: left;
  padding: 35px;
 /* border-top-left-radius: 70px; */

}
 
/* h1 specifically for header */

.art {
 display: flex;
 justify-content: flex-end;
 align-items: flex-end;
 height: 125%;
 width: 100%;
}


.fonthead {

  grid-area: 5 / 5 / 5 / 7;
  background-color: rgba(250, 240, 230, 0.7);
  border-radius: 0px 10px 0 10px;
  width: 45%;
      
}

  .marquee {
    grid-area: 3 / 1 / 3 / 13;
    background-color: #cea755;
    border-radius: 0px 0px 10px 10px;
}

.q1 {
    padding-top: 5px;
    margin: 0px;
    text-align: center;
    font-size: 15px;
}

 .hidemobile {

  display: block;

}

/* Mobile Menu Turned Off */

.topnav {
  display: none;
}

/* Side Nav Bar */

 .nav {
    grid-area: 5 / 1 / 9 / 3;
    background-color: #c4c4c9;
    padding: 0px;
    border: 8px solid #1e303f;
    border-radius: 10px;


/* FOR FIXED NAV BAR */

/* position: fixed;
   width: 245px;
   left: 15px;
   padding: 0;
   margin: 0;
   top: 285px; */
}

  .link {
    display: contents;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
}

/* styles links within nav bar */

  .pnav {
  text-align: center;
  }

/* li a changes layout of links even though they are confined to ul (.link) with display: contents collapsing into .nav container. Change padding to make them fit the grid layout modified by .nav (sorry if this doesnt make sense future me) */
.link li a {
    display: block;
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    font-size: 20px;
    font-family: RomanceA;
}


/* changes layout of link container in nav bar BUT doesnt change layout of link highlights so dont actually use this to change layout LOL makes it look less unified go to li a selector to change layout of links. ^^^  */
  li {
    text-align: center;
    border-bottom: 0px solid #1e303f;
}

li:last-child {
  border-bottom: none;
}

/* highlights link to signify what page youre on */

li a.active {
  background-color: #343148;
  color: white;
}

/* creates interactive highlight when mouse hovers over link */

.link .li2 a:hover:not(.active) {
  background-color: #c48cbb;
  color: white;
}

.link .li3 a:hover:not(.active) {
  background-color: #8d414e;
  color: white;
}

.link .li4 a:hover:not(.active) {
  background-color: #7c8e69;
  color: white;
}

.link .li5 a:hover:not(.active) {
  background-color: #cea755;
  color: white;
}



/* individual links color */

.li1 {
  background-color: #7c8e69;
}

.li2 {
  background-color: #af4555;
}

.li3 {
  background-color: #c1654e;
}

.li4 {
  background-color: #639ebf;
}

.li5 {
  background-color: #905fac;
}

.content {

  grid-area: 3 / 1 / 6 / 13;
  background-color: #CDC6BD;
  padding: 10px;
}

.imgdesc {

}

.imgdesc img  {
  float: right;
  width: auto;
  height: 170px;
  margin-top: -45px;
}
.vend {
  grid-area: 6 / 1 / 9 / 13;
  background-color: #fddb5a;
  padding: 10px;
  padding-bottom: 30px;
}
.vend h2, p, div {
}

.volun {
  grid-area: 9 / 1 / 12 / 13;
  background-color: #4192a1;
  padding: 10px;
  padding-bottom: 30px;
}

.donate {
  grid-area: 12 / 1 / 15 / 13;
  background-color: #acc466;
  padding: 10px;
  padding-bottom: 30px;
}

.footer {

  grid-area: 18 / 1 / 22 / 13;
  background-color: #717388;

}