body {
  background: linear-gradient(to bottom, #22052d, #ccb3d1);
  margin:   0; /* Remove default margins */
  height:   100vh; /* Full viewport height */
}

/* Style for the page wrapper to center content vertically */
.page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height:   100%; /* Take full height of the body */
}

.blue-button {
  margin-top: 20px;
  padding: 10px 25px;
  background-color: #8A4FFF; /* Match your purple highlight */
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'Hack', monospace;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.blue-button:hover {
  background-color: #6a3dcc;
  transform: scale(1.05);
}
.subscribe-button {
  margin-top: 20px;
  padding: 10px 25px;
  background-color: #1A936F; /* Match your purple highlight */
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'Hack', monospace;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.subscribe-button:hover {
  background-color: #23D19D;
  transform: scale(1.05);
}

/* Existing styles */
.image-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height:   50%; /* Half of the viewport height */
}

/* Style for the image buttons */
.button {
  display: inline-block; /* Display as inline-block to allow for padding */
  overflow: hidden; /* Hide any content that goes outside the border */
  border:   2px solid transparent; /* Slim frame around the image */
  border-radius:   5px; /* Rounded corners */
  transition: border-color   0.1s ease, transform   0.1s ease; /* Smooth transition for hover effect */
  padding:   5px; /* Padding to create space around the image */
  margin:   0   10px; /* Horizontal spacing between buttons */
  cursor: pointer; /* Default cursor when hovering over the button */
}

/* Style for the image buttons when Shift is held */
.button.shift-key-pressed {
  cursor: move; /* Cursor indicating that the object can be moved */
}

/* Style for the image buttons when Shift is held and the mouse is down */
.button.shift-key-pressed:active {
  cursor: move; /* Cursor indicating that the object is being moved */
}

/* Style for the images within the image buttons */
.button img {
  max-width:   45vw; /* Set maximum width of the image */
  max-height: 30vw;
  height: auto; /* Automatically adjust the height based on the width */
  transform: scale(1); /* Initial scale */
  transform-origin: center; /* Center the zoom effect */
  display: inline-block; /* Allows for transformations */
  transition: transform   0.1s ease; /* Smooth transition for transformations */
}

/* Hover effect for the image buttons */
.button:hover {
  border-color: #093B4D; /* Highlight the frame on hover */
}

/* Existing styles */
/* ... other styles ... */

/* Import the 'Hack' font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Hack&display=swap');


/* Style for the 'Select new seed image' button */
.centered-button {
  position: absolute; /* Position the button absolutely within the page */
  bottom:   1vw; /* Distance from the bottom edge of the page */
  right:   2.5vw; /* Distance from the right edge of the page */
}

/* Style for the 'Select new seed image' button */
.centered-button .button {
  background-color: #071A21; /* Background color */
  border-radius:   5px; /* Rounded corners */
  transition: background-color   0.3s ease; /* Smooth transition for hover effect */
  padding:   10px   20px; /* Padding for better appearance */
  color: white; /* Text color */
  font-size:   16px; /* Font size */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-decoration: none; /* Remove underline from anchor tag */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}

/* Hover effect for the 'Select new seed image' button */
.centered-button .button:hover {
  background-color: #093B4D; /* Darker shade for hover effect */
}
/* Style for the 'Select new seed image' button */
.end-session-button {
  position: absolute; /* Position the button absolutely within the page */
  bottom:   1vw; /* Distance from the bottom edge of the page */
  left:   2.5vw; /* Distance from the right edge of the page */
}

/* Style for the 'Select new seed image' button */
.end-session-button .button {
  background-color: #071A21; /* Background color */
  border-radius:   5px; /* Rounded corners */
  transition: background-color   0.3s ease; /* Smooth transition for hover effect */
  padding:   10px   20px; /* Padding for better appearance */
  color: white; /* Text color */
  font-size:   16px; /* Font size */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-decoration: none; /* Remove underline from anchor tag */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}

/* Hover effect for the 'Select new seed image' button */
.end-session-button .button:hover {
  background-color: #093B4D; /* Darker shade for hover effect */
}
/* Style for the page wrapper to center content vertically */
.page-wrapper {
  min-height:   100vh; /* Minimum height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.session-container {
background-color: white; /* Set container background color #F4E4BA also looks nice*/ 
width: 90vw; /* Set width to 90% of viewport */
margin: 0 auto; /* Center horizontally */
padding: 20px; /* Add padding around contents */
border-radius: 5px; /* Add rounded corners */
margin-bottom: 10px; /* Add spacing between containers */
}
/* Define CSS for thumbnail images */
.thumbnail-img {
height: 50px; /* Adjust the width as needed */
padding: 1px 1px; /* Adjust padding for spacing */
width: auto; /* Maintain aspect ratio */
max-width: 100%; /* Ensure images do not exceed the specified width */
max-height: 100px; /* Ensure images do not exceed the specified height */
}
.new-session-button {
background-color: transparent; /* No background color for text */
border: none; /* No border around button */
color: black; /* Text color */
font-size: 18px; /* Font size */
padding: 10px 20px; /* Adjust padding for spacing */
cursor: pointer; /* Change cursor on hover */
text-decoration: none; /* Remove underline from anchor tag */
font-family: 'Hack', monospace; /* Use the 'Hack' font */
transition: all 0.3s ease; /* Smooth transition for hover effect */
border-radius: 5px; /* Add rounded corners */
}
.new-session-button:hover {
background-color: #eee; /* Change background color on hover */
}
.rename-session-button {
  font-size: 16px; /* Slightly larger */
  background-color: transparent; /* Fully transparent background */
  border: none; /* No outline */
  border-radius: 5px; /* Soft rounded corners */
  padding: 5px 8px; /* Comfortable click area */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition effect */

  /* Optional: Slight hover effect */
  &:hover {
    background-color: rgba(200, 200, 200, 0.3); /* Light grayish hover effect */
  }

  /* Optional: Active (click) effect */
  &:active {
    background-color: rgba(200, 200, 200, 0.5);
  }
}
/* Popup Background Overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it appears on top */
}

