/* line 1, app/assets/stylesheets/config/_variables.scss */
:root {
  --font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --line-height-headers: 1.1;
  --line-height-body:    1.5;
  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --font-size-xxxl: 2rem;
  --font-size-xxxxl: 2.5rem;
  --color-text-header: hsl(0, 1%, 16%);
  --color-text-body:   hsl(0, 5%, 25%);
  --color-text-muted:  hsl(0, 1%, 44%);
  --space-xxxs: 0.25rem;
  --space-xxs: 0.375rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 2.5rem;
  --space-xxxl: 3rem;
  --space-xxxxl: 4rem;
  --color-primary:          hsl(222, 15%, 87%);
  --color-primary-rotate:   hsl(70, 3%, 86%);
  --color-primary-bg:       hsla(0, 0%, 100%, 0.9);
  --color-secondary:        hsl(160, 43%, 11%);
  --color-secondary-rotate: hsl(105, 19%, 33%);
  --color-tertiary:         hsl(39, 30%, 70%);
  --color-glint:            hsl(39, 30%, 80%);
  --color-red:              hsl(356, 87%, 46%);
  --color-red-rotate:       hsl(356, 87%, 56%);
  --color-white:      hsl(0, 0%, 100%);
  --color-background: hsl(30, 50%, 98%);
  --color-light:      hsl(0, 6%, 93%);
  --color-dark:       var(--color-text-header);
  --border-radius: 0.375rem;
  --border: solid 2px var(--color-light);
  --shadow-large:  2px 4px 10px hsl(0 0% 0% / 0.1);
  --shadow-small:  1px 3px 6px hsl(0 0% 0% / 0.1);
}

/* line 63, app/assets/stylesheets/config/_variables.scss */
:root body {
  font-family: var(--font-family-sans);
}

@font-face {
  font-family: 'Roboto Mono';
  src: url(/assets/RobotoMono-VariableFont_wght-ba8bdda3250fc458782f545073391e03bd6913263145d0cb3d62052703231813.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* line 1, app/assets/stylesheets/config/_reset.scss */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* line 7, app/assets/stylesheets/config/_reset.scss */
* {
  margin: 0;
  padding: 0;
}

/* line 12, app/assets/stylesheets/config/_reset.scss */
html {
  overflow-y: scroll;
  height: 100%;
}

/* line 17, app/assets/stylesheets/config/_reset.scss */
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--color-background);
  color: var(--color-text-body);
  line-height: var(--line-height-body);
  font-family: var(--font-family-sans);
}

/* line 28, app/assets/stylesheets/config/_reset.scss */
img,
picture,
svg {
  display: block;
  max-width: 100%;
}

/* line 35, app/assets/stylesheets/config/_reset.scss */
input,
button,
textarea,
select {
  font: inherit;
}

/* line 42, app/assets/stylesheets/config/_reset.scss */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-header);
  line-height: var(--line-height-headers);
}

/* line 52, app/assets/stylesheets/config/_reset.scss */
h1 {
  font-size: var(--font-size-xxxl);
}

/* line 56, app/assets/stylesheets/config/_reset.scss */
h2 {
  font-size: var(--font-size-xxl);
}

/* line 60, app/assets/stylesheets/config/_reset.scss */
h3 {
  font-size: var(--font-size-xl);
}

/* line 64, app/assets/stylesheets/config/_reset.scss */
h4 {
  font-size: var(--font-size-l);
}

/* line 68, app/assets/stylesheets/config/_reset.scss */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 200ms;
}

/* line 73, app/assets/stylesheets/config/_reset.scss */
a:hover, a:focus, a:active {
  color: var(--color-primary-rotate);
}

/* line 1, app/assets/stylesheets/config/_root.scss */
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* This keeps the background fixed */
  z-index: 0;
  overflow: auto;
}

/* line 15, app/assets/stylesheets/config/_root.scss */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary-rotate);
  background-size: inherit;
  background-position: inherit;
  background-attachment: fixed;
  /* Still keep it fixed */
  z-index: -1;
  /* Keep this behind the content */
  pointer-events: none;
  /* Ensures that the pseudo-element does not interfere with clicks */
}

/* line 33, app/assets/stylesheets/config/_root.scss */
img {
  opacity: 1;
}

/* line 37, app/assets/stylesheets/config/_root.scss */
a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.3s;
}

/* line 43, app/assets/stylesheets/config/_root.scss */
html::-webkit-scrollbar {
  width: 10px;
}

/* line 47, app/assets/stylesheets/config/_root.scss */
html::-webkit-scrollbar-track {
  background-color: var(--color-secondary-rotate);
  border: 1px solid var(--color-secondary-rotate);
}

/* line 52, app/assets/stylesheets/config/_root.scss */
html::-webkit-scrollbar-thumb {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary-rotate);
}

/* line 57, app/assets/stylesheets/config/_root.scss */
main {
  padding-top: 6rem;
}

/* line 1, app/assets/stylesheets/components/_btn.scss */
.btn {
  display: inline-block;
  padding: var(--space-xxs) var(--space-m);
  border-radius: var(--border-radius);
  background-origin: border-box;
  background-color: transparent;
  border: solid 2px transparent;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: filter 400ms, color 0.3s ease;
}

/* line 14, app/assets/stylesheets/components/_btn.scss */
.btn:hover, .btn:focus, .btn:focus-within, .btn:active {
  transition: filter 250ms, color 0.3s ease;
}

