html,
body {
  background-color: var(--light-colour);
  width: 100vw;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

h1 {
  color: var(--dark-colour);
  font-weight: bold;
  font-size: 5vmin;
  font-weight: 900;
  text-transform: uppercase;
}

.lightFont {
  color: var(--light-colour) !important;
}

.home-page {
  background: var(--light-colour);
}

.dashboard-section {
  display: flex;
  flex-direction: column;
  width: 90vw;
  height: 80vh;
  height: 80svh;
  align-items: center;
  justify-content: center;
  row-gap: 1vmin;
  text-wrap: balance;
  z-index: 4;
  position: absolute;
  top: 17.5vh;
  top: 17.5svh;
  border-radius: 2vmin;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  padding: 0 5vmin;
  background-color: var(--white-colour);
}

.title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 5vmin;
  height: 10vh;
  height: 10svh;
  width: 80vw;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.title-section h1 {
  font-size: 3.5vmin;
}

#dashboard-section-title {
  /* pointer-events: none; */
  /* cursor: pointer; */
  line-height: 0.85;
  user-select: none;
}

.smallishFont {
  white-space: nowrap;
  font-size: 2vmin;
}

/* #dashboard-section-title:hover {
  text-decoration: underline;
} */

.title-and-button,
.credits-and-create {
  display: flex;
  align-items: center;
  column-gap: 2vmin;
}

#create-new-list-button {
  height: 100%;
  min-width: 25vmin;
  padding: 2vmin;
  background-color: var(--dark-colour);
  display: grid;
  grid-template-columns: 20% 80%;
}

#create-new-list-button p {
  grid-column: 2/3;
}

#create-new-list-button svg {
  fill: var(--white-colour);
  grid-column: 1/2;
}

.credit-count {
  display: flex;
  align-items: center;
  column-gap: 1vmin;
}

.credit-count p {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.6vmin;
  user-select: none;
}

.credit-count .favourite-icon {
  background-color: var(--yellow-colour);
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.credit-count .favourite-icon:hover {
  filter: brightness(105%);
}

.credit-count .favourite-icon p {
  font-weight: 900;
  font-size: 2vmin;
}

.title-and-button .circleButton,
.home-page-menu .circleButton {
  height: 100%;
  aspect-ratio: 1;
  background-color: var(--dark-colour);
  padding: 2vmin;
}

.title-and-button svg,
.home-page-menu .circleButton svg {
  fill: var(--white-colour);
}

#toggle-list-view-label {
  cursor: pointer;
  user-select: auto;
}

#toggle-list-view-label:hover {
  text-decoration: underline;
  text-underline-offset: 0.5vmin;
  text-decoration-thickness: 0.25vmin;
}

.saved-file-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  align-items: start;
  align-content: start;
  gap: 2vmin;
  width: 80vw;
  height: 55vh;
  height: 55svh;
  padding: 2vmin;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 1vmin;
  background-color: rgba(0, 0, 0, 0.01);
}

.list-item {
  display: grid;
  grid-template-columns: 85% 15%;
  grid-template-rows: auto;
  justify-items: start;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 2vmin;
  background: var(--white-colour);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  user-select: none;
  cursor: pointer;
  height: 100%;
}

.list-item:hover {
  box-shadow: rgba(0, 0, 0, 0.45) 0px 15px 10px -10px;
  /* filter: brightness(110%); */
  border: 1px solid var(--dark-colour);
}

/* -------------------------- Search result preview ------------------------- */
.match-preview {
  display: none;
  font-size: 1.5vmin;
  margin-top: 2vmin;
  color: var(--black-colour);
}

.favourite-icon {
  background-color: rgba(0, 0, 0, 0.1);
  width: 5vmin;
  /* pointer-events: none; */
  height: 5vmin;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vmin;
  justify-self: center;
}

.favourite-icon svg {
  fill: rgba(0, 0, 0, 0.1);
  width: 2.5vmin;
}

.favourite-icon svg,
.favourite-icon svg path {
  pointer-events: none;
}

.favourite-icon.favourite-active {
  background-color: var(--dark-colour);
}

.favourite-icon.favourite-active svg {
  fill: var(--white-colour);
}

.list-info h3 {
  margin: 0;
  font-size: 1.75vmin;
  color: var(--black-colour);
  font-weight: 400;
}

