* {
  box-sizing: border-box;
}

body {
  width: 90%;
  margin: 2em auto;
  background-image: url("../Image_Assets/backgrounds/flwrptch.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);
}

/* Mobile First */

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

.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
/*grid-template-rows: repeat(12, 1fr);
  grid-auto-rows: 1fr;
*/
  gap: 20px;
}

.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 For Desktop */
  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 {
    background-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;
}

/* Main Site */

/* .mainsite {

}

.header {

}

.content {

} */

/* Mobile Gallery*/

.tabcontain {
    background-image: url("../Image_Assets/backgrounds/flwrvoid.jpg");
    background-size: 100px;
    width: 100%;
    height: 900px;
  }

.tabmob {
  overflow:hidden;
  border: 1px solid #ae9a82;
  background-color: #e2dbcc;
  
}

.tabmob button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition:  0.3s;
  font-family: basiic;
  font-size: 16px;
}

.tabmob button:hover {
  background-color: #cda446;
}

.tabmob button.active {
  background-color: #d25e48;
}
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 100%;
    border-left: none;
    height: 95%;
    background-color: #f1f1f1;
    /* background-image: url("../Image_Assets/backgrounds/flwrvoid.jpg");
    background-size: 20%; */
    overflow: scroll; /* does this make it easier to traverse? */
  }
/* the tab content were not display: none on load causing the three pages to show stacked on top of each other. JS issue? This is a work around for now*/
  .tabdisp {
    display: none;
  }


.imgdesc {
  font-family: basiic;
}

/* Mobile Image Gallery */

div.gallery {
  border: 1px solid #ccc;
  background-color: #d2c2b9;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 100%;
  margin: 10px 0;
  
}

.epresponsive {
  padding: 0 6px;
  float: left;
  width: 100%;
  margin: 10px 0;
  
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Hide Side Tab + Side Nav on Mobile */
.sidetab {

display: none;

}

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

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

.gallery img {
pointer-events: none;
}

/* @media (min-width: 576px) {

.responsive {
 width: 24.99999%;
}
} */

@media (min-width: 996px) {

/* Desktop Gallery */



/* Border Image */

#borderimgtab {
  border: 5px solid transparent;
  padding: 0px;
  border-image: url(../Image_Assets/border-images/border-image2.png) 45 round;
}

#borderimg {
  border: 5px 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;

}

.logo_img {
   
    width: 100%;
    height: 100%;
}

.mainsite {
    display: grid;
    grid-area: 2 / 4 / 35 / 11;
    grid-template-columns: repeat(12, minmax(0, 1fr));  /* minmax solved the nested grid template from making the content within it long and scrolling. Keeps it compact and tidy. 1fr in the minmax function makes the columns not take up unnecessary space which pushed the remaining columns onto one side. */ 
    grid-template-rows: repeat(12, minmax(0, 50px));
    gap: 0px; 
    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 / 4 / 13;
  background-color: #7c8e69;
  background-image: /* url("./Image_Assets/fruitbird.jpg"), url("./Image_Assets/west.jpg"), */ url("../Image_Assets/rooms/sunshine.jpeg");/* , url("./Image_Assets/banners/flwrpatchroad.jpg"); */
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  
}

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

.fonthead {

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

  .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;
}

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

.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 */

.link 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: 4 / 1 / 6 / 13;
  background-color: #CDC6BD;
  padding: 10px;

}





  /* Tab Container */
  .tabcontain {
    grid-area: 6 / 1 / 26 / 13;
    border: 3px solid #ff0000;
    background-color: #ff458a;
    width: 100%;
    height: 900px;
  }
  /* Tab Style */
  .tab {
    float: left;
    border:  1px solid #ccc;
    background-color:  #f1f1f1;
    width: 10%;
    height: 100%;
    }

  /* Style buttons used to open tab content */
   .tab button {
     display: block;
     background-color: inherit;
     color: black;
     padding: 22px 16px;
     width: 100%;
     border: none;
     outline: none;
     text-align: left;
     cursor: pointer;
     transition: 0.3s;
        }

  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
   }

  /* Create an  active/current "tab button" class */
  .tab button.active {
    background-color: #ccc;
  }

  /* Style the tab content */

/* On Mobile tabcontent has width of 100% due to the tab bar being on the top rather than on the side */

  .tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 100%;
    border-left: none;
    height: 95%;
    background-color: #e7e1d7;
    overflow: scroll; /* does this make it easier to traverse? */
  }
/* the tab content were not display: none on load causing the three pages to show stacked on top of each other. JS issue? This is a work around for now*/
  /* .tabdisp {
    display: none;
  } */



.responsive {
  width: 24.99999%;
  margin: 6px 0;
  position: relative;
  margin-bottom: 37%;
}

.epresponsive {
  width: 24.99999%;
  margin: 6px 0;
  position: relative;
  margin-bottom: 42%;
}

.gallery {
position: absolute;
}

.gallery .imgdesc {
  font-size: calc(0rem + 1vw);
}

.modal {
  display: none;
  position:  fixed;
  z-index: 1;
  padding-top: 30px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 33%;
  /* max-width: 700px; */
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 95px;
}

/* Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-family: RomanceA;
  transition: 0.3s;
}

.close:hover, .close:focus  {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.gallery img {
pointer-events: all;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens 
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
*/


}
.footer {

  grid-area: 25 / 1 / 30 / 13;
  background-color: #717388;

}