:root {
  --primary: #FFC636;
  --secondary: #c8cdcf;
  --alternative: #ebba34;
  --header: #494a4a;
  --headertext: #65686b;
}


*, *::before, *::after {
    box-sizing: border-box;
}


html, body, h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;

}



body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    background: var(--secondary);
    font-family: 'Libre Franklin', Arial, sans-serif;

}


.myvideos {

  padding-bottom: 40px;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(2, 1fr);

}


video {
  width: 90%;
  height: 100%;
  margin: 0 2px;
  margin-top: 20px;
  margin-bottom: 5px;
}





img {
    max-width: 100%;
}

h1 {
    font-size: 3rem;
    margin-top: 0;
}

.my-header { 
display: flex;
justify-content: space-between;
align-items: center;
}





header.first-content-header {
  margin-top: 0;
}

.header-title{
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}





.h1-title{
    font-family: 'Gloria Hallelujah', cursive;
    padding: 0;
    color: var(--headertext);
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 0;
}

.h1-title__link{
  text-decoration: none;
  color: var(--headertext);
}

.h1-subtitle{
    /* font-family: 'Gloria Hallelujah', cursive; */
    font-family: "Yatra One", system-ui;
    padding: 0;
    color: var(--headertext);
    font-size: 0.8em;
    /*margin-top: -0.65em;*/
}

.container {
    width: 95%;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 60px;
}

.frontpage-photos {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ########################################*/
  /* max-width: 100%; */
}



.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  font-size: 1.8em;
  margin: 0 auto;
  width: 80%;
  max-width: 600px;
}

.login-h1-title {
  font-family: 'Gloria Hallelujah', cursive;
  padding: 0;
  color: var(--headertext);
  font-size: 0.6em;
  margin-top: 15px;
  margin-bottom: 25px;
}

.form-frame {
  min-height: 40vh;
  border-radius: 9px;
  padding: 0 10px;
  background: #bebdbf;
  border: 1px solid #BFBFBF;
  box-shadow: 10px 10px 5px #aaaaaa;
  display: grid;
  grid-template-rows: repeat(3, 110px);
  align-content: space-around;

}


form {
  max-width: 400px;
  margin: 0 auto;
  padding-bottom: 20px;
}


input {
  font-size: 13px;
 outline: none;
}


input[type=password] {
  width: 50%;
  padding: 12px 15px;
  margin: 8px 0;
  border: none;
  border-radius: 5px;
}

input[type=submit] {
  padding: 12px 20px;
  margin: 8px 0;
  color: #65686b;
  border: none;
  border-radius: 5px;
-webkit-appearance: none;
background-color: white;
cursor: pointer;
}


.guest-text {
  padding-top: 70px;
}

.guest-text p {
  font-size: 18px;
  font-family: 'Arial';
  text-align: right;
}

.guest-text a {
  text-decoration: none;
  color: var(--headertext);
}


.guest-text-guide {
  padding-top: 0px;
}


.guest-text-guide a {
  text-decoration: none;
  color: var(--headertext);
}

p.guidance {
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 12px;
}

p.link-arrow {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-family: 'Arial';
  text-align: right;
}


.arrow {
  font-size: 22px;
}


.logo {
    height: 30px;
}


#my-photos {
  padding-top: 10px;
  padding-bottom: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
}

#my-photos a {
  margin: 0;
  padding: 0;
}

#my-photos img {
  max-width: 100%;
  display: block;
  border-radius: 8px;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
  /*box-shadow: 0 2px 6px 0px rgba(0, 0, 0, 0.4);*/
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.35);
}



.lg-object {
  border-radius: 14px !important;
  padding-right: 8px;
  padding-left: 8px;
}












.photo-item {
  position: relative; /* Key for overlay positioning */
}

.photo-link img {
  display: block;
  max-width: 100%; /* Ensure the image fits inside its container */
  height: auto;
}


.overlay-container {
  position: absolute;
  bottom: 0; /* Align to the bottom of the photo */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between; /* Push buttons to opposite corners */
  align-items: center; /* Center buttons vertically within the container */
  padding: 10px; /* Add some spacing around the edges */
  padding-bottom: 0px;
  box-sizing: border-box;
}


