* {

  box-sizing: border-box;

}

body {

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

}

h1 {
  font-family: RomanceA;
}

h2 {
  font-family: RomanceA;
}

p {
  font-family: basiic;
}

.f2 {
  font-family: Atlantis;
}

.f3 {
  font-family: AtlantisReg;   
}


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

@font-face {

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

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

  font-family: Atlantis;
  src: url(Fonts/atlantis/AtlantisHeadline-Bold.ttf);
}

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

/* I turned off rows in this container because it was causing smaller browser windows  to stretch their row tracks too far. IDK WHY! */

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

  gap: 20px;
}


/* mobile first */

.icon2 {
  display: none;
}

.icon1 {
  display: none;
}

.icon3 {
  display: none;
}

.icon4 {
  display: none;
}

.icon5 {
  display: none;
}


#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 > * {

  /* border: 3px solid #1e303f; */
  background-color: beige;
  /* padding: 10px; */
  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: 8px 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;

}

.content {

  padding: 10px;

}

 .mstate {

  background-image: url("./Image_Assets/banners/deepsea2.jpg");
  background-size: 165%;
  background-position: bottom left;
  padding: 1rem;
  margin: .5rem;

}

.mission {

  text-align: center;
  color: #EDE3D2;

}

h1 {
  font-size: 26px;
}

.who {
   text-align: center;
}

.info {

  grid-area: 14 / 1 / 23 / 13;
  background-color: #717388;
  background-image: url("./Image_Assets/backgrounds/flwrwht.jpeg");
  background-size: 45%;

}

.info h2 {

 text-align: center;
 background: #514308;
 color: beige;
 border-radius: 10px;
 max-width: 45%;
 margin-left: auto;
 margin-right: auto;

}

/* Carousel using Flex*/

.caracont { /* carousel flex container */

  width: 100%;
  height: 400px;
  padding: 10px;
  display: flex;
  gap: 4vw;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
  flex-wrap: nowrap;

  /* overflow: hidden; */

/* scroll button anchor position reference */

  anchor-name: --my-carousel;

 }

.caracont img {

 max-width: 100%;
 min-width: 0;
 height: 100%;
 object-fit: cover;
 border: 5px solid #241a17;
 border-radius: 20px;

}

/* Carousel  Scroll Buttons */

.caracont::scroll-button(*) {

  border: 0;
  border-radius: 10px;
  font-size: 2rem;
  background: #514308;
  color: beige;
  opacity: 0.9;
  cursor: pointer;
  font-family: RomanceA;
  
  position: absolute;
  position-anchor: --my-carousel;

}

.caracont::scroll-button(*):hover,
.caracont::scroll-button(*):focus {

  opacity: 1;

}

.caracont::scroll-button(*):active {
  
  translate: 1px 1px;

}

.caracont::scroll-button(*):disabled  {

  opacity: 0.2;
  cursor: unset;

}

.caracont::scroll-button(left) {
  content: "<" / "Previous";
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

.caracont::scroll-button(right) {
  content: ">" / "Next";
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}


/*  Pagination Indicator */

.caracont::scroll-marker-group {

  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 27px);
  justify-self: anchor-center;

  display: flex;
  justify-content: center;
  gap: 20px;

}

.caracont li::scroll-marker {

  content: attr(data-accName);
  width: 6px;
  height: 6px;
  background-color: transparent;
  border: 2px solid #514308;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 10px;

}

.caracont li::scroll-marker:target-current {

  background-color:  #514308;

}

/* Turns off scrollbar because its not aesthetically pleasing */

.caracont::-webkit-scrollbar {
  display: none;
}


.caracont li {

  list-style-type: none;
/* turned off bg and border so container in background-image is more clearly seen (see .info) */
 /* background-color: #eeeeee;
  border: 1px solid #dddddd; */ 
  padding: 5px;

  flex: 0 0 100%;

  scroll-snap-align: center;
  min-width: 0;
}

.caracont li:hover {
  cursor: pointer;
}

