/*color scheme*/
:root {
  --darkback:rgba(222, 6, 191, 1);
  --backcolor:black;
  --textcolor:#fc9cff;
  --accentcolor:#274357;
  --boxcolor: 11px 11px 10px -6px
   rgba(39, 67, 87, 1),
10px 10px 23px -7px rgba(222, 6, 191, 1);
}
*, ::before, ::after {
  box-sizing:border-box;
  padding:0;
  margin:0;

}

html {
  font-family:"Zen Dots", sans-serif;
  font-size:16px;
}
body {
  background-color:var(--backcolor);
  color:var(--textcolor);
}
/*font*/
.zen-dots-regular {
  font-family: "Zen Dots", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* nav bar */
#header {
  background-color:var(--backcolor;)
  width:100%;
  height:auto;
  margin:auto;
  border:20px solid var(--accentcolor);
}
h1 {
  font-size:40px;
  text-align:center; 
}
#navbar  {
  margin-top:20px;
  text-decoration:none;
  list-style:none;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-evenly;
  gap:15px;
}
#navbar a {
  color:var(--backcolor);
  text-decoration:none;
}
#navbar a:hover {
  color:var(accentcolor);
  background-color:var(--accentcolor);
}
/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: var(--textcolor);
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

 background color to navbar links on hover */
.navbar a:hover, .dropdown:hover, .dropbtn {
  background-color:var--(darkback);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--textcolor);
  color:var(--textcolor);
  min-width: 160px;
  box-shadow:var(--boxcolor);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color:var(--textcolor);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color:var(--accentcolor);
  color:var(--textcolor);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  color:var(--textcolor);
    overflow:scroll;

}

#header {
background-color:var(--backcolor);
  width:100%;
  height:auto;
  margin:auto;
  border:20px solid var(--accentcolor);
}
h1 {
  font-size:40px;
  text-align:center; 
}
#flex-container {
  display: flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  gap:10px;
}
/*chin picture*/
#fieldofchins img {
   box-shadow:var(--boxcolor);
}
/*video carousel*/
.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: auto;
  box-shadow:var(--boxcolor);
}

.video-track {
  display: flex;
  transition: transform 0.5s ease;
}

.video-slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
}

.video-slide iframe {
  width: 100%;
  height: 60vh;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Navigation arrows */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.nav.prev { left: 10px; }
.nav.next { right: 10px; }

/* Dots */
.dots {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.5rem;
}

.dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #bbb;
  cursor: pointer;
}

.dots button.active {
  background: hotpink;
}
.chinphotos {
  width:100%;
  height:auto;
  box-shadow:var(--boxcolor);
}
.gallery {
  positon: relative;
  width:90%;
  max-width:300px;
}





}
/*styles for screens larger than 768px */
@media screen and (min-width:768px) {
  body {
   
    display: grid;
  	grid-template-rows: 20vh 1fr;
  	grid-template-columns: 20vw 1fr;
  	gap: 0px 5px;
  	width: 100%;
	  height: 100%;
  }
  
  #header {
   grid-area: 1/2/2/3;

  }
  #flex-container {
    grid-area: 2 / 2 / 3 / 3;

    
  }
  #navbar {
    text-align:left;
    grid-area: 1 / 1 / 3 / 2;
    border:3px solid var(--textcolor);
  }
  #navbar {
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    gap:76px;
    flex-wrap:nowrap;
  }
  #fieldofchins img {
   max-width:75%;
   margin-left:10%;


  }

}