.vote-btn {
  position: relative;
  background: none; /* Remove background color */
  border: none; /* Remove border */
  color: #e3e3e3;
  display: flex; /* Align icon and count horizontally */
  align-items: center; /* Center icon and count vertically */
  padding: 0;
  cursor: pointer;
}

.vote-btn {
  display: flex; /* Align thumb and count horizontally */
  align-items: center; /* Center vertically */
  padding: 0;
  background: none;
  border: none;
  cursor: pointer; /* Maintain pointer behavior for the thumb */
}


.vote-btn:hover {
  /*background-color: rgba(255, 255, 255, 0.2); /* Optional subtle hover effect */
  /*color: #ffffff;*/
}

.vote-btn .thumb-icon {
  color: white; /* Default thumb color */
  font-size: 16px; /* Default thumb size */
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth animation */
}


/* Remove hover effect from the entire button */
.vote-btn:hover {
  /* No hover styles here */
}

/* Add hover effect to the thumb icon only */
.vote-btn .thumb-icon:hover {
  /*color: white; /* Optional hover effect for the thumb */
  /*transform: scale(1.5); /* Slightly increase thumb size */
  /*transition: transform 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth animation */
}




.vote-btn .vote-count {
  color: white; /* Ensure vote count stays consistent */
  font-size: 14px; /* Keep vote count visually distinct */
}

.vote-btn .vote-count {
  pointer-events: none; /* Prevent the vote count from responding to hover or clicks */
  color: white; /* Default text color for the count */
}


.thumbs-down {
  margin-right: 0; /* Reset any auto margins */
  display: flex;
  align-items: center; /* Center vertically */
  gap: 5px; /* Add spacing between the icon and count */
}

.thumbs-down .vote-circle {
  flex-direction: row; /* Icon first, then count */
}

.thumbs-down .thumb-icon {
  font-size: 16px; /* Size of thumbs-down icon */
}

.thumbs-up {
  margin-left: 0; /* Reset any auto margins */
  display: flex;
  align-items: center; /* Center vertically */
  gap: 5px; /* Add spacing between the count and icon */
}

.thumbs-up .vote-circle {
  flex-direction: row-reverse; /* Count first, then icon */
}

.thumbs-up .thumb-icon {
  font-size: 16px; /* Size of thumbs-up icon */
}

.vote-circle {
  display: flex; /* Align icon and count horizontally */
  gap: 5px; /* Add spacing between icon and count */
  align-items: center; /* Center vertically */
}

.overlay-container form {
  padding: 0; /* Remove any default padding */
  margin: 0; /* Reset margin as well, just in case */
}


button {
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  border: none;
  font-size: 12px; /* Controls both button text and icon size */
  /*color: #e3e3e3; */ /* Default text and icon color */
  cursor: pointer;
  border-radius: 50%; /* Optional: make buttons circular */
  padding: 8px;
  outline: none;
}

button:hover {
  /*background-color: rgba(255, 255, 255, 0.8); /* Light background on hover */
  /*color: black; /* Hover text/icon color */
  /*transform: scale(1.0); /* Slight zoom effect */
}

button:active {
  transform: none; /* Reset the scale on click */
}

.thumbs-down {
  /* margin-right: auto; */ /* Aligns to the left */
}

.thumbs-up {
  /* margin-left: auto; */ /* Aligns to the right */
}


.vote-btn.voted-up .thumb-icon {
  /*color: white; /* Change thumbs-up icon to white */
}

.vote-btn.voted-down .thumb-icon {
  /*color: white; /* Change thumbs-down icon to white */
}

.vote-btn .thumb-icon {
  color: white; /* Default thumb color */
  font-size: 16px; /* Default thumb size */
  transition: transform 0.2s ease-in-out; /* Smooth size animation */
}

.vote-btn.voted-up .thumb-icon,
.vote-btn.voted-down .thumb-icon {
  /*transform: scale(1.2); */ /* Slightly increase size when voted */
  color: lightgrey;
}



/* Override active state to prevent transparency */
.vote-btn:active {
  background-color: inherit; /* Use the current background color */
  transform: none; /* Disable zoom effect */
}