/* line 21, app/assets/stylesheets/components/_btn.scss */
.btn--primary {
  color: var(--color-primary-bg);
  background-color: var(--color-secondary-rotate);
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* line 27, app/assets/stylesheets/components/_btn.scss */
.btn--primary:hover, .btn--primary:focus, .btn--primary:focus-within, .btn--primary:active {
  color: var(--color-primary);
  filter: saturate(1.1) brightness(105%);
}

/* line 36, app/assets/stylesheets/components/_btn.scss */
.btn--secondary {
  color: var(--color-primary-bg);
  background-color: var(--color-secondary);
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* line 41, app/assets/stylesheets/components/_btn.scss */
.btn--secondary:hover, .btn--secondary:focus, .btn--secondary:focus-within, .btn--secondary:active {
  background-color: var(--color-secondary-rotate);
  color: var(--color-primary);
}

/* line 51, app/assets/stylesheets/components/_btn.scss */
.btn--light {
  color: var(--color-dark);
  background-color: var(--color-light);
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* line 56, app/assets/stylesheets/components/_btn.scss */
.btn--light:hover, .btn--light:focus, .btn--light:focus-within, .btn--light:active {
  color: var(--color-dark);
  filter: brightness(92%);
}

/* line 65, app/assets/stylesheets/components/_btn.scss */
.btn--dark {
  color: var(--color-white);
  border-color: var(--color-dark);
  background-color: var(--color-dark);
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* line 71, app/assets/stylesheets/components/_btn.scss */
.btn--dark:hover, .btn--dark:focus, .btn--dark:focus-within, .btn--dark:active {
  color: var(--color-white);
}

/* line 79, app/assets/stylesheets/components/_btn.scss */
.btn--tertiary {
  color: var(--color-secondary);
  background-color: var(--color-tertiary);
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* line 84, app/assets/stylesheets/components/_btn.scss */
.btn--tertiary:hover, .btn--tertiary:focus, .btn--tertiary:focus-within, .btn--tertiary:active {
  color: var(--color-secondary-rotate);
  filter: saturate(1.1) brightness(105%);
}

/* line 93, app/assets/stylesheets/components/_btn.scss */
.btn--danger {
  color: var(--color-white);
  background-color: var(--color-red);
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* line 98, app/assets/stylesheets/components/_btn.scss */
.btn--danger:hover, .btn--danger:focus, .btn--danger:focus-within, .btn--danger:active {
  color: var(--color-primary-bg);
  filter: saturate(1.1) brightness(105%);
}

/* line 1, app/assets/stylesheets/components/_error_message.scss */
.error-message {
  width: 100%;
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  padding: var(--space-xs);
  border-radius: var(--border-radius);
}

/* line 1, app/assets/stylesheets/components/_form.scss */
.form {
  display: flex;
}

/* line 4, app/assets/stylesheets/components/_form.scss */
.form #photo_description {
  background-color: white;
}

/* line 8, app/assets/stylesheets/components/_form.scss */
.form__group {
  flex: 1;
}

/* line 12, app/assets/stylesheets/components/_form.scss */
.form__input {
  width: 100%;
  max-width: 100%;
  border: var(--border);
  border-radius: var(--border-radius);
  outline: none;
  transition: box-shadow 250ms;
}

/* line 20, app/assets/stylesheets/components/_form.scss */
.form__input:focus {
  box-shadow: 0 0 0 2px var(--color-glint);
}

/* line 24, app/assets/stylesheets/components/_form.scss */
.form__input--invalid {
  border-color: var(--color-primary);
}

/* line 31, app/assets/stylesheets/components/_form.scss */
form #event_description,
form #user_dues {
  width: 100%;
  max-width: 100%;
  border-radius: var(--border-radius);
  border-width: 2px !important;
  background-color: white;
}

/* line 1, app/assets/stylesheets/components/_visually_hidden.scss */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* app/assets/stylesheets/application.scss */
/* line 3, app/assets/stylesheets/components/_navbar.scss */
.navbar {
  background-color: var(--color-secondary);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 1;
}

/* line 15, app/assets/stylesheets/components/_navbar.scss */
.navbar-sub {
  position: sticky;
  top: 0px;
  z-index: 1000;
}

/* line 21, app/assets/stylesheets/components/_navbar.scss */
.navbar__navigation {
  width: 70rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

@media (max-width: 70rem) {
  /* line 21, app/assets/stylesheets/components/_navbar.scss */
  .navbar__navigation {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
  }
}

/* line 37, app/assets/stylesheets/components/_navbar.scss */
.navbar__toggle {
  display: none;
  background: none;
  border: none;
  max-width: 100px;
  font-size: 3em;
  color: var(--color-white);
  cursor: pointer;
}

@media (max-width: 70rem) {
  /* line 37, app/assets/stylesheets/components/_navbar.scss */
  .navbar__toggle {
    display: block;
    order: 3;
  }
}

/* line 53, app/assets/stylesheets/components/_navbar.scss */
.navbar__logo {
  border-radius: 100%;
  max-width: 85px;
  height: auto;
}

@media (max-width: 70rem) {
  /* line 53, app/assets/stylesheets/components/_navbar.scss */
  .navbar__logo {
    max-width: 85px;
    position: absolute;
    top: .5em;
    left: 50%;
    transform: translateX(-50%);
    order: 2;
  }
}

/* line 68, app/assets/stylesheets/components/_navbar.scss */
.navbar__list {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  margin: 0;
  padding: 0;
}

@media (max-width: 70rem) {
  /* line 68, app/assets/stylesheets/components/_navbar.scss */
  .navbar__list {
    display: none;
    flex-direction: column;
    background-color: var(--color-secondary);
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
  }
}

@media (max-width: 70rem) {
  /* line 86, app/assets/stylesheets/components/_navbar.scss */
  .navbar__list.is-active {
    display: flex !important;
    flex-direction: column;
    background-color: var(--color-secondary);
    position: absolute;
    top: 100%;
    width: 100%;
  }
  /* line 95, app/assets/stylesheets/components/_navbar.scss */
  .navbar__list.is-active .navbar__link {
    border-bottom: 1px solid var(--color-secondary-rotate);
    border-radius: 0;
  }
}

@media (max-width: 70rem) {
  /* line 102, app/assets/stylesheets/components/_navbar.scss */
  .navbar__list form {
    margin: 30px;
  }
}

/* line 109, app/assets/stylesheets/components/_navbar.scss */
.navbar__list .navbar__list-auth {
  display: none;
}

@media (max-width: 70rem) {
  /* line 109, app/assets/stylesheets/components/_navbar.scss */
  .navbar__list .navbar__list-auth {
    display: flex;
  }
}

/* line 116, app/assets/stylesheets/components/_navbar.scss */
.navbar__link {
  color: var(--color-primary-rotate);
  height: 6em;
  padding: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.5s ease, color 0.5s ease;
  vertical-align: middle;
}

@media (max-width: 70rem) {
  /* line 116, app/assets/stylesheets/components/_navbar.scss */
  .navbar__link {
    margin: 0;
  }
}

/* line 132, app/assets/stylesheets/components/_navbar.scss */
.navbar__link:hover {
  background-color: var(--color-secondary-rotate);
}

/* line 137, app/assets/stylesheets/components/_navbar.scss */
.navbar__link:not(:last-child) {
  border-right: 1px solid var(--color-secondary-rotate);
}

@media (max-width: 70rem) {
  /* line 137, app/assets/stylesheets/components/_navbar.scss */
  .navbar__link:not(:last-child) {
    border-right: none;
  }
}

/* line 145, app/assets/stylesheets/components/_navbar.scss */
.navbar__link:first-of-type {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

/* line 150, app/assets/stylesheets/components/_navbar.scss */
.navbar__link:last-of-type {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  border-right: 0px solid var(--color-secondary-rotate);
}

@media (max-width: 70rem) {
  /* line 156, app/assets/stylesheets/components/_navbar.scss */
  .navbar__profile {
    display: none;
  }
}

/* line 1, app/assets/stylesheets/components/_footer.scss */
.footer {
  background-color: var(--color-secondary);
  width: 100%;
  padding-right: var(--space-xs);
  padding-left: var(--space-xs);
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 0px;
  font-size: 14px;
  border-top: 1px solid var(--color-secondary-rotate);
  display: flex;
  flex-wrap: wrap;
  /* Enable wrapping of items */
  justify-content: space-between;
  align-items: center;
  /* Align items to the start of the flex container */
  /* Individual container styling */
}

/* line 20, app/assets/stylesheets/components/_footer.scss */
.footer__logo-container, .footer__instagram-container {
  flex: 0 0 80px;
  /* Make sure each section can grow and take 100% width on small screens */
}

/* line 25, app/assets/stylesheets/components/_footer.scss */
.footer__info-container {
  flex: 1 1 200px;
}

/* line 29, app/assets/stylesheets/components/_footer.scss */
.footer__links-container {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

@media (min-width: 70rem) {
  /* line 38, app/assets/stylesheets/components/_footer.scss */
  .footer .footer__link:not(:last-child)::after {
    content: "";
    /* Required to show the pseudo-element */
    display: inline-block;
    width: 1px;
    height: 20px;
    /* Adjust the height as needed */
    background-color: var(--color-secondary-rotate);
    /* Line color */
    margin-left: 10px;
    /* Space between the link and the line */
    margin-right: 10px;
    /* Space between the line and the next link */
    vertical-align: middle;
    /* Align the line with the text */
  }
}

/* line 51, app/assets/stylesheets/components/_footer.scss */
.footer__logo-container {
  display: flex;
  align-items: center;
  justify-content: start;
}

/* line 57, app/assets/stylesheets/components/_footer.scss */
.footer__instagram-container {
  display: flex;
  align-items: center;
  justify-content: end;
}

/* line 62, app/assets/stylesheets/components/_footer.scss */
.footer__instagram-container a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

/* line 69, app/assets/stylesheets/components/_footer.scss */
.footer__instagram-container a:hover {
  color: var(--color-glint);
}

/* line 76, app/assets/stylesheets/components/_footer.scss */
.footer__logo {
  border-radius: 100%;
  max-width: 100px;
  flex-shrink: 1;
  height: auto;
}

/* line 84, app/assets/stylesheets/components/_footer.scss */
.footer__links-container a {
  color: var(--color-tertiary);
  text-decoration: none;
  font-size: 14px;
}

/* line 90, app/assets/stylesheets/components/_footer.scss */
.footer__link:hover {
  color: var(--color-glint);
}

/* line 94, app/assets/stylesheets/components/_footer.scss */
.footer__info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* line 102, app/assets/stylesheets/components/_footer.scss */
.footer__git {
  flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

/* line 109, app/assets/stylesheets/components/_footer.scss */
.footer__git .footer__link {
  color: var(--color-tertiary);
}

/* line 113, app/assets/stylesheets/components/_footer.scss */
.footer__git .footer__link:hover {
  color: var(--color-glint);
}

/* line 118, app/assets/stylesheets/components/_footer.scss */
.footer__text {
  margin: 0;
  color: var(--color-primary);
}

/* line 123, app/assets/stylesheets/components/_footer.scss */
.footer__copyright {
  width: 100%;
  text-align: center;
  /* Center the copyright text */
  margin-top: 20px;
  /* Add space from the elements above */
  border-top: 1px solid var(--color-secondary-rotate);
  color: var(--color-primary-rotate);
  padding-top: 10px;
  /* Padding for visual spacing */
  order: 2;
  /* Place it at the end in flex order */
}

@media (min-width: 70rem) {
  /* line 1, app/assets/stylesheets/components/_footer.scss */
  .footer {
    padding-right: 20vw;
    padding-left: 20vw;
  }
}

/* line 1, app/assets/stylesheets/components/_home.scss */
.home {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/* line 12, app/assets/stylesheets/components/_home.scss */
.home > * {
  padding-left: var(--space-m);
  padding-right: var(--space-m);
  width: 65%;
}

@media (max-width: 70rem) {
  /* line 12, app/assets/stylesheets/components/_home.scss */
  .home > * {
    width: 100%;
  }
}

@media (max-width: 70rem) {
  /* line 1, app/assets/stylesheets/components/_home.scss */
  .home {
    width: 100%;
  }
}

/* line 27, app/assets/stylesheets/components/_home.scss */
.home__image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* line 36, app/assets/stylesheets/components/_home.scss */
.home__image-container {
  width: 65%;
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
}

@media (max-width: 70rem) {
  /* line 36, app/assets/stylesheets/components/_home.scss */
  .home__image-container {
    width: 100%;
  }
}

/* line 47, app/assets/stylesheets/components/_home.scss */
.home img {
  width: 100%;
  display: block;
  margin: auto;
  z-index: 0;
  opacity: 1 !important;
}

/* line 55, app/assets/stylesheets/components/_home.scss */
.home__image-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.6s;
}

/* line 70, app/assets/stylesheets/components/_home.scss */
.home__image-content:hover {
  opacity: 1;
}

/* line 74, app/assets/stylesheets/components/_home.scss */
.home__image-content h1 {
  color: var(--color-tertiary);
  font-size: var(--font-size-xxxxl);
  font-family: 'Lato';
  margin-bottom: 10px;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
}

/* line 84, app/assets/stylesheets/components/_home.scss */
.home__image-content p {
  color: var(--color-primary-rotate);
  font-size: var(--font-size-xl);
  font-family: 'Lato';
  padding-left: 10%;
  padding-right: 10%;
}

/* line 92, app/assets/stylesheets/components/_home.scss */
.home__image-content > * {
  transform: translateY(25px);
  transition: transform 0.6s;
}

/* line 97, app/assets/stylesheets/components/_home.scss */
.home__image-content:hover > * {
  transform: translateY(0px);
}

/* line 101, app/assets/stylesheets/components/_home.scss */
.home__caption {
  text-align: center;
  color: var(--color-tertiary);
  font-family: 'Lato';
  margin-top: var(--space-m);
}

@media (max-width: 70rem) {
  /* line 101, app/assets/stylesheets/components/_home.scss */
  .home__caption {
    padding: var(--space-xs);
  }
}

/* line 112, app/assets/stylesheets/components/_home.scss */
.home__header {
  text-align: center;
  color: var(--color-secondary);
  margin-top: var(--space-m);
  font-family: 'Lato';
}

@media (max-width: 70rem) {
  /* line 112, app/assets/stylesheets/components/_home.scss */
  .home__header {
    padding: var(--space-xs);
  }
}

/* line 123, app/assets/stylesheets/components/_home.scss */
.home__subheader {
  color: var(--color-secondary-rotate);
  text-align: center;
}

/* line 129, app/assets/stylesheets/components/_home.scss */
.home__section-header {
  padding: var(--space-m);
  color: var(--color-secondary-rotate);
  text-align: left;
}

/* line 135, app/assets/stylesheets/components/_home.scss */
.home__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  width: 65%;
  height: 50%;
  padding: var(--space-m);
  font-family: 'Lato';
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  border: 2px solid var(--color-secondary);
  box-shadow: var(--shadow-large);
}

/* line 153, app/assets/stylesheets/components/_home.scss */
.home__section h3 {
  text-align: left;
  color: var(--color-secondary);
  width: 100%;
}

@media (max-width: 70rem) {
  /* line 135, app/assets/stylesheets/components/_home.scss */
  .home__section {
    width: 100%;
  }
}

/* line 166, app/assets/stylesheets/components/_home.scss */
.home__quote h3 {
  text-align: center;
  font-weight: bold;
  color: var(--color-secondary);
}

/* line 172, app/assets/stylesheets/components/_home.scss */
.home__button {
  align-self: center;
  background-color: var(--color-tertiary);
  padding: 0.5em 1em;
  border-radius: var(--border-radius);
  border: 0px solid var(--color-secondary);
  cursor: pointer;
  color: var(--color-text-header);
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* line 188, app/assets/stylesheets/components/_home.scss */
.home__button:hover {
  background-color: var(--color-glint);
  color: var(--color-text-body);
}

/* line 4, app/assets/stylesheets/components/_user.scss */
.user__table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  color: var(--color-secondary);
  border-radius: var(--border-radius);
}

/* line 17, app/assets/stylesheets/components/_user.scss */
.user__table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid var(--color-secondary);
  border-radius: 0px;
}

@media (max-width: 70rem) {
  /* line 17, app/assets/stylesheets/components/_user.scss */
  .user__table-row {
    overflow: auto;
  }
}

/* line 35, app/assets/stylesheets/components/_user.scss */
.user__table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: var(--color-tertiary);
  color: var(--color-primary-bg);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

/* line 48, app/assets/stylesheets/components/_user.scss */
.user__table-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-rotate);
  color: var(--color-secondary);
}

/* line 59, app/assets/stylesheets/components/_user.scss */
.user__table-cell {
  flex: 1;
  padding: 10px;
}

/* line 64, app/assets/stylesheets/components/_user.scss */
.user__image {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius);
}

/* line 70, app/assets/stylesheets/components/_user.scss */
.user__table-row .user__table-cell:nth-child(1) {
  flex: 0 0 70px;
}

@media (max-width: 70rem) {
  /* line 74, app/assets/stylesheets/components/_user.scss */
  .user__table-row .user__table-cell:nth-child(2) {
    flex: 1 0 100px;
  }
}

/* line 80, app/assets/stylesheets/components/_user.scss */
.user__table-row .user__table-cell:nth-child(3) {
  flex-grow: 1;
}

@media (max-width: 70rem) {
  /* line 80, app/assets/stylesheets/components/_user.scss */
  .user__table-row .user__table-cell:nth-child(3) {
    flex: 1 0 75px;
    /* Fixed width */
  }
}

/* line 87, app/assets/stylesheets/components/_user.scss */
.user__table-row .user__table-cell:nth-child(4) {
  flex: 0 0 65px;
}

/* line 90, app/assets/stylesheets/components/_user.scss */
.user__table-row .user__table-cell:nth-child(5) {
  flex-grow: 1;
}

@media (max-width: 70rem) {
  /* line 90, app/assets/stylesheets/components/_user.scss */
  .user__table-row .user__table-cell:nth-child(5) {
    flex: 1 0 100px;
    /* Fixed width */
  }
}

/* line 97, app/assets/stylesheets/components/_user.scss */
.user__table-row .user__table-cell:nth-child(6) {
  flex: 0 0 80px;
}

/* line 101, app/assets/stylesheets/components/_user.scss */
.user__table-row .user__table-cell:last-child {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 108, app/assets/stylesheets/components/_user.scss */
.user__table-button {
  border: 0px;
  border-radius: var(--border-radius);
  background-color: var(--color-secondary);
  cursor: pointer;
}

/* line 115, app/assets/stylesheets/components/_user.scss */
.user__button {
  text-align: unset;
  position: relative;
  right: 0px;
  top: 0px;
  margin-bottom: 20px;
  background-color: var(--color-secondary);
  padding: 0.5em 1em;
  border-radius: var(--border-radius);
  border: 0px solid var(--color-secondary);
  cursor: pointer;
  color: var(--color-tertiary);
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* line 134, app/assets/stylesheets/components/_user.scss */
.user__button:hover {
  background-color: var(--color-secondary-rotate);
  color: var(--color-glint);
}

/* line 139, app/assets/stylesheets/components/_user.scss */
.user .form {
  padding: 0;
}

/* line 143, app/assets/stylesheets/components/_user.scss */
.user select {
  width: 100%;
  border-radius: var(--border-radius);
}

/* line 150, app/assets/stylesheets/components/_user.scss */
.edit,
.confirm {
  background-color: var(--color-secondary-rotate);
  transition: background-color 0.5s ease;
}

/* line 156, app/assets/stylesheets/components/_user.scss */
.edit:hover,
.confirm:hover {
  background-color: var(--color-secondary);
}

/* line 161, app/assets/stylesheets/components/_user.scss */
.trash,
.cancel {
  background-color: var(--color-red);
  transition: background-color 0.5s ease;
}

/* line 167, app/assets/stylesheets/components/_user.scss */
.trash:hover,
.cancel:hover {
  background-color: var(--color-red-rotate);
}

/* line 174, app/assets/stylesheets/components/_user.scss */
.role-admin {
  width: auto;
  padding: 0px;
  border-radius: var(--border-radius);
  background-color: var(--color-secondary-rotate);
  color: var(--color-tertiary);
  text-align: center;
}

/* line 183, app/assets/stylesheets/components/_user.scss */
.role-member {
  width: auto;
  padding: 0px;
  border-radius: var(--border-radius);
  background-color: var(--color-tertiary);
  color: var(--color-secondary);
  text-align: center;
}

/* line 192, app/assets/stylesheets/components/_user.scss */
.role-user {
  width: auto;
  padding: 0px;
  border-radius: var(--border-radius);
  background-color: var(--color-primary);
  color: var(--color-secondary);
  text-align: center;
}

/* line 204, app/assets/stylesheets/components/_user.scss */
[id^="user_"] {
  width: 100%;
}

/* line 210, app/assets/stylesheets/components/_user.scss */
.form .user__table-cell:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
  padding-left: 8px;
}

/* line 214, app/assets/stylesheets/components/_user.scss */
.form .user__table-cell:nth-last-child(2) {
  padding: 0;
}

/* line 219, app/assets/stylesheets/components/_user.scss */
#reset-button {
  display: flex !important;
  justify-content: flex-start !important;
}

/* line 1, app/assets/stylesheets/components/_event.scss */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  flex-grow: 1;
}

/* line 8, app/assets/stylesheets/components/_event.scss */
.day {
  padding: 10px;
  background-color: #f8f9fa;
  text-align: center;
  border-radius: 5px;
}

@media (max-width: 70rem) {
  /* line 8, app/assets/stylesheets/components/_event.scss */
  .day {
    padding: 5px;
  }
}

/* line 18, app/assets/stylesheets/components/_event.scss */
.day:has(a) {
  padding: 0px;
  height: 100%;
  width: 100%;
}

/* line 27, app/assets/stylesheets/components/_event.scss */
.event-date {
  background-color: var(--color-secondary-rotate);
  color: var(--color-tertiary);
  border-radius: var(--border-radius);
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 70px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* line 38, app/assets/stylesheets/components/_event.scss */
.event-date:hover {
  background-color: var(--color-secondary);
  color: var(--color-glint);
}

@media (max-width: 70rem) {
  /* line 27, app/assets/stylesheets/components/_event.scss */
  .event-date {
    line-height: 50px;
  }
}

/* line 49, app/assets/stylesheets/components/_event.scss */
.no-event {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

/* line 56, app/assets/stylesheets/components/_event.scss */
.calendar,
.simple-calendar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* line 65, app/assets/stylesheets/components/_event.scss */
.event {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10%;
  border-radius: var(--border-radius);
  background-color: var(--color-primary-bg);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* line 74, app/assets/stylesheets/components/_event.scss */
.event__sort {
  background-color: var(--color-primary);
  padding: 10px;
  display: flex;
  flex-direction: column;
}

/* line 80, app/assets/stylesheets/components/_event.scss */
.event__sort-options {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
}

@media (max-width: 70rem) {
  /* line 65, app/assets/stylesheets/components/_event.scss */
  .event {
    padding: 5%;
    width: 100%;
  }
}

/* line 93, app/assets/stylesheets/components/_event.scss */
.event__new {
  align-self: flex-start;
}

/* line 98, app/assets/stylesheets/components/_event.scss */
.event__container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 0;
  min-width: 30%;
  max-height: inherit;
  overflow-y: auto;
}

@media (max-width: 70rem) {
  /* line 98, app/assets/stylesheets/components/_event.scss */
  .event__container {
    width: 100%;
  }
}

/* line 112, app/assets/stylesheets/components/_event.scss */
.event h3 {
  text-decoration: underline;
}

/* line 115, app/assets/stylesheets/components/_event.scss */
.event h3 a:hover {
  color: var(--color-secondary-rotate);
}

/* line 120, app/assets/stylesheets/components/_event.scss */
.event__links {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  align-items: center;
}

/* line 130, app/assets/stylesheets/components/_event.scss */
.events {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

@media (min-width: 70rem) {
  /* line 130, app/assets/stylesheets/components/_event.scss */
  .events {
    max-height: 80vh;
  }
}

@media (max-width: 70rem) {
  /* line 130, app/assets/stylesheets/components/_event.scss */
  .events {
    width: 100%;
  }
}

/* line 146, app/assets/stylesheets/components/_event.scss */
.events__links {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  align-items: center;
}

/* line 156, app/assets/stylesheets/components/_event.scss */
.calendar-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* line 163, app/assets/stylesheets/components/_event.scss */
.calendar-container thead {
  width: 100%;
}

/* line 166, app/assets/stylesheets/components/_event.scss */
.calendar-container thead tr {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* line 173, app/assets/stylesheets/components/_event.scss */
.calendar-container thead th {
  width: 100%;
}

/* line 179, app/assets/stylesheets/components/_event.scss */
.calendar-heading {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* line 188, app/assets/stylesheets/components/_event.scss */
.calendar-title {
  font-size: 1.5rem;
  font-weight: bold;
}

/* line 2, app/assets/stylesheets/components/_photo.scss */
.photo__table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  color: var(--color-secondary);
  border-radius: var(--border-radius);
}

/* line 15, app/assets/stylesheets/components/_photo.scss */
.photo__table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: fit-content;
  border-bottom: 1px solid var(--color-secondary);
  border-radius: 0px;
}

@media (max-width: 70rem) {
  /* line 15, app/assets/stylesheets/components/_photo.scss */
  .photo__table-row {
    overflow: scroll;
  }
}

/* line 29, app/assets/stylesheets/components/_photo.scss */
.photo__table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: var(--color-tertiary);
  color: var(--color-primary-bg);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

/* line 42, app/assets/stylesheets/components/_photo.scss */
.photo__table-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-rotate);
  color: var(--color-secondary);
}

/* line 53, app/assets/stylesheets/components/_photo.scss */
.photo__table-cell {
  flex: 1;
  padding: 10px;
}

/* line 58, app/assets/stylesheets/components/_photo.scss */
.photo__table-row .photo__table-cell:nth-child(1) {
  flex: 0 0 100px;
}

/* line 62, app/assets/stylesheets/components/_photo.scss */
.photo__table-row .photo__table-cell:nth-child(2) {
  flex: 0 0 100px;
}

/* line 67, app/assets/stylesheets/components/_photo.scss */
.photo__table-row .photo__table-cell:nth-child(3) {
  flex-grow: 1;
}

@media (max-width: 70rem) {
  /* line 67, app/assets/stylesheets/components/_photo.scss */
  .photo__table-row .photo__table-cell:nth-child(3) {
    flex: 1 0 100px;
    /* Fixed width */
  }
}

/* line 74, app/assets/stylesheets/components/_photo.scss */
.photo__table-row .photo__table-cell:last-child {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 81, app/assets/stylesheets/components/_photo.scss */
.photo__image {
  max-width: 500px;
  height: auto;
  border-radius: var(--border-radius);
}

/* line 87, app/assets/stylesheets/components/_photo.scss */
.photo__table-button {
  border: 0px;
  border-radius: var(--border-radius);
  background-color: var(--color-secondary);
  cursor: pointer;
}

/* line 96, app/assets/stylesheets/components/_photo.scss */
.edit,
.confirm {
  background-color: var(--color-secondary-rotate);
  transition: background-color 0.5s ease;
  z-index: 1;
}

/* line 103, app/assets/stylesheets/components/_photo.scss */
.edit:hover,
.confirm:hover {
  background-color: var(--color-secondary);
}

/* line 108, app/assets/stylesheets/components/_photo.scss */
.trash,
.cancel {
  background-color: var(--color-red);
  transition: background-color 0.5s ease;
  z-index: 1;
}

/* line 115, app/assets/stylesheets/components/_photo.scss */
.trash:hover,
.cancel:hover {
  background-color: var(--color-red-rotate);
}

/* line 120, app/assets/stylesheets/components/_photo.scss */
[id^="photo_"] {
  width: 100%;
}

/* line 124, app/assets/stylesheets/components/_photo.scss */
turbo-frame:empty {
  display: none;
}

/* Base gallery styles */
/* line 2, app/assets/stylesheets/components/_gallery.scss */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  /* Adjust spacing between items as needed */
  /* Gallery columns */
  /* Gallery items */
  /* Gallery images */
}

@media (max-width: 70rem) {
  /* line 2, app/assets/stylesheets/components/_gallery.scss */
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* line 12, app/assets/stylesheets/components/_gallery.scss */
.gallery__column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Adjust gap between items */
  flex: 1;
  /* Equal width columns */
}

/* line 20, app/assets/stylesheets/components/_gallery.scss */
.gallery__item {
  /* Optional styles for items */
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 100%;
  width: 100%;
}

/* line 28, app/assets/stylesheets/components/_gallery.scss */
.gallery__item .fullscreen-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: white;
  border: none;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 41, app/assets/stylesheets/components/_gallery.scss */
.gallery__item .fullscreen-button img {
  width: 24px;
  height: 24px;
}

/* line 46, app/assets/stylesheets/components/_gallery.scss */
.gallery__item .fullscreen-button:hover {
  background-color: #f0f0f0;
}

/* line 53, app/assets/stylesheets/components/_gallery.scss */
.gallery__image {
  width: 100%;
  display: block;
  border-radius: 8px;
  /* Rounded corners */
  /* Ensure images maintain aspect ratio */
  height: auto;
}

/* line 61, app/assets/stylesheets/components/_gallery.scss */
.gallery__content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.6s;
}

/* line 76, app/assets/stylesheets/components/_gallery.scss */
.gallery__content-links {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 16px;
}

/* line 85, app/assets/stylesheets/components/_gallery.scss */
.gallery__content:hover {
  opacity: 1;
}

/* line 89, app/assets/stylesheets/components/_gallery.scss */
.gallery__content h1 {
  color: var(--color-tertiary);
  font-size: var(--font-size-xxxxl);
  font-family: 'Lato';
  margin-bottom: 10px;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
}

/* line 99, app/assets/stylesheets/components/_gallery.scss */
.gallery__content p {
  color: var(--color-primary-rotate);
  font-size: var(--font-size-xl);
  font-family: 'Lato';
  padding-left: 10%;
  padding-right: 10%;
}

/* line 107, app/assets/stylesheets/components/_gallery.scss */
.gallery__content > * {
  transform: translateY(25px);
  transition: transform 0.6s;
}

/* line 112, app/assets/stylesheets/components/_gallery.scss */
.gallery__content:hover > * {
  transform: translateY(0px);
}

/* line 116, app/assets/stylesheets/components/_gallery.scss */
.gallery__item-file_field {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* line 121, app/assets/stylesheets/components/_gallery.scss */
.gallery__item-file_field .gallery__item-file_label {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--color-tertiary);
  transition: background-color 0.3s ease;
  color: var(--color-secondary);
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

/* line 132, app/assets/stylesheets/components/_gallery.scss */
.gallery__item-file_field .gallery__item-file_label .upload-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* line 138, app/assets/stylesheets/components/_gallery.scss */
.gallery__item-file_field .gallery__item-file_label:hover {
  background-color: var(--color-glint);
  color: var(--color-secondary-rotate);
}

/* line 144, app/assets/stylesheets/components/_gallery.scss */
.gallery__item-file_field .file-input {
  display: none;
}

/* line 151, app/assets/stylesheets/components/_gallery.scss */
#fullscreen-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

/* line 163, app/assets/stylesheets/components/_gallery.scss */
#fullscreen-modal.open {
  display: flex;
}

/* line 167, app/assets/stylesheets/components/_gallery.scss */
#fullscreen-modal .fullscreen-modal-content {
  position: relative;
  max-height: 90%;
  width: auto;
}

/* line 173, app/assets/stylesheets/components/_gallery.scss */
#fullscreen-modal .fullscreen-image {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}

/* line 181, app/assets/stylesheets/components/_gallery.scss */
#fullscreen-modal .close-button {
  position: absolute;
  top: 0px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  transition: color 0.3s ease;
  font-size: 48px;
  cursor: pointer;
}