.list-info p {
  margin-top: 0.25vmin;
  font-size: 1.4vmin;
  color: rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------- */
/*                                 LIST SELECT                                */
/* -------------------------------------------------------------------------- */

.all-lists-view,
.focused-list-view {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
}

.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* -------------------------------------------------------------------------- */
/*                               RESOURCE SELECT                              */
/* -------------------------------------------------------------------------- */

.focused-list-view {
  display: grid;
  grid-template-columns: 39vw 39vw;
  width: 80vw;
  height: 63vh;
  height: 63svh;
  box-sizing: border-box;
  padding: 1vmin;
  background: var(--light-colour);
  border-radius: 2vmin;
  gap: 0.5vw;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.resource-panel-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  overflow-y: auto;
  height: 100%;
  background: transparent;
  border-radius: 1vmin;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0 1px 0;
}

.resource-panel {
  font-size: 2vmin;
  background-color: var(--light-colour);
  color: var(--dark-colour);
  font-weight: 200;
  border: none;
  margin: 0;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  text-align: center;
  /* border: 1px solid var(--light-colour); */
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0 1px 0 inset;
}

.resource-panel:nth-child(1) {
  border-radius: 1vmin 0 0 0;
}

.resource-panel:nth-child(2) {
  border-radius: 0 1vmin 0 0;
}

.resource-panel.bottom-left-corner {
  border-radius: 0 0 0 1vmin;
}
.resource-panel.bottom-right-corner {
  border-radius: 0 0 1vmin 0;
}

.resource-panel:hover {
  background: var(--white-colour);
  box-shadow: var(--dark-colour) 0px 0 1px 0 inset;
}

.resource-panel.selected {
  background: var(--dark-colour);
  color: var(--white-colour);
  font-weight: 600;
}

.resource-details-panel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60% 25% 15%;
  align-items: center;
  justify-items: center;
  height: 100%;
  background: var(--white-colour);
  border-radius: 1vmin;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0 1px 0;
}

.resource-details-image {
  width: 94%;
  height: 90%;
  /* border-radius: 1vmin; */
  border: 0.5vmin solid var(--white-colour);
  box-shadow: rgba(0, 0, 0, 0.1) 0 1.75vmin 0.25vmin -1vmin,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  cursor: zoom-in;
}

.resource-details-panel img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* border-radius: 1vmin; */
}

.resource-details-description {
  font-size: 2.5vmin;
  color: var(--black-colour);
  text-align: center;
  overflow-y: auto;
  font-weight: 200;
  width: 90%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.resource-details-description .tip {
  font-size: 1.25vmin;
  text-transform: uppercase;
  opacity: 0.5;
  font-weight: 700;
}

.resource-details-open {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resource-details-open button {
  background-color: transparent;
  border: 0.25vmin solid var(--dark-colour);
  border-radius: 1vmin;
  width: 90%;
  height: 80%;
  font-size: 2vmin;
  color: var(--dark-colour);
  text-transform: uppercase;
  font-weight: 300;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.resource-details-open button:hover {
  background-color: var(--dark-colour);
  color: var(--white-colour);
}

/* Overlay for fullscreen image */
.fullscreen-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh; /* Uses small viewport height for iOS Safari support */
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Visible state for fade-in */
.fullscreen-image-overlay.visible {
  opacity: 1;
}

/* Fullscreen image style */
.fullscreen-image-overlay img {
  max-width: 85vw;
  max-height: 85vh;
}

.fullscreen-image-border {
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.3) 0 2.5vmin 0.25vmin -1vmin,
    rgba(0, 0, 0, 0.1) 0px 0px 0px 2px;
}

.fullscreen-image-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1vmin solid var(--white-colour);
  pointer-events: none;
  border-radius: 0;
  box-sizing: border-box;
}

.fullscreen-image-border img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* -------------------------------------------------------------------------- */
/*                              FILE OPTION MENU                              */
/* -------------------------------------------------------------------------- */

#saved-file-option-button,
#menu-button {
  background-color: var(--dark-colour);
}

#menu-button {
  padding: 2vmin;
}

#saved-file-option-button svg,
#menu-button svg {
  fill: var(--white-colour);
}

#saved-file-option-button svg {
  width: 2.25vmin;
}

.file-options-wrapper {
  position: relative;
  width: 90vw;
  /* max-width: 500px; */
  height: 80vh;
  height: 80svh;
  overflow: hidden;
  top: 17.5vh; /* match menu offset */
  top: 17.5svh;
  right: 5vw;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  border-radius: 2vmin;
}

.file-options-wrapper.show {
  z-index: 4;
  pointer-events: auto;
}