.vote-btn:focus {
  outline: none; /* Remove the default focus outline, if undesired */
  background-color: inherit; /* Prevent focus from interfering with "voted" styles */
  /* */
  transform: none; /* Reset any hover transformations */
}

/* Mobile-specific fix to disable hover effects */
@media (hover: none) {
   /* .button:hover { */
      /* .button.vote-btn:hover { */
      .button.vote-btn:hover,
      .button.vote-btn:focus {
      transform: none; /* Disable zoom effect */
      outline: none; /* Remove focus outline, if needed */
  }
}


.vote-count {
  font-size: 14px; /* Make the count more prominent */
  color: #e3e3e3; /* Ensure consistent text color */
  text-align: center; /* Center-align the number */
  position: static; /* Remove absolute positioning */
  font-weight: bold; /* Make the text bold */
}

.no-faves {
  text-align: center;
  font-size: 20px;
  margin: 50px auto;
  width: 90%; /* Adjust width for better responsiveness */
  color: #555;
}

h4 i {
  color: #8e8d8d; /* Heart color */
  margin: 0 5px; /* Add spacing around the heart */
}






.lg-outer .lg-sub-html {
  transition: transform 0.4s ease-in-out;
  }



.lg-item .vote-overlay {
  position: absolute; /* Ensures the overlay is positioned relative to the image */
  bottom: 20px; /* Place the overlay at the bottom of the lightbox */
  left: 50%;
  transform: translateX(-50%); /* Centers the overlay horizontally */
  display: flex; /* Align the thumbs buttons horizontally */
  justify-content: center; /* Centers the buttons within the overlay */
  gap: 15px; /* Adds spacing between thumbs up and thumbs down buttons */
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background for better visibility */
  padding: 10px 20px; /* Adds space around the buttons */
  border-radius: 8px; /* Smoothens edges for a modern look */
  z-index: 1000; /* Ensures the overlay sits above other lightbox elements */
}

.lg-item .vote-btn {
  display: flex; /* Centers the icon and count inside the button */
  align-items: center; /* Ensures icon and count are vertically aligned */
  background: none; /* Removes default button styling */
  border: none; /* Removes borders */
  cursor: pointer; /* Adds pointer cursor for interaction */
  font-size: 16px; /* Sets an accessible font size */
  color: #fff; /* Ensures text and icons contrast with the background */
}

.lg-item .vote-btn:hover {
  transform: scale(1.1); /* Slightly enlarges the button on hover for feedback */
  color: #ffcc00; /* Optional hover color for highlighting */
}

.lg-item .vote-circle {
  display: flex;
  align-items: center;
  justify-content: center; /* Ensures the icon and count are centered within the circle */
}

.lg-item .thumb-icon {
  font-size: 20px; /* Size of the thumbs icon */
  margin-right: 5px; /* Adds space between the icon and the count */
}

.lg-item .vote-circle .vote-count {
  font-size: 14px; /* Size of the vote count text */
  color: #fff; /* Matches icon color for consistency */
}





.lg-sub-html {
  bottom: auto !important;       /* Disable default bottom positioning THIS IS IMPORTANT */
  top: 0 !important;             /* Position at the very top of the lightbox */
  width: 100%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}


.lg-sub-html h3:not(:empty) {
  color: white;
  font-weight: normal;
  padding: 2px 12px 4px; /* Adds space inside the box */
  background: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */
  border: 1px solid lightgrey; /* White border */
  border-radius: 7px; /* Rounded corners */
  display: inline-block; /* Ensures the box wraps neatly around the text */
}


.photo-item form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}


















#toolbar-vote-container {
  display: inline-flex; /* Keep thumbs in a row */
  align-items: center; /* Vertically align contents */
  gap: 10px; /* Space between thumbs-up and thumbs-down */
  margin-left: 20px; /* Move everything slightly to the right */
}

#toolbar-vote-container .vote-count {
  font-size: 14px; /* Adjust font size */
  color: #fff; /* Match toolbar color */
}

#toolbar-vote-container i {
  margin-left: 5px; /* Add space between count and icon */
}



.disabled {
  pointer-events: none;
  opacity: 0.6;
}