/* line 193, app/assets/stylesheets/components/_gallery.scss */
#fullscreen-modal .close-button:hover {
  color: #ccc;
}

/* line 2, app/assets/stylesheets/components/_link.scss */
.link__table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  /* Base background color */
  color: var(--color-primary-bg);
  /* Text color */
  border-radius: var(--border-radius);
}

/* line 15, app/assets/stylesheets/components/_link.scss */
.link__new-button {
  background-color: var(--color-secondary);
  color: var(--color-primary-bg);
  padding: 0.5em 1em;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: background-color 0.5s ease;
  display: inline-block;
}

/* line 24, app/assets/stylesheets/components/_link.scss */
.link__new-button:hover {
  background-color: var(--color-secondary-rotate);
}

/* line 29, app/assets/stylesheets/components/_link.scss */
.link__table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: var(--color-tertiary);
  /* Header background color */
  color: var(--color-primary);
  /* Header text color */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* line 42, app/assets/stylesheets/components/_link.scss */
.link__table-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Changed to flex-start for better alignment */
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-rotate);
  /* Body background color */
  color: var(--color-primary-bg);
  /* Body text color */
}

/* line 53, app/assets/stylesheets/components/_link.scss */
.link__table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid var(--color-secondary);
  /* Row separator color */
}

