.host-grotesk {
  font-family: "Host Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* General styles */
        html, body {
            height: 100%;
            background-color: #4e4ec4;
              font-family: "Host Grotesk", sans-serif;
        }
        body {
            display: flex;
            flex-direction: column;
            padding-top: 66px; /* Adjust based on navbar height */
        }
        main {
            flex: 1;
        }
        
        
            /* Custom navbar styles */
        .navbar-custom {
            background-color: #6a38b3; /* Custom background color */
            color: #fff; /* Text color */
        }
        .navbar-custom .navbar-brand {
            color: #fcfcfc; /* Custom brand color */
        }
        .navbar-custom .navbar-brand:hover {
            color: #fcfcfc; /* Hover effect for brand */
        }
        .navbar-custom .nav-link {
            color: #fcfcfc; /* Default link color */
            --bs-nav-link-padding-y: 0; /* Override Bootstrap's padding */
        }
        .navbar-custom .nav-link:hover {
            color: #fcfcfc; /* Link hover color */
        }
        .navbar-custom .nav-link.active {
            color: #fcfcfc; /* Active link color */
        }    
        
        /* Make the hamburger icon white */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    /* Add space below the hamburger icon */
    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.5); /* Optional: make the button border white for consistency */
    }
        
    /* Default styling for the button */
.nav-item.btn-warning {
    background-color: #f31d64; /* Keep default for larger screens */
    border: none; /* Default has no border */
}

/* Mobile-specific styles */
@media (max-width: 992px) {
    .nav-item.btn-warning {
        background-color: transparent; /* Remove background */
        /* border: 1px solid #fff; /* Add white border */
        /* color: #fff; /* Ensure text and icons are visible */
        padding: 0.5rem 0.75rem; /* Adjust padding to match the hamburger */
    }

    .nav-item.btn-warning .nav-link {
        color: #fff; /* Ensure text inside the link is white */
    }

    .nav-item.btn-warning .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Optional hover effect */
    }
}
    
    
    
        
        .bg-custom-container {
            background-color: #fcfcfc; /* Custom blue background */
            color: #4e4ec4; /* Text color for contrast */
            min-height: 100%; /* Ensures the blue stretches full height */
        }
        
        
        
          .bg-primary {
      background-color: #0095ef !important;
     }    
        
     
          .bg-secondary {
      background-color: #3c50b1 !important;
     }      
     
     
              .bg-warning {
      background-color: #f31d64 !important;
     }     
     
     
     
          .border-secondary {
      border-color: #3c50b1 !important;
     }       
        
      .btn-primary {
      background-color: #0095ef;
      color: #fff;
      border: none;
    }
    .btn-primary:hover {
      background-color: #f31d64;
    }    
        
        
      .btn-warning {
      background-color: #f31d64;
      color: #fff;
      border: none;
    }
    .btn-warning:hover {
      background-color: #0095ef;
    }        
        
     .btn-light {
      background-color: #fcfcfc;
      color: #0095ef;
      border: none;
    }
    .btn-light:hover {
      background-color: #fcfcfc;
    }    
        
         .alert-warning {
      background-color: #f31d64;
      color: #fcfcfc;
      border-color: #f31d64;
    }
    
    .alert-danger {
       background-color: #fe433c;
       color: #fcfcfc;
       border-color: #fe433c;
    } 

    .alert-info {
       background-color: #6a38b3;
       color: #fcfcfc;
       border-color: #6a38b3;
    }    
    
    
.alert-bulge {
    background-color: #fcfcfc;
    color: #6a38b3;
    border: 2px dashed #6a38b3;
    animation: border-dance 2s infinite;
}

/* Link color inside the alert */
.alert-bulge a {
    color: #6a38b3;
    text-decoration: none; /* Optional: Remove underline */
    font-weight: bold; /* Optional: Make links stand out */
}

/* Hover effect for links */
.alert-bulge a:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
    color: #f31d64; /* Optional: Change color on hover */
}

/* Animation for the border */
@keyframes border-dance {
    0% {
        border-color: #6a38b3;
    }
    50% {
        border-color: #f31d64;
    }
    100% {
        border-color: #6a38b3;
    }
}

    
  
#specific-alert {
    display: flex;
    align-items: center; /* Center the icon and text vertically */
}

#specific-alert i {
    flex-shrink: 0;
    font-size: calc(1em + 2vw); /* Responsive font size that scales with screen size */
    line-height: 1; /* Prevents extra spacing around the icon */
    display: flex; 
    align-items: center; 
    justify-content: center;
}

#specific-alert .ms-2 {
    flex-grow: 1; /* Makes the message take up remaining space */
    line-height: 1.5; /* Adds spacing between lines of text */
}











    
        
        .footer-link {
            color: #ddd;
            text-decoration: none;
        }
        .footer-link:hover {
            color: #fff;
        }


        
        
        
        
        
        
        
        
        
        


/* Heart pulse animation */
.vote-animation i {
    animation: heart-pulse 0.3s ease-in-out;
}

@keyframes heart-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Badge pulse animation */
.badge-pulse {
    animation: badge-bounce 0.5s ease-in-out;
}

@keyframes badge-bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}





.vote-count {
    font-weight: bold;
    padding: 0.25em 0.5em;
    border-radius: 0.5rem;
}