.voted-up {
 /* color: green; */ /* Example: green for thumbs-up */
 /*opacity: 0.6; */
}

.voted-down {
 /* color: red; *//* Example: red for thumbs-down */
 /*opacity: 0.6; */
}

i.thumb-icon.voted-up {
  opacity: 0.6; /* Adjust the opacity value as needed */
}

i.thumb-icon.voted-down {
  opacity: 0.6; /* Adjust the opacity value as needed */
}


i[disabled="true"] {
  pointer-events: none;
  opacity: 0.6; /* Optional: visually indicate it's disabled */
}


i.fas.fa-thumbs-up.thumb-icon {
 /* padding-bottom: 24px; */ /* Adjust the value as needed */
}

i.fas.fa-thumbs-up {
  padding-bottom: 7px; /* Adjust the value as needed */
 }
 

/* This rule applies to any element with class thumb-icon that is a descendant of a disabled <button>     */
 button:disabled .thumb-icon {
  opacity: 0.6; /* Adjust the opacity value as needed */
}

#delete-container {
  display: flex;
  justify-content: right;
  align-items: center;
  margin: 0;
}


#deleteLikesButton {
  padding: 5px;
  padding-bottom: 0px;
  font-size: 12px;
  color: white;
  cursor: pointer;
  border-radius: 10%;
  background-color: grey;
}








/*
##################################################
*/


.sticky-top {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #571c1c;
  color: white;
  padding: 10px;
  box-sizing: border-box; /* Include padding in the element's total width */
  z-index: 1;
  height: 50px; /* Set a consistent height */
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%; /* Ensure it takes the full height of the parent */
}

.hamburger {
/*  display: none; 
  font-size: 30px; 
  cursor: pointer;
  order: -1; 
  padding: 10px; 
  padding-top: 5px; */
}

.header-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%; /* Ensure it takes the full height of the parent */
}

.title {
  color: white;
  text-decoration: none;
  font-size: 24px;
  text-align: left;
  flex-shrink: 1; /* Allow it to shrink as needed */
  flex-grow: 0; /* Prevent it from growing */
  margin-right: 20px; /* Space between title and nav */
  width: auto; /* Make width dynamic based on content */
}


.content {
  padding-top: 60px; /* Adjust based on the header height */
}


.nav {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  max-height: none; /* Ensure no height restriction on desktop */
  overflow: visible; /* Default overflow */
  transition: none; 
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* Center nav items */
  flex-grow: 1;
}

.nav__item a {
  color: #959595;
  text-decoration: none;
}



.nav__item a.active {
  color: white; /* Change to your preferred color */
}



.title-container .h1-subtitle {
  display: none; /* Hide by default */
}


/*
##################################################
*/





.hamburger {
  font-size: 42px;
  cursor: pointer;
  padding-bottom: 6px;
}


.hamburger {
  display: none;
}



/* Adjust width of the mobile menu panel */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: auto;
  max-width: 80%; /* Optional: Limit the maximum width */
  background-color: #d3d0d0;
  overflow-x: hidden;
  transition: right 0.4s ease;
  z-index: 1000;
  padding: 10px; /* Add padding for some space around the text */
}


.mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav__item {
  padding: 10px;
  border-bottom: 1px solid #444;
}

.mobile-nav__item a {
  text-decoration: none;
  color: #868484;
  display: block;
}

.close-btn {
  font-size: 45px;
  cursor: pointer;
  padding: 10px;
  display: block;
  text-align: left;
  color: #868484;
}


.open {
  right: 0;
}


.nav__link.active {
  color: white;
  /* background-color: #333; */ /* Optional: Highlight with a background color */
}



@media (min-width: 690px) {

.overlay-container {
  padding-right: 20px;
}

}