@media (max-width: 70rem) {
  /* line 53, app/assets/stylesheets/components/_link.scss */
  .link__table-row {
    overflow-x: auto;
    /* Responsive design for mobile */
  }
}

/* line 66, app/assets/stylesheets/components/_link.scss */
.link__table-row:last-of-type {
  border-bottom: none;
  /* Remove border for last row */
}

/* line 70, app/assets/stylesheets/components/_link.scss */
.link__table-row .link__table-cell {
  flex: 1;
  padding: 10px;
  color: black;
  width: 100%;
}

/* line 76, app/assets/stylesheets/components/_link.scss */
.link__table-row .link__table-cell .link__text {
  color: black;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* line 81, app/assets/stylesheets/components/_link.scss */
.link__table-row .link__table-cell .link__text:hover {
  color: var(--color-secondary);
}

/* line 90, app/assets/stylesheets/components/_link.scss */
.link__table-row .link__table-cell:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Align content */
  gap: 20px;
}

/* line 100, app/assets/stylesheets/components/_link.scss */
.link__table-button {
  border: 0;
  border-radius: var(--border-radius);
  background-color: var(--color-secondary);
  /* Default button color */
  color: var(--color-primary-bg);
  /* Button text color */
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.5s ease;
  /* Smooth transitions */
}