/* .caracont li:nth-child(even) {

 background-color: cyan; 

} */

.modal {
  display: none;
}

li img {
  pointer-events: none;
  
}

/*  Multi-Page Carousel using Columns */

.caracont2 {
  
  width: 100%;
  height: 400px;
  padding:  10px;
  
  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;

  anchor-name: --my-carousel2;
 
  scroll-marker-group: after;

}

.caracont2 img {

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

}

.caracont2 li  {
  
  list-style-type: none;
  
  display: inline-block;
  height: 100%;
  width: 275px;

  background-color: #eeeeee;
  background-image: url("./Image_Assets/backgrounds/flwrvoid.jpeg");
  background-size: 50%;
  border: 5px solid #1a0f1f;
  border-radius: 10px;

  padding:  20px;
  margin: 0 10px;
  
  text-align: center;
}

.caracont2 li:nth-child(even) {
  
  background-color: cyan;

}

.caracont2::column {

  scroll-snap-align: center;

}

.caracont2::scroll-button(*) {

  border: 0;
  font-size: 2rem;
  background: #1c494b;
  border-radius: 10px;
  color: beige;
  opacity: 0.7;
  cursor: pointer;
  font-family: RomanceA;

  position: absolute;
  position-anchor: --my-carousel2;

}

.caracont2::scroll-button(*):hover,
.caracont2::scroll-button(*):focus {
  
  opacity: 1;

}

.caracont2::scroll-button(*):active {
  
 translate: 1px 1px;

}

.caracont2::scroll-button(*):disabled {
  
  opacity: 0.2;
  cursor: unset;

}

.caracont2::scroll-button(left) {
 
 content: "<";

}

.caracont2::scroll-button(right) {
 
  content: ">";

}

.caracont2::scroll-button(left) {

  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);

}

.caracont2::scroll-button(right) {
  
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);

}

.caracont2::scroll-marker-group {

  position: absolute;
  position-anchor: --my-carousel2;
  top: calc(anchor(bottom) - 30px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 15px;

}


.caracont2::column::scroll-marker {
 
  content: "";
  width: 6px;
  height: 6px;
  background-color: transparent;
  border: 2px  solid #1c494b;
  border-radius:  10px;

}

.caracont2::column::scroll-marker:target-before {

  border: 2px solid grey;

}

.caracont2::column::scroll-marker:target-current {
  
  background-color: beige;
  transition: all 0.7s;

}


caracont2::column::scroll-marker:target-after {

  border: 2px  solid red;
  background-color:  red;

}

/* Turns off scrollbar because its not aesthetically pleasing */

.caracont2::-webkit-scrollbar {
  display: none;
}

.fonthead {

  text-align: center;

}

.q1 {

  text-align: center;

}



.team {

  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.events {

  text-align: center;

}

.flyimg {

  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}



.info2 {

  
  background-color: #EDE3D2;
  background-image: url("./Image_Assets/backgrounds/gospel.jpeg");
  background-size: 50%;

}

.info2 h2 {

  text-align: center;
  background: #1c494b;
  color: beige;
  border-radius: 10px;
  width: 55%;
  margin-left: auto;
  margin-right: auto;

}

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


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



 

/* tablet screen size */

@media (min-width: 576px)  {

 /* .logo_con {
    grid-area: 2 / 1 / 6 / 3;
    display: grid;
    
    background-color: #c4c4c9;
    } */

 /* .logo_img {

    width: 50px;
    height: 50px;
} */
  
  .header {
    grid-area: 1 / 3 / 3 / 11;
   /* background-color: ; */
    text-align: left;
    padding: 25px;
}

.hidemobile {

  display: none;

}

  .nav {
  grid-area: 4 / 1 / 8 / 3;
  background-color: #f1f1f1;
  padding: 0;
}

  .link {
    display: block;
    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;
  text-align: center

}

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

/* BG 1 */

body {
  background-image: url(./Image_Assets/backgrounds/flowertab.jpeg);
  background-size: 200px;
}

h1 {
  font-size: 2em;
}

  .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 / 31 / 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, auto));
    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 / 3 / 13;
  background-color: #7c8e69;
  background-image: /* url("./Image_Assets/fruitbird.jpg"), url("./Image_Assets/west.jpg"), */ url("./Image_Assets/banners/walkfeet.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; */

/* FOR FIXED HEADER */

/* position: fixed;
   width: 1360px;
   left: 285px;
   height: 180px */
}

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

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

}

 .mstate {

  background-image: url("./Image_Assets/banners/deepsea2.jpg");
  background-size: 165%;
  background-position: bottom left;
  padding: 1rem;
  margin: .5rem;

}