@media (max-width: 720px) {

  .overlay-container {
    /*padding-right: 10px;*/
  }



  .frontpage-photos img {
    content: url("../images/FrontPage/frontpage1-mobile.png"); 
    border-radius: 0px;
  }


/*
##################################################
*/


.title-container .h1-subtitle {
  display: inline-block; /* Ensure subtitle is visible on mobile */
  font-size: 18px; /* Adjust subtitle size as needed */
  margin-left: 25px; /* Space between title and subtitle */
  color: grey; /* Adjust subtitle color */
}

.title-container {
  text-align: center;
  flex-grow: 1; /* Center the title */
}

/* needed to break the subtitle position from the flex constraint, tied to title */
.title-container h1.h1-subtitle {
  position: relative;
  top: -2px; /* Adjust this value to move the element up or down */
}

.title {
  text-align: center;
  flex-grow: 1; /* Center the title */
  margin-right: 0px;
}





/*
##################################################
*/


.hamburger {
  display: block;
}

/* hide the desktop menu on smaller screens */
.nav {
  display: none;
}

.heart-icon {
  /* margin-top: 55px; */
  padding-left: 5px; /* Adjust spacing */
}
.menu-thumb-icon {
  /* margin-top: 55px; */
  padding-left: 5px; /* Adjust spacing */
}


}


@media (min-width: 350px) {

  .login-h1-title {
    font-size: 0.9em;
  }

  .form-frame {
    padding: 0 30px;
  }

  input {
    font-size: 18px;
  }


}


@media (min-width: 390px) {


  #my-photos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
  }

}



@media (min-width: 721px) {



  .overlay-container {
    padding-right: 10px;
  }




  .frontpage-photos img {
    content: url("../images/FrontPage/frontpage1-desktop.png"); /* Or <img src="image1.jpg" alt=""> in the HTML */
    border-radius: 0px;
  }


  body {
    overflow-y: scroll; /* Ensure vertical scrollbar is always present on desktop, fixes centre problems with nav bar when no
    scroll is present, versus when it is - stops the nav items moving slightly left to right */
    /* overflow-x: hidden; */ /* Prevent horizontal scrolling */
}


  .myvideos {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 40px;
    /* grid-gap: 2px; */
  }
  
  
  video {
    width: 90%;
  }


  #my-photos{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 12px;
  }

  #my-photos img{
    margin-top: 0;
  }

  .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
  }


/*
##################################################
*/


.header-container {
  justify-content: space-between; /* Ensure title and nav are spaced correctly */
  width: 100%;
  height: 100%; /* Ensure it takes the full height of the parent */
}


.title {
  text-align: left;
  font-size: 16px;
  flex-shrink: 1; /* Allow it to shrink as needed */
  flex-grow: 0; /* Prevent it from growing */
  margin-right: auto; /* Ensure title takes up appropriate space */
  width: auto; /* Make width dynamic based on content */
}

.nav {
  display: flex;
  justify-content: center; /* Center nav items */
  flex-grow: 1;
}


.nav__list {
  flex-direction: row;
  justify-content: center; /* Center the nav items */
  flex-grow: 1;
}

.nav__item {
  margin: 0 8px;
}

.nav__item a {
  /* font-size: 12px; */
  font-size: 14px;
  transition: color 0.3s; /* Smooth transition for color change */
}



.nav__item a:hover:not(.active) {
  color: white; /* Change color on hover for non-active links */
}


/*
##################################################
*/



}

@media (min-width: 940px) {


  }






@media (min-width: 1100px){

  .nav__item {
    margin: 0 18px;
  }

  .nav__item a {
    font-size: 18px;
  }



  #my-photos{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 12px;
    margin: auto;
  }

  #my-photos img{
    margin-top: 0;
  }

  .title {
    text-align: left;
    font-size: 24px;
    flex-shrink: 1; /* Allow it to shrink as needed */
    flex-grow: 0; /* Prevent it from growing */
    margin-right: auto; /* Ensure title takes up appropriate space */
    width: auto; /* Make width dynamic based on content */
  }


}


.soon {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 90vh; /* Almost full viewport height, 90%*/

}

.soon-text{
  text-align: center; /* Optional, centers text within its container */
  font-size: 30px;
  padding-bottom: 120px;
}

.heart {
  font-size: 36px; /* Adjust the size as needed */
  color: rgb(167, 22, 22); /* Optional: Change the color */
}

.calendar {
  font-size: 32px; /* Adjust the size as needed */
  color: rgb(116, 27, 250); /* Optional: Change the color */
}