/* line 108, app/assets/stylesheets/components/_link.scss */
.link__table-button:hover {
  background-color: var(--color-secondary-rotate);
  /* Button hover color */
}

/* line 113, app/assets/stylesheets/components/_link.scss */
.link__image {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius);
}

/* line 120, app/assets/stylesheets/components/_link.scss */
.edit,
.confirm {
  background-color: var(--color-secondary-rotate);
}

/* line 125, app/assets/stylesheets/components/_link.scss */
.edit:hover,
.confirm:hover {
  background-color: var(--color-secondary);
}

/* line 130, app/assets/stylesheets/components/_link.scss */
.trash,
.cancel {
  background-color: var(--color-red);
  /* Default delete/cancel color */
  color: var(--color-primary-bg);
  /* Text color */
}

/* line 136, app/assets/stylesheets/components/_link.scss */
.trash:hover,
.cancel:hover {
  background-color: var(--color-red-rotate);
  /* Hover color for delete/cancel */
}

/* line 141, app/assets/stylesheets/components/_link.scss */
[id^="link_"] {
  width: 100%;
}

/* line 2, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout {
  display: flex;
  padding: 20px;
}

/* line 7, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard {
  flex: 1;
  margin-right: 20px;
}

/* line 11, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}

/* line 18, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table th,
.page-layout__leaderboard table td {
  padding: 10px;
  text-align: left;
  width: 50%;
}

/* line 25, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table th:nth-child(2),
.page-layout__leaderboard table td:nth-child(2) {
  text-align: center;
}

/* line 30, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table thead tr th:first-child {
  border-top-left-radius: 10px;
}

/* line 34, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table th:first-child,
.page-layout__leaderboard table td:first-child {
  max-width: 50px;
}

/* line 39, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table th:last-child,
.page-layout__leaderboard table td:last-child {
  max-width: 20px;
}

/* line 45, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table thead tr th:last-child {
  border-top-right-radius: 10px;
}

/* line 49, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table tbody tr:first-child td:first-child {
  border-top-left-radius: 10px;
}

/* line 53, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table tbody tr:first-child td:last-child {
  border-top-right-radius: 10px;
}

/* line 57, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

/* line 61, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* line 65, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table .page-layout__leaderboard--highlighted {
  background-color: #f0f0f0;
}

/* line 69, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__leaderboard table tbody tr {
  border-bottom: var(--color-secondary) 1px solid;
}

/* line 76, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories {
  flex: 1;
  max-width: 40%;
  text-align: center;
}

/* line 81, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-collapse: collapse;
}

/* line 87, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__header, .page-layout__categories .categories-table__row {
  display: flex;
  width: 100%;
  font-weight: bold;
  border-bottom: 1px solid var(--color-secondary);
}

/* line 95, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__header {
  background-color: var(--color-tertiary);
  color: var(--color-primary-bg);
}

/* line 100, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__row {
  background-color: var(--color-primary);
  text-align: left;
  width: 100%;
}

/* line 106, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__cell {
  flex: 1;
  padding: 10px;
  text-align: left;
}

/* line 111, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__cell-links {
  padding: 10px;
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

/* line 120, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__body {
  background-color: var(--color-primary-rotate);
}

/* line 124, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__cell:first-child {
  min-width: 30%;
  flex: 1;
}

/* line 129, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__cell:nth-child(2) {
  max-width: 30%;
}

/* line 133, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__cell:nth-child(3) {
  max-width: 20%;
}

/* line 137, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__cell:nth-child(4) {
  min-width: 20%;
  flex: 1;
}

/* line 142, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories .categories-table__button {
  border: 0;
  padding: 0 10px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.5s ease;
  /* Smooth transitions */
}

/* line 152, app/assets/stylesheets/components/_leaderboard.scss */
.page-layout__categories h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

/* line 159, app/assets/stylesheets/components/_leaderboard.scss */
.categories {
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* line 164, app/assets/stylesheets/components/_leaderboard.scss */
.dark-text {
  color: var(--color-secondary);
}

/* line 168, app/assets/stylesheets/components/_leaderboard.scss */
.light-text {
  color: var(--color-primary);
}

/* line 173, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  /* Base background color */
  color: var(--color-primary-bg);
  /* Text color */
  border-radius: var(--border-radius);
}

/* line 186, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__new-button {
  background-color: var(--color-secondary);
  color: var(--color-primary-bg);
  padding: 0.5em 1em;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: background-color 0.5s ease;
  display: inline-block;
  margin-top: 20px;
}

/* line 196, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__new-button:hover {
  background-color: var(--color-secondary-rotate);
}

/* line 201, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: var(--color-tertiary);
  /* Header background color */
  color: var(--color-primary-bg);
  /* Header text color */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* line 214, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Changed to flex-start for better alignment */
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-rotate);
  /* Body background color */
  color: var(--color-primary-bg);
  /* Body text color */
}

/* line 225, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid var(--color-secondary);
  /* Row separator color */
}

@media (max-width: 70rem) {
  /* line 225, app/assets/stylesheets/components/_leaderboard.scss */
  .leaderboard_category__table-row {
    overflow: scroll;
    /* Responsive design for mobile */
  }
}

/* line 238, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row:last-of-type {
  border-bottom: none;
  /* Remove border for last row */
}

