#appMenu {
  display: none;
  flex-direction: column;
  position: fixed;
  border: 3px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  padding-block-end: 50px;
  background: linear-gradient(rgba(5, 134, 227, 0.75),
      rgba(46, 168, 255, 0.65),
      rgba(245, 245, 245, 0.5),
      rgba(245, 245, 245, 0.4),
      rgba(139, 139, 139, 0.35));
  height: 100%;
  width: 40%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  z-index: 9999 !important;
  top: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
  gap: 8px;
  background: var(--theme-menuBackground);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

@keyframes dragIn {
  0% {
    transform: translateX(-500px);
  }

  10% {
    transform: translateX(-200px);
  }

  20% {
    transform: translateX(-50px);
  }

  30% {
    transform: translateX(50px);
    rotate: 0deg;
  }

  40% {
    transform: translateX(72px);
    offset-rotate: 10px;
    rotate: 2.5deg;
  }

  50% {
    transform: translateX(83px);
    offset-rotate: 10px;
    rotate: 4deg;
  }

  70%,
  100% {
    transform: translateX(10px);
    offset-rotate: 0;
    rotate: 0deg;
  }

  80% {
    rotate: 0deg;
    offset-rotate: 0;
  }

  90% {
    transform: translateX(15px);
  }

  100% {
    transform: translateX(0);
  }
}

#appMenu.dragAppMenuIn {
  animation: dragIn 0.65s linear;
}

.top-app-menu-section {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: inherit;
  padding: 10px;
  margin: -10px;
  margin-bottom: 0;
  z-index: 10;
  height: 125px;
  box-sizing: border-box;
  border-bottom: 2px solid #ccc;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

#appMenuTitle {
  color: black;
  position: relative;
  -webkit-text-stroke: 1px darkcyan !important;
  -webkit-text-fill-color: cyan !important;
  -webkit-user-select: none !important;
  user-select: none;
  font-size: 3em;
  top: -10px;
  transition: all 0.5s ease-in-out;
  text-align: center;
}

#closeAppMenu {
  cursor: pointer !important;
  position: absolute;
  border: 3px solid darkred !important;
  border-radius: 1cm;
  background: red !important;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 2em;
  padding-inline: 18.5px;
  padding-block: 10px;
  transform: translateY(-50%) scale(0.75);
  transition: all 0.3s ease-in;
  right: 5px;
  top: 50%;
  color: white !important;
  user-select: none !important;
  box-shadow: 0 2px 8.5px rgba(0, 0, 0, 0.375);
}

#closeAppMenu:hover {
  transform: scale(1) translateY(-38.5%);
  box-shadow: 0 4px 14.5px rgba(0, 0, 0, 0.275);
}

@media (max-width: 763px) {
  #appMenu {
    width: 80% !important;
  }

  .settings-container {
    justify-self: bottom !important;
    align-self: bottom !important;
    background: lime !important;
    padding-block: 5px !important;
    height: fit-content;
    max-height: 50%;
  }

  #appMenuTitle {
    font-size: 2em !important;
  }
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }

  50% {
    rotate: 180deg;
  }

  75% {
    rotate: 195deg;
  }

  100% {
    rotate: 180deg;
  }
}

#expandOrCollapseSM:hover {
  box-shadow: 0 2px 8.5px rgba(0, 0, 0, 0.275);
}

#expandOrCollapseSM.spin {
  animation: spin 0.6s ease;
}

.settings-container {
  display: flex !important;
  position: relative !important;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding-inline: 7.5px;
  padding-block: 12.5px;
  height: auto !important;
  max-height: auto !important;
  width: 100% !important;
  box-sizing: border-box;
  transition: all 0.65s ease;
  background: rgb(150, 255, 150);
  descent-override: x y;
  text-rendering: optimizeSpeed !important;
  text-overflow: ellipsis clip auto;
  background: var(--theme-cardBackground);
  margin-top: 10px;
}

.appsContainer {
  position: relative;
  height: auto;
  max-height: auto !important;
  width: 100% !important;
  border: 2px solid #ccc;
  border-radius: 15px;
  background: white;
  padding-inline: 7.5px;
  padding-block: 12.5px;
  box-sizing: border-box;
  transition: all 0.65s ease;
  background: var(--theme-cardBackground);
}

#appsTextTag {
  cursor: pointer;
  position: relative;
  font-size: 1.725em;
  text-align: center;
  width: fit-content;
  justify-self: center;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 20px;
  padding-inline: 14.5px;
  padding-block: 3.45px;
  user-select: none !important;
}

#appsTextTag:hover {
  text-decoration: underline;
}

#appList {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px solid #ccc;
  border-radius: 15px;
  background: rgb(5, 134, 227);
  padding-inline: 7.5px;
  padding-block: 12.5px;
  box-sizing: border-box;
  transition: all 0.65s ease;
  gap: 10px;
  background: var(--theme-primary);
}

#appListContainer {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px solid #ccc;
  border-radius: 15px;
  background: #80b5db;
  padding-inline: 3.5px;
  padding-block: 6.5px;
  box-sizing: border-box;
  transition: all 0.65s ease;
  gap: 10px;
  background: var(--theme-secondary);
}

:root {
  --textColor: black;
  --borderColor: #ccc;
  --fontFamily: 'Arial', sans-serif;
  --background: #afdeff;
  --borderRadius: 15px;
}

.appButton {
  cursor: pointer;
  position: relative;
  border: 2px solid #ccc;
  border-radius: 50px; /* Make it a circle */
  background: var(--background);
  padding-inline: 3.5px;
  padding-block: 6.5px;
  box-sizing: border-box;
  transition: all 0.65s ease;
  user-select: none !important;
  font-weight: bold;
  font-size: 1.75em;
  text-align: center;
  background: var(--theme-buttonBackground);
  color: var(--theme-text);
  border-color: var(--theme-border);
  transition: all 0.3s ease; /* Smooth transition for background and color */
}

.appButton:hover {
  /* Change the background color on hover */
  background: var(--theme-buttonBackgroundHover, #ccc); /* Fallback to #ccc if var is not set */
  color: var(--theme-textHover, white); /* Fallback to white if var is not set */
  box-shadow: 0 2px 8.5px rgba(0, 0, 0, 0.375);
  border-radius: var(--borderRadius);
}

#appListFooter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 2px solid #ccc;
  border-radius: 15px;
  background: #80b5db;
  padding-inline: 3.5px;
  padding-block: 6.5px;
  box-sizing: border-box;
  transition: all 0.65s ease;
  gap: 10px;
}