/* Popup Container */
.popup-container {
  background: white; /* Match session container */
  width: 40vw;
  max-width: 400px;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  font-family: 'Hack', monospace; /* Match existing font */
}

/* Input Field */
.popup-container input {
  width: 90%;
  padding: 10px;
  margin-top: 10px;
  border: 2px solid #071A21;
  border-radius: 5px;
  font-size: 16px;
  font-family: 'Hack', monospace;
  text-align: center;
}

/* Buttons */
.popup-buttons {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

.popup-buttons button {
  background-color: #071A21; /* Match other buttons */
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.popup-buttons button:hover {
  background-color: #093B4D;
}

.popup-buttons button.cancel {
  background-color: #888; /* Gray for cancel */
}

.popup-buttons button.cancel:hover {
  background-color: #555;
}


.open-session-button {
background-color: transparent; /* No background color for text */
border: none; /* No border around button */
color: black; /* Text color */
font-size: 18px; /* Font size */
padding: 15px 25px; /* Adjust padding for spacing */
cursor: pointer; /* Change cursor on hover */
text-decoration: none; /* Remove underline from anchor tag */
font-family: 'Hack', monospace; /* Use the 'Hack' font */
transition: all 0.3s ease; /* Smooth transition for hover effect */
border-radius: 5px; /* Add rounded corners */
float:right;
}

.drop-session-button {
  background-color: transparent; /* No background color for text */
  border: none; /* No border around button */
  color: black; /* Text color */
  font-size: 18px; /* Font size */
  padding: 15px 25px; /* Adjust padding for spacing */
  cursor: pointer; /* Change cursor on hover */
  text-decoration: none; /* Remove underline from anchor tag */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
  border-radius: 5px; /* Add rounded corners */
  float:right;
}

/* Default styles for the download button */
.download-button {
  background-color: transparent; /* No background color for text */
  border: none; /* No border around button */
  color: black; /* Text color */
  font-size: 18px; /* Font size */
  padding: 15px 25px; /* Adjust padding for spacing */
  cursor: pointer; /* Change cursor on hover */
  text-decoration: none; /* Remove underline from anchor tag */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
  border-radius: 5px; /* Add rounded corners */
  float: right; /* Align to the right */
}
/* Add pulsate animation for completed download button */
@keyframes pulsate {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(138, 79, 255, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(138, 79, 255, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(138, 79, 255, 0.5);
  }
}

/* Download button style when 100% progress is reached */
.drop-session-button.complete {
  background-color: #8A4FFF; /* Purple background for completed progress */
  color: white; /* White text for better contrast */
  font-weight: bold; /* Optional: Make text bold */
  animation: pulsate 1.5s infinite; /* Apply pulsate animation */
}
/* Optional hover effect for completed state */
.drop-session-button.complete:hover {
  background-color: #6a3dcc; /* Darker purple on hover */
  animation: none; /* Stop animation on hover */
}
/* Download button style when 100% progress is reached */
.download-button.complete {
  background-color: #8A4FFF; /* Purple background for completed progress */
  color: white; /* White text for better contrast */
  font-weight: bold; /* Optional: Make text bold */
  animation: pulsate 1.5s infinite; /* Apply pulsate animation */
}
/* Optional hover effect for completed state */
.download-button.complete:hover {
  background-color: #6a3dcc; /* Darker purple on hover */
  animation: none; /* Stop animation on hover */
}
/* Download button style when 100% progress is reached */
.open-session-button.complete {
  background-color: #8A4FFF; /* Purple background for completed progress */
  color: white; /* White text for better contrast */
  font-weight: bold; /* Optional: Make text bold */
  animation: pulsate 1.5s infinite; /* Apply pulsate animation */
}
/* Optional hover effect for completed state */
.open-session-button.complete:hover {
  background-color: #6a3dcc; /* Darker purple on hover */
  animation: none; /* Stop animation on hover */
}
.loading {
  background-color: #555;
  color: white;
  opacity: 0.7;
  cursor: wait;
}


.fixed-top {
top: 1vw; /* Position it at the top of the viewport */
left: 5vw; /* Position it at the left edge of the viewport */
z-index: 1; /* Ensure it's on top of other elements */
}
.sessions-header {
font-family: 'Hack', monospace;
color: white;
text-align: left; /* Left-align the text */
top: 1vw; /* Position it at the top of the viewport */
}
/* Style for the 'Select new seed image' button */
/* Style for the image buttons */
.continue-button-left {
  position: absolute; /* Position the button absolutely within the page */
  top:   7vw; /* Distance from the bottom edge of the page */
  left:   5vw; /* Distance from the right edge of the page */
  cursor: pointer; /* Change cursor to pointer on hover */
  font-size:   13px; /* Font size */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}
.continue-button-right {
  position: absolute; /* Position the button absolutely within the page */
  top:   7vw; /* Distance from the bottom edge of the page */
  right:   5vw; /* Distance from the right edge of the page */
  cursor: pointer; /* Change cursor to pointer on hover */
  font-size:   13px; /* Font size */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}
.upload-container {
background-color: white; /* Set container background color */
margin: 0 auto; /* Center horizontally */
padding: 100px; /* Add padding around contents */
border-radius: 15px; /* Add rounded corners */
margin-bottom: 10px; /* Add spacing between containers */
}
.browse-button {
  cursor: pointer; /* Change cursor to pointer on hover */
  font-size:   20px; /* Font size */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}
.upload-button {
  cursor: pointer; /* Change cursor to pointer on hover */
  font-size:   20px; /* Font size */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}
.dropdown {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  background-color: transparent;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f8f9fa;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: 'Hack', monospace;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.transparent-text-button {
  background-color: transparent; /* Background color */
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  padding: 10px 20px; /* Padding for better appearance */
  color: white; /* Text color */
  font-size: 16px; /* Font size */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-decoration: none; /* Remove underline from anchor tag */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}

.simple-text-page {
  font-family: 'Hack', monospace;
  color: white;
  text-align: center;
  /* Padd 10 % from top */
  padding-top: 5%;
}
.session-container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align items to the start of the container */
  padding: 10px 0; /* Add some vertical padding between sessions */
}

.session-content {
  display: flex;
  align-items: left;
}


/*Bar indicating session progress*/
.session-progress {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.session-progress progress {
  width: 200px; /* Adjust width to your preference */
  height: 20px; /* Height of the progress bar */
  appearance: none; /* Remove default browser styling */
  border-radius: 5px; /* Rounded corners */
}
.session-progress progress::-moz-progress-bar {
  background-color: #E98A15; 
  border-radius: 5px;
}
.session-progress span {
  margin-right: 10px; /* Add some space between the text and the progress bar */
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
  font-size: 16px; /* Font size */
}
/* Additional CSS for the green color at 100% */
.session-progress progress.complete::-webkit-progress-value {
  background-color: #8A4FFF;
}
.session-progress progress.complete::-moz-progress-bar {
  background-color: #8A4FFF;
}

/* Logout button with transparent background */
.logout-button {
  background-color: transparent; /* Transparent background */
  border: none; /* Remove border */
  cursor: pointer; /* Change cursor to pointer */
  font-size: 24px; /* Adjust font size if necessary */
  padding: 5px; /* Add some padding for better clickability */
  color: inherit; /* Use inherited text color */
}

.logout-button:hover {
  color: orange; /* Change text color on hover for better visibility */
  transform: scale(1.1); /* Slightly enlarge the button on hover */
}

.logout-button:focus {
  outline: none; /* Remove the focus outline */
}
/* Dropdown content with rounded corners */
.dropdown-content {
  display: none; /* Initially hidden */
  position: absolute; /* Positioned relative to the parent container */
  background-color: white; /* Dropdown background */
  border: 1px solid #ddd; /* Optional border for better visibility */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  z-index: 1; /* Ensure it appears above other elements */
  padding: 10px 0; /* Add some padding inside the dropdown */
}

.dropdown-content a {
  color: black; /* Text color */
  padding: 10px 20px; /* Spacing for each link */
  text-decoration: none; /* Remove underline */
  display: block; /* Make links fill the container width */
  font-family: 'Hack', monospace; /* Consistent font styling */
  font-size: 14px; /* Adjust font size */
}

.dropdown-content a:hover {
  background-color: #f0f0f0; /* Highlight background on hover */
  border-radius: 8px; /* Match rounded corners on hover */
}

.dropdown:hover .dropdown-content {
  display: block; /* Show dropdown on hover */
}


/*Bar inidcating upload progress*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}
.progress-bar {
  width: 80%;
  height: 30px;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 20px;
}
.progress-bar-inner {
  height: 100%;
  width: 0;
  background-color: #FCD581;
  text-align: center;
  line-height: 30px;
  color: white;
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}
.progress-text {
  color: white;
  font-size: 18px;
  font-family: 'Hack', monospace; /* Use the 'Hack' font */
}
.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-top: 20px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.footer {
  position: fixed;
  color: black;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: transparent;
  padding: 1em;
  border-radius: 5px;
  text-align: center;
  font-size: 0.7em;
  font-family: 'Hack', monospace;
}
.footer a:hover {
    color: white;
}

.link {
  color: #23456C;
}
.footer a:visited {
  color: #1E3B5C;
}
.cookie-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Dimmed background */
            display: flex; /* Use flexbox for centering */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            z-index: 1000;
            display: none; /* Hidden by default */
        }

        /* Styling for the central pop-up box */
        .cookie-popup {
            background-color: #f8f8f8;
            border: 1px solid #ccc;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            max-width: 400px; /* Adjust width as needed */
            text-align: center; /* Center text within the box */
            font-family: sans-serif;
            position: relative; /* Needed for z-index relative to overlay */
            z-index: 1001; /* Above the overlay */
        }

        .cookie-popup h3 {
            margin-top: 0;
            color: #333;
            font-size: 1.2em;
        }

        .cookie-popup p {
            margin-bottom: 20px;
            font-size: 0.95em;
            line-height: 1.5;
            color: #555;
        }

        .cookie-popup button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.2s ease;
        }

        .cookie-popup button:hover {
            background-color: #0056b3;
        }