/* line 242, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row .leaderboard_category__table-cell {
  flex: 1;
  padding: 10px;
  color: black;
  width: 100%;
}

/* line 248, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row .leaderboard_category__table-cell__name {
  max-width: 10ch;
  /* Approximate width for 10 characters */
  white-space: normal;
  /* Allow wrapping */
  word-break: break-all;
  /* Break words at any point */
  color: black;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 10px;
  /* Adds padding */
  box-sizing: border-box;
  display: flex;
  /* Enables flex centering */
  align-items: center;
  /* Vertically centers the text */
  justify-content: center;
  /* Horizontally centers the text */
  text-align: center;
  /* Centers text within the line */
}

/* line 263, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row .leaderboard_category__table-cell.color-example {
  position: relative;
  color: transparent;
}

/* line 267, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row .leaderboard_category__table-cell.color-example::before {
  content: '';
  display: inline-block;
  width: 70%;
  height: 20px;
  background-color: inherit;
  border-radius: 10px;
}

/* line 277, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row .leaderboard_category__table-cell .leaderboard_category__text {
  color: black;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* line 282, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row .leaderboard_category__table-cell .leaderboard_category__text:hover {
  color: var(--color-secondary);
}

/* line 291, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__table-row .leaderboard_category__table-cell:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Align content */
  gap: 20px;
}

/* line 303, app/assets/stylesheets/components/_leaderboard.scss */
.leaderboard_category__image {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius);
}

/* line 310, app/assets/stylesheets/components/_leaderboard.scss */
.edit,
.confirm {
  background-color: var(--color-secondary-rotate);
}

/* line 315, app/assets/stylesheets/components/_leaderboard.scss */
.edit:hover,
.confirm:hover {
  background-color: var(--color-secondary);
}

/* line 320, app/assets/stylesheets/components/_leaderboard.scss */
.trash,
.cancel {
  background-color: var(--color-red);
  /* Default delete/cancel color */
  color: var(--color-primary-bg);
  /* Text color */
}

/* line 326, app/assets/stylesheets/components/_leaderboard.scss */
.trash:hover,
.cancel:hover {
  background-color: var(--color-red-rotate);
  /* Hover color for delete/cancel */
}

/* Styling for the color cell with a rectangular color block */
/* line 332, app/assets/stylesheets/components/_leaderboard.scss */
.color-cell .color-example {
  width: 50px;
  /* Width of the rectangle */
  height: 20px;
  /* Height of the rectangle */
  border-radius: 4px;
  /* Slightly rounded corners */
  background-color: currentColor;
  /* Uses the element's color */
}

/* Apply color from data attribute */
/* line 340, app/assets/stylesheets/components/_leaderboard.scss */
.color-cell {
  color: var(--color-primary);
  /* Fallback color */
}

/* Use data-color as background color */
/* line 345, app/assets/stylesheets/components/_leaderboard.scss */
.color-cell[data-color] .color-example {
  background-color: attr(data-color color, var(--color-secondary));
  /* Use data-color as background */
}

/* line 350, app/assets/stylesheets/components/_leaderboard.scss */
[id^="leaderboard_category_"] {
  width: 100%;
}

/* line 354, app/assets/stylesheets/components/_leaderboard.scss */
.color-example {
  align-self: center;
  vertical-align: middle;
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* line 1, app/assets/stylesheets/components/_merch.scss */
a {
  color: black;
}

/* line 5, app/assets/stylesheets/components/_merch.scss */
.merch-item {
  border-radius: var(--border-radius);
  background-color: var(--color-primary-rotate);
}

/* line 10, app/assets/stylesheets/components/_merch.scss */
.merchtitle {
  margin-bottom: 10px;
  font-size: 55px;
}

/* line 15, app/assets/stylesheets/components/_merch.scss */
.merch-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1em;
  row-gap: 20px;
}

/* line 22, app/assets/stylesheets/components/_merch.scss */
form {
  border: 10px black;
  text-align: center;
}

/* line 27, app/assets/stylesheets/components/_merch.scss */
.wrapper {
  margin-left: 20px;
  margin-top: 10px;
}

/* Container Styling */
/* line 32, app/assets/stylesheets/components/_merch.scss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: white;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding-top: 95px !important;
}

/* Header Styling */
/* line 47, app/assets/stylesheets/components/_merch.scss */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  /* Allows button positioning */
  width: 100%;
}

/* line 56, app/assets/stylesheets/components/_merch.scss */
.header-title {
  flex: 1;
  text-align: center;
  font-size: 55px;
  color: black;
  margin: 0;
}

/* line 64, app/assets/stylesheets/components/_merch.scss */
.header-button {
  position: absolute;
  right: 0;
  margin-right: 20px;
}

/* line 70, app/assets/stylesheets/components/_merch.scss */
.button-link {
  text-decoration: none;
  padding: 10px 20px;
  background-color: #4c6444;
  color: white;
  border-radius: 4px;
  font-weight: bold;
}

/* line 78, app/assets/stylesheets/components/_merch.scss */
.button-link:hover {
  background-color: #0056b3;
  /* Hover color */
}

/* line 82, app/assets/stylesheets/components/_merch.scss */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* line 95, app/assets/stylesheets/components/_merch.scss */
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 80%;
  text-align: center;
}

/* line 104, app/assets/stylesheets/components/_merch.scss */
.hidden {
  display: none;
}

/* Container Styling for New/Edit Form */
/* line 109, app/assets/stylesheets/components/_merch.scss */
.new-wrapper {
  background-color: white;
  width: 80%;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Title and Description Styles */
/* line 120, app/assets/stylesheets/components/_merch.scss */
.new-title, .new-desc, .new-link {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* line 128, app/assets/stylesheets/components/_merch.scss */
.new-title::placeholder, .new-desc::placeholder, .new-link::placeholder {
  color: black;
}

/* Submit Button Styling */
/* line 133, app/assets/stylesheets/components/_merch.scss */
.submit-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

/* line 143, app/assets/stylesheets/components/_merch.scss */
.submit-button:hover {
  background-color: #0056b3;
}

/* line 147, app/assets/stylesheets/components/_merch.scss */
.item-title {
  text-align: center;
  height: 20px !important;
  background-color: red;
}

/* line 153, app/assets/stylesheets/components/_merch.scss */
.item-description {
  font-size: 20px;
}

/* line 157, app/assets/stylesheets/components/_merch.scss */
.merch-title {
  text-align: center;
}

/* line 161, app/assets/stylesheets/components/_merch.scss */
.flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-m);
  margin-bottom: var(--space-s);
}

/* line 2, app/assets/stylesheets/components/_ideas.scss */
.ideas-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1em;
  row-gap: 20px;
}

/* line 9, app/assets/stylesheets/components/_ideas.scss */
form {
  border: 10px black;
  text-align: center;
}

/* line 14, app/assets/stylesheets/components/_ideas.scss */
.idea-item {
  background-color: #FFFF90;
  width: 375px;
  /* Set width of grid item */
  height: 375px;
  /* Set height of grid item */
  padding: 20px;
  /* Adds some internal space around the content */
  color: black;
}

/* line 27, app/assets/stylesheets/components/_ideas.scss */
.wrapper {
  margin-left: 20px;
  margin-top: 10px;
}

/* line 32, app/assets/stylesheets/components/_ideas.scss */
.ideas-title {
  margin-bottom: 10px;
  font-size: 55px;
}

/* line 38, app/assets/stylesheets/components/_ideas.scss */
.item-title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
  background-color: transparent;
  border: none;
  height: 100px !important;
  overflow-y: hidden;
  width: 75%;
  color: black;
}

/* line 50, app/assets/stylesheets/components/_ideas.scss */
.idea-footer {
  margin-top: auto;
}

/* line 54, app/assets/stylesheets/components/_ideas.scss */
.idea-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
}

/* line 61, app/assets/stylesheets/components/_ideas.scss */
.show-button {
  padding-bottom: 10px;
}

/* line 65, app/assets/stylesheets/components/_ideas.scss */
.idea-desc {
  background-color: transparent;
  border: none;
  overflow-y: hidden;
  height: 100%;
  color: black;
}

/* line 73, app/assets/stylesheets/components/_ideas.scss */
a {
  color: black;
}

/* line 77, app/assets/stylesheets/components/_ideas.scss */
textarea::-webkit-resizer {
  display: none;
}

/* line 81, app/assets/stylesheets/components/_ideas.scss */
.title-and-delete {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

/* line 87, app/assets/stylesheets/components/_ideas.scss */
.item-title {
  flex: 1;
  /* Allows the textarea or title to expand and take up space */
  text-align: left;
}

/* line 92, app/assets/stylesheets/components/_ideas.scss */
.delete-button {
  z-index: 100 !important;
  font-size: 50px;
  font-weight: bold;
  color: black;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  margin-top: -30px;
  margin-right: -10px;
}

/* line 105, app/assets/stylesheets/components/_ideas.scss */
.delete-button:hover {
  color: red;
}

/* Dimming background effect for main content */
/* line 110, app/assets/stylesheets/components/_ideas.scss */
.dim-background {
  opacity: 0.5;
  /* Darkens the background */
  transition: opacity 0.3s;
  /* Smooth fade-in and fade-out */
  pointer-events: none;
  /* Prevents interaction with background content */
}

/* CSS for modal overlay and positioning */
/* line 117, app/assets/stylesheets/components/_ideas.scss */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  /* Dims the background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* line 130, app/assets/stylesheets/components/_ideas.scss */
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 80%;
  text-align: center;
  z-index: 1001;
}