.file-select-options-menu {
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-width: 350px;
  height: 80vh;
  height: 80svh;
  align-items: center;
  justify-content: flex-start;
  row-gap: 3vh;
  text-wrap: balance;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 2vmin 2vmin 0;
  padding: 0 5vmin;
  background-color: var(--white-colour);
  border-left: 4px solid rgba(0, 0, 0, 0.05);
  padding: 3vmin;
  right: -100%; /* initially offscreen */
  transition: right 0.4s ease;
  box-shadow: rgba(0, 0, 0, 0.45) -2vmin 0px 2vmin -1.5vmin;
}

.file-select-options-menu.show {
  right: 0;
}

.file-select-options-menu button {
  width: 50%;
  min-width: 200px;
}

.file-select-options-menu h2 {
  text-transform: uppercase;
  font-weight: 800;
  margin-top: 2vh;
  margin-bottom: 2vh;
}

#saved-file-option-menu-close {
  position: absolute;
  bottom: 5vmin;
}

/* -------------------------------------------------------------------------- */
/*                                ACHIEVEMENTS                                */
/* -------------------------------------------------------------------------- */

.achievement-and-menu-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 6vmin;
}

.achievement-holder {
  width: 20vmin;
  height: fit-content;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: end;
}

.achievement-shelf {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* updated for 3 trophies */
  align-items: end;
  justify-items: center;
  position: relative;
  z-index: 2;
}

.achievement {
  width: 7.5vmin;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 3;
  margin-bottom: 1vmin;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.achievement:hover {
  transform: translateY(-0.35vmin);
  filter: brightness(1.2);
}

.achievement img {
  width: 100%;
  height: auto;
  display: block;
}

.achievement-shelf::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1vmin;
  background-color: var(--light-colour);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.75vmin 0.1vmin -0.3vmin;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: none;
  z-index: 1;
}

/* -------------------------------------------------------------------------- */
/*                                 BTN HOLDERS                                */
/* -------------------------------------------------------------------------- */

#file-options-btn-holder {
  display: flex;
  column-gap: 3vmin;
  width: fit-content;
}

#file-options-btn-holder .simpleButton {
  width: 20vw;
  max-width: 100px;
}

#file-options-btn-holder .simpleButton p {
  font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/*                                  SAVE LIST                                 */
/* -------------------------------------------------------------------------- */

#save-list-form-dialog input,
#rename-list-form-dialog input,
#save-list-form-dialog textarea,
#quick-save-list-form-dialog input {
  font-size: 1.5vmin;
  text-align: left;
  padding: 1vmin;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.5vmin;
  margin-bottom: 0.5vmin;
}

#save-list-form-dialog textarea {
  height: 20vh;
  resize: none;
}

#save-filename,
#rename-list-form-dialog {
  min-width: 420px;
}

/* -------------------------------------------------------------------------- */
/*                                 SEARCH BAR                                 */
/* -------------------------------------------------------------------------- */

.list-search-bar {
  width: 80vw;
  text-align: left;
}

#listSearchInput {
  width: 100%;
  height: 7.5vh;
  height: 7.5svh;
  margin-top: 0.5vmin;
  font-size: 1.75vmin;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 1vmin;
  padding: 1.5vmin 3vmin;
  background-color: rgba(0, 0, 0, 0.01);
  outline: none;
  transition: border-color 0.2s;
}

#listSearchInput:focus {
  border-color: var(--dark-colour);
}

.list-info h3 span {
  text-decoration: underline;
  text-decoration-color: var(--dark-colour);
  text-decoration-thickness: 0.25vmin;
}

.search-message {
  display: none;
  position: absolute;
  top: 27.5vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2vmin;
}

#clearSearchBtn {
  display: none;
}

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#clearSearchBtn {
  position: absolute;
  right: 1vmin;
  margin-top: 0.5vmin;
}

/* -------------------------------------------------------------------------- */
/*                                    MENU                                    */
/* -------------------------------------------------------------------------- */

.menuHolder {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 99;
}

.menuHolder.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.main-slide-menu {
  height: 100%;
  width: 100%;
  max-width: 800px;
  background-color: var(--white-colour);
  position: absolute;
  top: 0;
  right: -100%; /* hidden off screen */
  transition: right 0.4s ease;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.main-slide-menu.show {
  right: 0;
}

.menuSection {
  width: 100%;
  height: 35vh;
  height: 35svh;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 3vmin 6vmin;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
}

.menuSection:first-of-type {
  height: 15vh;
  height: 15svh;
  padding: 0 6vmin;
  flex-direction: row;
  align-items: center;
  background-color: var(--light-colour);
}

.menuSection:first-of-type .circleButton {
  height: 50%;
  background-color: var(--dark-colour);
}

.menuSection:first-of-type .circleButton svg {
  fill: var(--white-colour);
}

.menuSection:last-of-type {
  height: 15vh;
  height: 15svh;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0 6vmin;
}

.menuSection h1 {
  width: 100%;
  text-align: center;
}

.menuSection h2 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 3.5vmin;
  color: var(--dark-colour);
  margin-bottom: 2vmin;
}

