* {

  box-sizing: border-box;

}

body {

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

}

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;

}

/*
.cardcontainer {
  background-color: #F76014;
  margin-top: 1rem;
  padding: 1rem;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  font-size: 1rem;
  transition: transform 0.5s ease-in-out;
  transform-style: preserve-3d;
  
}

.cardcontainer:hover {
  cursor: pointer;
}

#front {
  overflow: hidden;
}



#front > img, .back > img {
  height: 200px;
  width: 300px;
  
}

#back {

  transform: rotateY(180deg);
  backface-visibility: hidden;
  text-align: center;
  background: #fff;
  color: black;
  padding: 1rem;
  width: 100%;
  max-width: 1200px;
  height: 100%;
} 

#back h2 {

  margin:  0;

}

#back p {
   padding: 0.25px;
   line-height: 1.5;
}

button {}

*/

/* Meet the Team Cards DELUXE EDITION O_O */

/* .row {
  background-color: transparent;
  width: 100%;
  height: 500px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

 .column {
  float: left;
  width: 100%;
  height: 500px;

} 



.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.cardcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  
}

.page {
  width: 100%;
  height: 500px;
  border-radius: 15px;
  background-color: beige;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  position: relative;
  transition: transform  0.5s ease-in-out;
  transform-style:  preserve-3d;
  border: 3px solid black;
 
}

.page > img {
  width: 100%;
  max-width: 220px;
  height: 100%;
  margin-top: 20px;
 
}

#page1  {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: beige;
  color: black;
}

#page2 {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: beige;
  color: black;
}

#page2 h2 {
  margin: 0;
}

#page2 h3 {

margin: 10px 0;
font-size: 1rem;

}

#page2 p {
  font-size: 1rem;
  padding: 0 25px;
  line-height: 1.5;
}

.socials {
  margin-top: 25px;
}

.socials a {
  font-size: 1rem;
  margin: 0 11;
}

button{
    position: absolute;
    bottom: -2px;
    left: 89%;
    transform: translateX(-50%);
    padding: 5px 20px;
    font-size: 1rem;
    background: beige;
    color: black;
    border: 3px solid black;
    border-radius: 14px;
}

/*


/* Meet the Team Sadness Edition */

.column  {
margin-bottom: 50px;
}


.flip-box {
  background-color: transparent;
  width: 100%;
  height: 650px;
  min-height: 650px;
  border: 1px solid #b1b1b1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
}

.page {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  display: flex;
  flex-flow: column;
 
  
  transition: transform 0.5s ease-in-out;
  transform-style: preserve-3d;
}

.item1 {
  align-self: center;
  width: 200px;
  height: 250px;
  
}

.item1 > img {
  width: 100%;
  max-width: 200px;
  height: 95%;
  margin-top: 10px;
  border: 3px solid black;
  border-radius: 10px;
  object-fit: cover;
}

.item2 {
  align-self: flex-start;
  padding: 0 16px;
} 

.item3 {

}

.item4 {
  /* align-self: end; */
  text-align: center;
  padding: 0 16px;
  
}
  

#page1 {
  text-align: center;
  color: black;
  background-color: #687da3;
  
  
}

#page2 {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: #687da3;
  color: black;
}




button  {
  padding: 0px 10px;
  background: #fff;
  color: black;
  border: 3px solid #b1b1b1;
  display: block;
  margin: auto;
  margin-top: 10px;
}

#pagea {
  background-color: #756309;
}

#pageb {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: #756309;
  color: black;
}

#pagec {
  background-color: #94a997;
}

#paged {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: #94a997;
  color: black;
}

#pagee {
  background-color: #38434f;
}

#pagef {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: #38434f;
  color: black;
}

#pageg {
 background-color: #499d80;
}

#pageh {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: #499d80;
  color: black;
}
        





/* 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;
}

.what {

}

.miss {

}

.comm {
  
}

.MeetTeam {
  text-align: center;
  
}

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

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

.footer {

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

}


/* 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 / 31 / 11;
  grid-template-columns: repeat(12, minmax(0, 1fr)); 
  grid-template-rows: repeat(7, 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/rooms/redroom.jpeg");/* , url("./Image_Assets/banners/flwrpatchroad.jpg"); */
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom 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;
}

.MeetTeam {
  grid-area: 6 / 1 / 8 / 13;
}

.column  {
margin-bottom: 0px;
}


.flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  min-height: 650px;  /* double check if this messes up the grid track placement. */
  border: 1px solid #b1b1b1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
}

.page {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  display: flex;
  flex-flow: column;
 
  
  transition: transform 0.5s ease-in-out;
  transform-style: preserve-3d;
  font-size: calc(0rem + 1vw);
}

.item1 {
  align-self: center;
  width: 200px;
  height: 250px;
  
}

.item1 > img {
  width: 100%;
  max-width: 200px;
  height: 95%;
  margin-top: 10px;
  border: 3px solid black;
  border-radius: 10px;
  object-fit: cover;
}

.item2 {
  align-self: flex-start;
  padding: 0 16px;
} 

.item3 {

}

.item4 {
 /* align-self: end; */
  padding: 0 16px;
}
  

#page1 {
  text-align: center;
  color: black;
  
  
}

#page2 {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  color: black;
}




button  {
  padding: 0px 10px;
  background: #fff;
  color: black;
  border: 3px solid #b1b1b1;
  display: block;
  margin: auto;
  margin-top: 10px;
}

#pagea {
  text-align: center;
}

#pageb {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  color: black;
  text-align: center;
}

#pagec {
 text-align: center;

}

#paged {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  color: black;
  text-align: center;
}

#pagee {
  text-align: center;
}

#pagef {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  color: black;
  text-align: center;
}

#pageg {
  text-align: center;
 
}

#pageh {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  color: black;
  text-align: center;
}

.Card1 {
  grid-area: 8 / 1 / 19 /  7;

}

.Card2 {
  grid-area: 8 / 7 / 19 / 13;
}

.Card3 {
  grid-area: 19 / 1 / 30 / 7;
}

.Card4 {
  grid-area: 19 / 7 / 30 / 13;
}

.Card5 {
  grid-area: 30 / 4 / 41  / 10;
}
/* .events {

  grid-area: 5 / 8 / 10 / 11;
  background-color: #EDE3D2;

}

.info {

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

}

.info2 {

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

} */

.footer {

  grid-area: 42 / 1 / 46 / 13;
  background-color: #717388;

}