/* line 140, app/assets/stylesheets/components/_ideas.scss */
.hidden {
  display: none;
}

/* line 144, app/assets/stylesheets/components/_ideas.scss */
.new-idea {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

/* line 151, app/assets/stylesheets/components/_ideas.scss */
.center {
  position: fixed;
  top: 30%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* line 159, app/assets/stylesheets/components/_ideas.scss */
.back {
  margin-bottom: 20px;
}

/* line 163, app/assets/stylesheets/components/_ideas.scss */
.new-title {
  margin-top: 40px;
  width: 100%;
  height: 100px;
}

/* line 169, app/assets/stylesheets/components/_ideas.scss */
.new-desc {
  width: 100%;
  height: 150px;
}

/* line 174, app/assets/stylesheets/components/_ideas.scss */
.new-title::placeholder {
  color: black;
}

/* line 178, app/assets/stylesheets/components/_ideas.scss */
.new-desc::placeholder {
  color: black;
}

/* Container Styling */
/* line 183, app/assets/stylesheets/components/_ideas.scss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: white;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Adds shadow for depth */
  width: 80%;
  padding-top: 95px !important;
}

/* Header Styling */
/* line 200, app/assets/stylesheets/components/_ideas.scss */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  position: relative;
  width: 100%;
}

/* line 209, app/assets/stylesheets/components/_ideas.scss */
.header-title {
  flex: 1;
  text-align: center;
  font-size: 55px !important;
  color: black;
  margin: 0;
  margin-left: 90px;
}

/* line 218, app/assets/stylesheets/components/_ideas.scss */
.header-button {
  position: absolute;
  right: 0;
  margin-right: 20px;
}

/* Button Link Styling */
/* line 225, app/assets/stylesheets/components/_ideas.scss */
.button-link {
  display: inline-block;
  /* Ensures button width adjusts based on content */
  padding: 10px 20px;
  /* Padding for consistent size */
  background-color: #4c6444;
  /* Background color */
  color: white;
  /* Text color */
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  /* Prevents text wrapping */
}

/* line 236, app/assets/stylesheets/components/_ideas.scss */
.button-link:hover {
  background-color: #0056b3;
  /* Hover color */
}

/* Ensure Textarea Stays Full Width Without Focus Borders */
/* line 241, app/assets/stylesheets/components/_ideas.scss */
textarea {
  width: 100% !important;
  background-color: transparent;
  border: none;
  resize: none;
}

/* line 248, app/assets/stylesheets/components/_ideas.scss */
textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

/* Save Button Visibility Based on Focus */
/* line 255, app/assets/stylesheets/components/_ideas.scss */
.save-button {
  display: none;
}

/* line 259, app/assets/stylesheets/components/_ideas.scss */
form:focus-within .save-button {
  display: inline-block;
}

/* Edited Label Styling */
/* line 264, app/assets/stylesheets/components/_ideas.scss */
.edited-label {
  font-style: italic;
  color: gray;
  margin-left: 5px;
}

/* line 270, app/assets/stylesheets/components/_ideas.scss */
.ideas-title {
  font-size: 55px !important;
}

/* line 275, app/assets/stylesheets/components/_ideas.scss */
.new-wrapper {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  height: 80%;
  box-shadow: none !important;
}

/* line 287, app/assets/stylesheets/components/_ideas.scss */
.form-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  border-radius: 8px;
}

/* line 294, app/assets/stylesheets/components/_ideas.scss */
.submit-button {
  background-color: #4c6444;
  font-size: 20px;
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
}

/* line 303, app/assets/stylesheets/components/_ideas.scss */
.submit-button:hover {
  background-color: #0056b3;
}

/* line 1, app/assets/stylesheets/components/_carousel.scss */
.carousel-container {
  position: relative;
  display: flex;
  max-height: 100%;
  border-radius: var(--border-radius);
  padding: 0;
  overflow: hidden;
}

/* line 10, app/assets/stylesheets/components/_carousel.scss */
.carousel-slides {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* line 16, app/assets/stylesheets/components/_carousel.scss */
.carousel-slide {
  transition: opacity 0.5s ease-in-out;
}

/* line 20, app/assets/stylesheets/components/_carousel.scss */
.carousel-image {
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--border-radius);
}

/* line 27, app/assets/stylesheets/components/_carousel.scss */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(75, 85, 99, 0.5);
  color: white;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
}

/* line 38, app/assets/stylesheets/components/_carousel.scss */
.carousel-button-left {
  left: 0;
}

/* line 42, app/assets/stylesheets/components/_carousel.scss */
.carousel-button-right {
  right: 0;
}

/* line 46, app/assets/stylesheets/components/_carousel.scss */
.carousel-icon {
  height: 1.5rem;
  width: 1.5rem;
}

/* line 51, app/assets/stylesheets/components/_carousel.scss */
.hidden {
  display: none;
}

/* Hover effect for the carousel content */
/* line 56, app/assets/stylesheets/components/_carousel.scss */
.carousel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  /* dark transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  color: white;
}

/* line 72, app/assets/stylesheets/components/_carousel.scss */
.carousel-container:hover .carousel-content {
  opacity: 1;
}

/* line 76, app/assets/stylesheets/components/_carousel.scss */
.carousel-content h1 {
  color: var(--color-tertiary);
  font-size: var(--font-size-xxxxl);
  text-align: center;
  margin-bottom: 10px;
}

/* line 83, app/assets/stylesheets/components/_carousel.scss */
.carousel-content p {
  color: var(--color-primary-rotate);
  font-size: var(--font-size-xl);
  text-align: center;
  padding: 0 10%;
}

/* line 90, app/assets/stylesheets/components/_carousel.scss */
.carousel-content > * {
  transform: translateY(25px);
  transition: transform 0.6s ease-in-out;
}

/* line 95, app/assets/stylesheets/components/_carousel.scss */
.carousel-container:hover .carousel-content > * {
  transform: translateY(0px);
}

/* line 1, app/assets/stylesheets/components/_support.scss */
.support-section {
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: var(--color-primary-bg);
}

/* line 9, app/assets/stylesheets/components/_support.scss */
.support-section h2 {
  color: var(--color-secondary);
  margin-top: 0;
  margin-bottom: var(--space-m);
}

/* line 15, app/assets/stylesheets/components/_support.scss */
.support-section p {
  color: var(--color-dark);
  padding-left: var(--space-m);
}

/* line 20, app/assets/stylesheets/components/_support.scss */
.support-section img {
  max-width: 66%;
  margin-top: var(--space-m);
  margin-bottom: var(--space-s);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--border-radius);
}

/* showEvent.scss */
/* Container styling to prevent content overlap with the navbar */
/* line 4, app/assets/stylesheets/components/_showEvent.scss */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 20px 20px;
}

/* Event Details Page Styling */
/* line 11, app/assets/stylesheets/components/_showEvent.scss */
.event-details {
  background-color: #f8f9fa;
  padding: 120px 20px 20px;
  border-radius: 8px;
  margin-top: 20px;
}

/* Centered title for the Event Details page */
/* line 19, app/assets/stylesheets/components/_showEvent.scss */
.event-header h1 {
  font-size: 2em;
  color: #444;
  margin-bottom: 20px;
  text-align: center;
}

/* Event Information Bubbles */
/* line 27, app/assets/stylesheets/components/_showEvent.scss */
.event-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 600px) {
  /* line 27, app/assets/stylesheets/components/_showEvent.scss */
  .event-info {
    grid-template-columns: 1fr 1fr;
  }
}

/* line 36, app/assets/stylesheets/components/_showEvent.scss */
.event-info .event-bubble {
  background-color: #ffffff;
  border: 2px solid var(--color-secondary-rotate);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

/* line 44, app/assets/stylesheets/components/_showEvent.scss */
.event-info .event-bubble:hover {
  transform: translateY(-5px);
}

/* line 48, app/assets/stylesheets/components/_showEvent.scss */
.event-info .event-bubble h3 {
  font-size: 1.1em;
  color: #333;
  font-weight: 600;
  margin-bottom: 5px;
}

/* line 55, app/assets/stylesheets/components/_showEvent.scss */
.event-info .event-bubble p {
  font-size: 1em;
  color: #555;
  margin: 0;
}

/* Action Buttons below the event details */
/* line 64, app/assets/stylesheets/components/_showEvent.scss */
.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

/* Attendance List Table Styling */
/* line 73, app/assets/stylesheets/components/_showEvent.scss */
.attendance-list {
  margin-top: 30px;
}

/* line 76, app/assets/stylesheets/components/_showEvent.scss */
.attendance-list h2 {
  font-size: 1.5em;
  margin-bottom: 15px;
  text-align: center;
}

/* line 82, app/assets/stylesheets/components/_showEvent.scss */
.attendance-list table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

/* line 87, app/assets/stylesheets/components/_showEvent.scss */
.attendance-list table th, .attendance-list table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

/* line 93, app/assets/stylesheets/components/_showEvent.scss */
.attendance-list table th {
  background-color: #e8f4e8;
  color: #333;
  font-weight: 600;
}

/* Form styling for consistent alignment in New/Edit Event pages */
/* line 102, app/assets/stylesheets/components/_showEvent.scss */
.new-event-form, .edit-event-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Optional styling to center the form on the page */
  align-items: center;
  text-align: center;
}