.unique-link-holder {
  display: flex;
  justify-content: center;
  column-gap: 2vmin;
  margin-top: 4vmin;
  align-items: center;
  background-color: var(--white-colour);
  width: 100%;
  padding: 1.5vmin 2vmin;
  border-radius: 1vmin;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.unique-link-holder p {
  flex: 1;
  margin: 0;
}

#copy-unique-link {
  height: 5vmin;
}

.menu-btn-holder {
  display: flex;
  column-gap: 3vmin;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.label-above-button,
.menu-btn-holder .simpleButton {
  display: flex;
  flex-direction: column;
  row-gap: 0.5vmin;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5vmin;
}

.label-above-button p {
  font-weight: 700;
  font-size: 1.75vmin;
}

.label-above-button .simpleButton {
  width: 100%;
}

.menu-footer-text {
  width: 100%;
  text-align: right;
}

/* -------------------------------------------------------------------------- */
/*                              ANIMATING CREDITS                             */
/* -------------------------------------------------------------------------- */

.credit-toast-container {
  display: flex;
  pointer-events: none;
  z-index: 1000;
  /* ------------------ Experiment with position - see if takes less space ------------------ */
  position: absolute;
}

.credit-chip {
  display: inline-block;
  background: var(--yellow-colour);
  color: var(--black-colour);
  padding: 1vmin 2vmin;
  border-radius: 1vmin;
  font-size: 1.75vmin;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0);
}

.slide-in-blurred-left {
  -webkit-animation: slide-in-blurred-left 0.6s cubic-bezier(0.23, 1, 0.32, 1)
    both;
  animation: slide-in-blurred-left 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@-webkit-keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
    transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
    transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

.fade-out-bck {
  -webkit-animation: fade-out-bck 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: fade-out-bck 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes fade-out-bck {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-80px);
    transform: translateZ(-80px);
    opacity: 0;
  }
}
@keyframes fade-out-bck {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-80px);
    transform: translateZ(-80px);
    opacity: 0;
  }
}

.jello-vertical {
  -webkit-animation: jello-vertical 0.5s both;
  animation: jello-vertical 0.5s both;
}

@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounce-top {
  -webkit-animation: bounce-top 0.9s both;
  animation: bounce-top 0.9s both;
}

@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------- */
/*                                TOGGLE SWITCH                               */
/* -------------------------------------------------------------------------- */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 6vmin;
  height: 3.4vmin;
}

.toggle-input {
  display: none;
}

.toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 6vmin;
  height: 3.4vmin;
  border-radius: 1.7vmin;
  background-color: var(--red-colour);
  cursor: pointer;
  transition: background-color 0.4s ease;
}

.toggle-label:before {
  content: '';
  position: absolute;
  top: 0.3vmin;
  left: 0.3vmin;
  width: 2.8vmin;
  height: 2.8vmin;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0.2vmin 0.5vmin rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease;
}

.toggle-input:checked + .toggle-label {
  background-color: var(--dark-colour);
}

.toggle-input:checked + .toggle-label:before {
  transform: translateX(2.6vmin);
}

.public-toggle {
  display: flex;
  align-items: center;
  column-gap: 0.5vmin;
}

.public-toggle p {
  text-transform: uppercase;
  font-size: 1.5vmin;
  font-weight: 400;
  color: var(--green-colour);
  user-select: none;
}

.public-toggle p:first-child {
  color: var(--red-colour);
}

/* -------------------------------------------------------------------------- */
/*                                COLOUR PICKER                               */
/* -------------------------------------------------------------------------- */

.colour-picker-holder {
  margin-top: 1vmin;
  margin-bottom: 2vmin;
  border-radius: 1vmin;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

/* panels start hidden except when .active */
.colour-panel {
  display: none;
}
.colour-panel.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border-radius: 0 0 1vmin 1vmin; */
  border-radius: 1vmin;
  border: none !important;
  background: #fff;
}

/* tabs: two halves, active is light, inactive is dark */
.tabs {
  display: flex;
  overflow: hidden;
  width: 100%;
  margin: auto;
}
.tab-btn {
  border-radius: 1vmin 0 0 0 !important;
  flex: 1;
  background-color: #aaa;
  color: #777;
  padding: 0.8vmin 0;
  border: none !important;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 0.2vmin solid rgba(0, 0, 0, 0.2) !important;
  border-right: 0.2vmin solid rgba(0, 0, 0, 0.2) !important;
}