.mission {

  text-align: center;
  color: #EDE3D2;

}

.who {

  text-align: center;

}


.team {
  height: auto;
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  border: 4px solid #1e303f;
}

.events {

  grid-area: 4 / 8 / 13 / 13;
  background-color: #EDE3D2;
  text-align: center;

}

.flyer {
  display: flex;
  justify-content: center;
  margin: 10px;
}

.flyimg {
  width: 100%;
}

.info {

  grid-area: 14 / 1 / 23 / 13;
  background-color: #717388;
  background-image: url("./Image_Assets/backgrounds/flwrwht.jpeg");
  background-size: 45%;

}

.info h2 {

 text-align: center;
 background: #514308;
 color: beige;
 border-radius: 10px;
 max-width: 30%;
 margin-left: auto;
 margin-right: auto;

}

/* Carousel using Flex*/

.caracont { /* carousel flex container */

  width: 100%;
  height: 390px;
  padding: 10px;
  display: flex;
  gap: 4vw;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
  flex-wrap: nowrap;

  /* overflow: hidden; */

/* scroll button anchor position reference */

  anchor-name: --my-carousel;

 }

.caracont img {

 max-width: 100%;
 min-width: 0;
 height: 100%;
 object-fit: cover;
 border: 5px solid #241a17;
 border-radius: 20px;

}

/* Carousel  Scroll Buttons */

.caracont::scroll-button(*) {

  border: 0;
  border-radius: 10px;
  font-size: 2rem;
  background: #514308;
  color: beige;
  opacity: 0.9;
  cursor: pointer;
  font-family: RomanceA;
  
  position: absolute;
  position-anchor: --my-carousel;

}

.caracont::scroll-button(*):hover,
.caracont::scroll-button(*):focus {

  opacity: 1;

}

.caracont::scroll-button(*):active {
  
  translate: 1px 1px;

}

.caracont::scroll-button(*):disabled  {

  opacity: 0.2;
  cursor: unset;

}

.caracont::scroll-button(left) {
  content: "<" / "Previous";
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

.caracont::scroll-button(right) {
  content: ">" / "Next";
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}


/*  Pagination Indicator */

.caracont::scroll-marker-group {

  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 27px);
  justify-self: anchor-center;

  display: flex;
  justify-content: center;
  gap: 20px;

}

.caracont li::scroll-marker {

  content: attr(data-accName);
  width: 6px;
  height: 6px;
  background-color: transparent;
  border: 2px solid #514308;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 10px;

}

.caracont li::scroll-marker:target-current {

  background-color:  #514308;

}


.caracont li {

  list-style-type: none;
/* turned off bg and border so container in background-image  is more clearly seen (see .info) */
 /* background-color: #eeeeee;
  border: 1px solid #dddddd; */ 
  padding: 5px;

  flex: 0 0 100%;

  scroll-snap-align: center;
  min-width: 0;
}

/* .caracont li:nth-child(even) {

  background-color: cyan;

} */

/* Modal Lightshow  Events Photos */

.info > .column {
   padding: 0 8px;
}

.info:after {
  content: "";
  display: table;
  clear: both;

}

/* Create 4 equal columns that float next to eachother */
.column {

 float: left;
 width: 25%;

}

/* The Modal (background) */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 40px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

li img {
  pointer-events: all;
  cursor:pointer;
}

/* Modal Content */

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 890px;
}