/* line 107, app/assets/stylesheets/components/_showEvent.scss */
.new-event-form label, .edit-event-form label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

/* line 113, app/assets/stylesheets/components/_showEvent.scss */
.new-event-form input[type="text"], .new-event-form input[type="datetime-local"], .new-event-form textarea, .edit-event-form input[type="text"], .edit-event-form input[type="datetime-local"], .edit-event-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* line 122, app/assets/stylesheets/components/_showEvent.scss */
.new-event-form textarea, .edit-event-form textarea {
  min-height: 100px;
  resize: vertical;
}

/* line 2, app/assets/stylesheets/components/_table.scss */
.table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  color: var(--color-secondary);
  border-radius: var(--border-radius);
}

/* line 14, app/assets/stylesheets/components/_table.scss */
.table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid var(--color-secondary);
  border-radius: 0px;
}

@media (max-width: 70rem) {
  /* line 14, app/assets/stylesheets/components/_table.scss */
  .table-row {
    overflow: auto;
  }
}

/* line 27, app/assets/stylesheets/components/_table.scss */
.table-row .actions {
  padding: 10px;
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

/* line 35, app/assets/stylesheets/components/_table.scss */
.table-row__event {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

/* line 41, app/assets/stylesheets/components/_table.scss */
.table-row__event th {
  width: 100%;
}

/* line 51, app/assets/stylesheets/components/_table.scss */
.table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: var(--color-tertiary);
  color: var(--color-primary-bg);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  font-weight: bold;
}

/* line 64, app/assets/stylesheets/components/_table.scss */
.table-header a {
  color: var(--color-primary-bg);
}

/* line 69, app/assets/stylesheets/components/_table.scss */
.table-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-rotate);
  color: var(--color-secondary);
}

/* line 80, app/assets/stylesheets/components/_table.scss */
.table-cell {
  flex: 1;
  padding: 10px;
}

/* line 85, app/assets/stylesheets/components/_table.scss */
.table-image {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius);
}

/* line 91, app/assets/stylesheets/components/_table.scss */
.table-row .user-cell:nth-child(1) {
  flex: 0 0 70px;
}

@media (max-width: 70rem) {
  /* line 95, app/assets/stylesheets/components/_table.scss */
  .table-row .user-cell:nth-child(2) {
    flex: 1 0 100px;
  }
}

/* line 101, app/assets/stylesheets/components/_table.scss */
.table-row .user-cell:nth-child(3) {
  flex-grow: 1;
}

@media (max-width: 70rem) {
  /* line 101, app/assets/stylesheets/components/_table.scss */
  .table-row .user-cell:nth-child(3) {
    flex: 1 0 75px;
    /* Fixed width */
  }
}

/* line 108, app/assets/stylesheets/components/_table.scss */
.table-row .user-cell:nth-child(4) {
  flex-grow: 1;
}

@media (max-width: 70rem) {
  /* line 108, app/assets/stylesheets/components/_table.scss */
  .table-row .user-cell:nth-child(4) {
    flex: 1 0 75px;
    /* Fixed width */
  }
}

/* line 114, app/assets/stylesheets/components/_table.scss */
.table-row .user-cell:nth-child(5) {
  flex: 0 0 80px;
}

/* line 118, app/assets/stylesheets/components/_table.scss */
.table-row .user-cell:nth-child(6) {
  flex: 0 0 80px;
}

/* line 122, app/assets/stylesheets/components/_table.scss */
.table-row .user-cell:last-child {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 129, app/assets/stylesheets/components/_table.scss */
.table-button {
  border: 0;
  padding: 0 10px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.5s ease;
  /* Smooth transitions */
}

/* line 138, app/assets/stylesheets/components/_table.scss */
.table .form {
  padding: 0;
}

/* line 142, app/assets/stylesheets/components/_table.scss */
.table select {
  width: 100%;
  border-radius: var(--border-radius);
}

/* line 154, app/assets/stylesheets/components/_table.scss */
.edit,
.confirm {
  background-color: var(--color-secondary-rotate);
  transition: background-color 0.5s ease;
}

/* line 160, app/assets/stylesheets/components/_table.scss */
.edit:hover,
.confirm:hover {
  background-color: var(--color-secondary);
}

/* line 165, app/assets/stylesheets/components/_table.scss */
.trash,
.cancel {
  background-color: var(--color-red);
  transition: background-color 0.5s ease;
}

/* line 171, app/assets/stylesheets/components/_table.scss */
.trash:hover,
.cancel:hover {
  background-color: var(--color-red-rotate);
}

/* line 178, app/assets/stylesheets/components/_table.scss */
.role-admin {
  width: auto;
  padding: 0px;
  border-radius: var(--border-radius);
  background-color: var(--color-secondary-rotate);
  color: var(--color-tertiary);
  text-align: center;
}

/* line 187, app/assets/stylesheets/components/_table.scss */
.role-member {
  width: auto;
  padding: 0px;
  border-radius: var(--border-radius);
  background-color: var(--color-tertiary);
  color: var(--color-secondary);
  text-align: center;
}

/* line 196, app/assets/stylesheets/components/_table.scss */
.role-user {
  width: auto;
  padding: 0px;
  border-radius: var(--border-radius);
  background-color: var(--color-primary);
  color: var(--color-secondary);
  text-align: center;
}

/* line 208, app/assets/stylesheets/components/_table.scss */
[id^="user_"] {
  width: 100%;
}

/* line 214, app/assets/stylesheets/components/_table.scss */
.form .user-cell:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
  padding-left: 8px;
}

/* line 218, app/assets/stylesheets/components/_table.scss */
.form .user-cell:nth-last-child(2) {
  padding: 0;
}

/* line 1, app/assets/stylesheets/layouts/_container.scss */
.container {
  width: 100%;
  height: 100%;
  padding-right: var(--space-xs);
  padding-left: var(--space-xs);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-primary-bg);
  padding-bottom: var(--space-m);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

@media (min-width: 70rem) {
  /* line 1, app/assets/stylesheets/layouts/_container.scss */
  .container {
    padding-right: var(--space-m);
    padding-left: var(--space-m);
    max-width: 70rem;
  }
}

/* line 19, app/assets/stylesheets/layouts/_container.scss */
.container-full {
  width: 100%;
  max-width: 100%;
  padding-right: var(--space-xs);
  padding-left: var(--space-xs);
  background-color: var(--color-primary-bg);
  padding-bottom: var(--space-m);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  margin-left: auto;
  margin-right: auto;
}

/* line 1, app/assets/stylesheets/layouts/_header.scss */
.header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  margin-top: var(--space-m);
  margin-bottom: var(--space-l);
  color: var(--color-secondary);
  font-family: 'Lato';
}

@media (min-width: 70rem) {
  /* line 1, app/assets/stylesheets/layouts/_header.scss */
  .header {
    margin-bottom: var(--space-xl);
  }
}

/* line 1, app/assets/stylesheets/layouts/_stack.scss */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* line 7, app/assets/stylesheets/layouts/_stack.scss */
.stack > * {
  margin-block: 0;
}

/* line 11, app/assets/stylesheets/layouts/_stack.scss */
.stack > * + * {
  margin-block-start: var(--space, 1.5rem);
}

/* line 1, app/assets/stylesheets/layouts/_flash.scss */
.flash {
  position: absolute;
  width: 95%;
  height: auto;
  top: 6rem;
  left: 0;
  padding: var(--space-xxxs);
  margin-left: 2%;
  margin-right: 2%;
  border-radius: var(--border-radius);
  text-align: center;
  font-weight: bolder;
  text-align: center;
  font-weight: bolder;
  z-index: 1000;
}

/* line 17, app/assets/stylesheets/layouts/_flash.scss */
.flash__container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-primary-bg);
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

@media (min-width: 70rem) {
  /* line 17, app/assets/stylesheets/layouts/_flash.scss */
  .flash__container {
    padding-right: var(--space-m);
    padding-left: var(--space-m);
    max-width: 70rem;
  }
}

/* line 32, app/assets/stylesheets/layouts/_flash.scss */
.flash__alert {
  color: var(--color-red);
  border: 1px solid var(--color-red);
  background-color: #f8d7da;
}

/* line 38, app/assets/stylesheets/layouts/_flash.scss */
.flash__notice {
  color: blue;
  border: 1px solid blue;
  background-color: #cce5ff;
}

/* line 44, app/assets/stylesheets/layouts/_flash.scss */
.flash__success {
  color: var(--color-secondary-rotate);
  border: 1px solid var(--color-secondary-rotate);
  background-color: #d4edda;
}

/* line 53, app/assets/stylesheets/layouts/_flash.scss */
.flash__container.fade-out {
  background-color: var(--color-primary-bg);
  opacity: 0;
}