.pagination .page-link {
    background-color: #0095ef; /* Button background */
    color: #fff; /* Text color */
    border-color: #0095ef; /* Border color */
}

.pagination .page-link:hover {
    background-color: #f31d64; /* Slightly darker blue on hover */
    border-color: #f31d64; /* Match border to hover background */
}

.pagination .page-item.active .page-link {
    background-color:#f31d64; /* Active state */
    border-color: #f31d64;
    color: #fff; /* Keep text white for active state */
}

.pagination .page-item.disabled .page-link {
    background-color: #b8daff; /* Disabled background */
    color: #fff; /* Keep disabled text white */
    border-color: #b8daff; /* Disabled border */
}



/* DASHBOARD */


.cropper-modal {
    background-color: #ffffff;
    opacity: .5;
}    

.file-input-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust the spacing between input and button */
}


#imagePreview {
    max-width: 100%; /* Ensures image scales with the container */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Avoid inline image spacing issues */
    margin: 0 auto;  /* Center image */
}
.cropper-container {
    max-width: 100%;
    width: 100%;     /* Ensure cropper container scales with the screen */
}



/* BLUESKY  */

.bi-bluesky:before{
  content:'';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 10Q2-2 2 6t5 8q-5 3-1 6t6-3q2 6 6 3t-1-6q5 0 5-8t-10 4'/%3E%3C/svg%3E");
  background-size: cover;
  height: 18px;
  aspect-ratio: 1 / 1;
  color: #ffffff;
}

/*
If you add the class "inverted", the logo will be completely inverted.
*/
.bi-bluesky.inverted{
  filter: invert(100%);
}

/* 
Example: Large Buttons
You only have to adjust the height to 20px when icon is inside of a large button 
*/
.btn-lg .bi-bluesky:before{
  height: 20px;
}

/*
Example: Standalone logo sizes
*/
h1 .bi-bluesky:before,
.fs-1 .bi-bluesky:before{
  height: 40px;
}
h2 .bi-bluesky:before,
.fs-2 .bi-bluesky:before{
  height: 32px;
}
h3 .bi-bluesky:before,
.fs-3 .bi-bluesky:before{
  height: 28px;
}
h4 .bi-bluesky:before,
.fs-4 .bi-twitter-x:before{
  height: 25px;
}



/* LOGO ICON  */

.bi-underwear:before{
  content:'';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M256 123.021c-50.91 0-102.246 2.886-189.084 8.588c23.825 5.534 46.826 10.086 69.297 13.664c96.682-5.682 142.892-5.682 239.574 0c22.471-3.578 45.472-8.13 69.297-13.664c-86.838-5.702-138.174-8.588-189.084-8.588M25.117 139.664c.019 9.64.08 19.471.264 29.25c199.173 45.623 262.065 45.623 461.238 0c.184-9.779.245-19.61.264-29.25c-167.381 44.142-294.385 44.142-461.766 0m.819 47.834c.542 13.036 1.435 25.696 2.984 37.313c1.938 14.532 4.867 27.376 8.88 36.964c3.967 9.474 8.795 15.347 14.038 18.051c38.386 15.253 65.763 14.797 90.47 28.274a73 73 0 0 1 9.005 5.802c1.008-27.584 5.494-62.545 25.421-98.158c-43.358-5.28-91.246-14.688-150.798-28.246m460.128 0c-59.552 13.558-107.44 22.967-150.798 28.246c19.927 35.613 24.413 70.574 25.421 98.158a73 73 0 0 1 9.004-5.802c24.708-13.477 52.085-13.02 90.471-28.274c5.243-2.704 10.071-8.577 14.037-18.05c4.014-9.59 6.943-22.433 8.881-36.965c1.549-11.617 2.442-24.277 2.984-37.313m-289.709 30.38c-26.301 42.381-27.315 83.996-27.353 114.577a112 112 0 0 1 6.084 9.621c9.388 16.63 17.537 39.314 25.644 71.742c6.973 27.892 30.698 41.184 55.27 41.184s48.297-13.292 55.27-41.184c8.107-32.428 16.256-55.112 25.644-71.742a112 112 0 0 1 6.084-9.62c-.038-30.582-1.052-72.197-27.353-114.577c-40.839 3.888-78.451 3.888-119.29 0z'/%3E%3C/svg%3E");
  background-size: cover;
  height: 32px;
  aspect-ratio: 1 / 1;
  color: #ffffff;
}

/*
If you add the class "inverted", the logo will be completely inverted.
*/
.bi-underwear.inverted{
  filter: invert(100%);
}

/* 
Example: Large Buttons
You only have to adjust the height to 20px when icon is inside of a large button 
*/
.btn-lg .bi-underwear:before{
  height: 20px;
}

/*
Example: Standalone logo sizes
*/
h1 .bi-underwear:before,
.fs-1 .bi-underwear:before{
  height: 40px;
}
h2 .bi-underwear:before,
.fs-2 .bi-underwear:before{
  height: 32px;
}
h3 .bi-underwear:before,
.fs-3 .bi-underwear:before{
  height: 28px;
}
h4 .bi-underwear:before,
.fs-4 .bi-twitter-x:before{
  height: 25px;
}