.tab-btn:last-of-type {
  border-radius: 0 1vmin 0 0 !important;
  border-left: 0.2vmin solid rgba(0, 0, 0, 0.2) !important;
  border-right: none !important;
}

.tab-btn.active {
  background: #fff !important;
  color: #333;
  border: none !important;
}

/* grid of four swatches */
.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vmin;
  margin: 2vmin;
}
.swatch {
  width: 4vmin;
  height: 4vmin;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 0.1s;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.swatch:hover {
  transform: scale(1.1);
}
/* highlight with dark-colour outline */
.swatch.active {
  outline: 0.3vmin solid var(--dark-colour);
  outline-offset: 0.1vmin;
}

/* input row */
.picker-row {
  display: flex;
  align-items: center;
  gap: 1vmin;
  margin: 1vmin;
}

/* -------------------------------------------------------------------------- */
/*                                 FONT SELECT                                */
/* -------------------------------------------------------------------------- */

.font-picker-holder {
  display: flex;
  flex-direction: column;
}

.font-picker-holder {
  margin: 0 0 1vmin 0;
}

/* Container if you need it centered or with extra padding */
.font-picker-holder select {
  /* remove native styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* sizing */
  width: 100%;
  padding: 0.5vmin 4vmin 0.5vmin 0.75vmin;
  font-size: 1.5vmin;
  line-height: 1.5;

  /* colors & border */
  background-color: var(--white-colour);
  color: var(--text-colour);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5vmin;

  /* dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23333' height='10' viewBox='0 0 10 10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5vmin center;
  background-size: 1vmin;
}

/* Focus state */
.font-picker-holder select:focus {
  outline: none;
  border-color: var(--dark-colour);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Optional: hover state */
.font-picker-holder select:hover {
  border-color: rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------------------- */
/*                                   PICKER                                   */
/* -------------------------------------------------------------------------- */

.picker-overlay {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: 1990;
  position: absolute;
  top: 0;
  background-color: var(--dark-colour);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vmin 0;
}

.picker-title {
  font-size: 2vmin;
  margin-bottom: 2vmin;
  color: var(--white-colour);
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}

.picker-container {
  display: flex;
  flex-direction: column;
  height: fit-content;
  max-height: 85%;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2vmin;
  min-width: 30%;
  max-width: 90%;
  border-radius: 1vmin;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.picker-item {
  display: flex;
  padding: 2vmin;
  background-color: var(--light-colour);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  font-size: 1.75vmin;
  font-weight: 200;
  cursor: pointer;
  user-select: none;
}

.deselected {
  background-color: #ccc !important;
  color: #777;
  text-decoration: line-through;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.picker-item:hover {
  background-color: var(--white-colour);
}

.picker-item:first-of-type {
  border-radius: 1vmin 1vmin 0 0;
}

.picker-item:last-of-type {
  border-radius: 0 0 1vmin 1vmin;
}

.picker-count {
  color: var(--grey-colour) !important;
  position: absolute;
  top: 2vmin;
  right: 2vmin;
  background-color: var(--white-colour);
  padding: 2vmin;
  border-radius: 1vmin;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.15) 0 0.35vmin 0.6vmin -0.15vmin,
    rgba(0, 0, 0, 0.1) 0 -0.3vmin 0 inset;
  min-width: 20vmin;
  text-align: center;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/*                              BUTTON WITH LABEL                             */
/* -------------------------------------------------------------------------- */

.button-with-label {
  display: flex;
  align-items: center;
  position: relative;
}

/* Absolutely position the tooltip */
.always-tooltip {
  display: inline-block;
  background: var(--dark-colour);
  color: var(--white-colour);
  padding: 0.5vmin 1.5vmin;
  border-radius: 0.5vmin;
  font-size: 1.25vmin;
  text-transform: uppercase;
  font-weight: 400;
  /* Remove margin-bottom */
  position: absolute;
  left: 50%;
  bottom: 100%; /* Place directly above the button */
  transform: translateX(-50%) translateY(-0.85vmin); /* Raise tooltip a bit above the button */
  z-index: 1;
  white-space: nowrap;
  width: fit-content;
  text-align: center;
  user-select: none;
}

/* Tooltip arrow stays the same, but position relative to absolutely placed parent */
.always-tooltip::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 0.8vmin solid transparent;
  border-right: 0.8vmin solid transparent;
  border-top: 0.8vmin solid var(--dark-colour);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 95%;
}

.share-code-text {
  font-size: 5vmin;
  font-weight: 900;
  color: var(--black-colour);
  user-select: all;
  text-align: center;
}