/* The Close  Button */

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

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

/* Hide the Slides by Default */

.mySlides {
  display: none;
}

/* Next & Previous Buttons */
.prev, 
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding:  16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}  

/* Position the "next button" to right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */

.prev:hover, 
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.img.demo {
  opacity: 0.6;
}

.active, 
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
   transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.explore1 {
 
  grid-area: 23 / 1 / 25 / 13;
  text-align: center;
  background-color: beige;

}

.info2 {

  grid-area: 25 / 1 / 34 / 13;
  background-color: #EDE3D2;
  background-image: url("./Image_Assets/backgrounds/gospel.jpeg");
  background-size: 50%;

}

.info2 h2 {

  text-align: center;
  background: #1c494b;
  color: beige;
  border-radius: 10px;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

/*  Multi-Page Carousel using Columns */

.caracont2 {
  
  width: 100%;
  height: 380px;
  padding:  10px;
  
  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;

  anchor-name: --my-carousel2;
 
  scroll-marker-group: after;

}

.caracont2 img {

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

}

.caracont2 li  {
  
  list-style-type: none;
  
  display: inline-block;
  height: 100%;
  width: 275px;

  background-color: #eeeeee;
  background-image: url("./Image_Assets/backgrounds/flwrvoid.jpeg");
  background-size: 50%;
  border: 5px solid #1a0f1f;
  border-radius: 10px;

  padding:  20px;
  margin: 0 10px;
  
  text-align: center;
}

.caracont2 li:nth-child(even) {
  
  background-color: cyan;

}

.caracont2::column {

  scroll-snap-align: center;

}

.caracont2::scroll-button(*) {

  border: 0;
  font-size: 2rem;
  background: #1c494b;
  border-radius: 10px;
  color: beige;
  opacity: 0.7;
  cursor: pointer;
  font-family: RomanceA;

  position: absolute;
  position-anchor: --my-carousel2;

}

.caracont2::scroll-button(*):hover,
.caracont2::scroll-button(*):focus {
  
  opacity: 1;

}

.caracont2::scroll-button(*):active {
  
 translate: 1px 1px;

}

.caracont2::scroll-button(*):disabled {
  
  opacity: 0.2;
  cursor: unset;

}

.caracont2::scroll-button(left) {
 
 content: "<";

}

.caracont2::scroll-button(right) {
 
  content: ">";

}

.caracont2::scroll-button(left) {

  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);

}

.caracont2::scroll-button(right) {
  
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);

}

.caracont2::scroll-marker-group {

  position: absolute;
  position-anchor: --my-carousel2;
  top: calc(anchor(bottom) - 30px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 15px;

}


.caracont2::column::scroll-marker {
 
  content: "";
  width: 6px;
  height: 6px;
  background-color: transparent;
  border: 2px  solid #1c494b;
  border-radius:  10px;

}

.caracont2::column::scroll-marker:target-before {

  border: 2px solid grey;

}

.caracont2::column::scroll-marker:target-current {
  
  background-color: beige;
  transition: all 0.7s;

}

caracont2::column::scroll-marker:target-after {

  border: 2px  solid red;
  background-color:  red;

}

.explore2 {
 
  grid-area: 34 / 1 / 36 / 13;
  text-align: center;
  background-color: beige;

}

.footban {
  grid-area: 39 / 1 / 45 / 13;
}



.footer {

  grid-area: 45 / 1 / 50 / 13;
  background-color: #717388;

}

.icon1 {
 grid-area: 45 / 1 / 50 / 5;
 z-index: 1;
 display: block;

}

.icon2 {
  grid-area:  2 / 1 / 2 / 2;
  z-index: 1;
  display: block;
  
}

.icon3 {
  grid-area: 26 / 1 / 28 / 3;
  display: block;
}

.icon4 {
  grid-area: 26 / 11 / 29 / 13;
  display: block;
}

.icon5 {
  grid-area: 45 / 9 / 50 / 12;
  z-index: 1;
  display: block;
}