.skillContainer {
  display: flex;
  flex-direction: column;
}

.skillsScroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8em;
  justify-items: center;
  width: max-content;
  margin: 0 auto;
  max-height: 55vh;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scrollbar-width: thin;
  padding-right: 2em;
  scrollbar-color: var(--color-accent) var(--color-surface);
}

.skillsScroll a {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.skillsScroll img {
  height: var(--size-icon);
  padding: 0.5em;
}

.skills-group.hidden-group {
  display: none;
}

.skillsDropdownContainer {
  display: inline-block;
  align-self: flex-start;
  margin: 1em 0 0.5em;
  position: relative;
}

.skillsDropdownToggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-text);
  font-size: var(--font-size-p);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 6px;
  padding: 0.4em 0.75em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.skillsDropdownIcon {
  width: 1em;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.skillsDropdownToggle.open .skillsDropdownIcon {
  transform: rotate(180deg);
}

.skillsDropdownMenu {
  position: absolute;
  top: 100%;
  box-shadow: 0 8px 16px var(--color-shadow);
  border-radius: 6px;
  list-style: none;
  margin: 0.4em 0 0;
  padding: 0.2em 0;
  min-width: 8em;
  display: none;
  z-index: 5;
}

.skillsDropdownMenu.show {
  display: block;
}

.skillsDropdownMenu li a {
  display: block;
  padding: 0.5em 0.8em;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-p);
}

.skillsDropdownMenu li a:hover {
  background: var(--color-accent);
  color: var(--color-text);
}

.skillTextDescrip {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  line-height: 1.2;
}

.skill-side-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background-color: var(--color-surface);
  box-shadow: -4px 0 15px rgba(0,0,0,0.5);
  transition: right 0.3s ease-in-out;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  padding: 1.5em;
}

.skill-side-panel.active {
  right: 0;
}

.skill-side-panel h3 {
  margin-top: 0;
  color: var(--color-accent);
  font-weight: bold;
}

.skill-side-panel p {
  margin-top: 1em;
  color: var(--color-text);
}

.skill-side-panel .close-panel {
  align-self: flex-end;
  font-size: 1.5em;
  cursor: pointer;
  color: var(--color-accent);
  font-weight: bold;
}

.horizontalLineDescrip {
  display: none;
}

.skillsTitle {
  font-size: 1.5em;
  text-transform: uppercase;
  margin: 1.5em auto;
  justify-content: center;
  order: -1;
}

.verticalLineTitle {
  height: 0.5em;
  position: static;
  width: 3.2em;
}

.skillIcon {
  background-color: var(--color-surface);
  padding: 0.8em;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.skillIcon:hover {
  transform: scale(0.9);
}

.skillIcon.active {
  transform: scale(0.8);
}

.skillIcon.active img,
.skillIcon:hover img {
  filter: invert(10%) sepia(50%) saturate(9000%) hue-rotate(290deg) brightness(100%) contrast(90%);
}

#anchor-skills {
  scroll-margin-top: 14em;
}

@media (max-width: 767px) {
  .skillsDropdownContainer {
    align-self: center;
    order: 3;
    margin-top: 1em;
  }

  .skillsScroll {
    order: 2;
  }
}

@media (768px <= width <= 1399px) {
  .skillContainer {
    display: grid;
    grid-template-columns: 1fr 0.2fr;
    grid-template-rows: auto auto;
    gap: 2em;
    align-items: start;
    justify-self: center;
    width: max-content;
    margin-left: 7em;
    position: relative;
  }

  .skillsDropdownContainer {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 1em 0 0 0;
  }

  .skillsScroll {
    grid-column: 1;
    grid-row: 1;
    gap: 2em;
    justify-items: start;
    align-items: start;
    padding: 0 1em 0 0;
    overflow: auto;
    min-height: 18em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    width: 100%;
    align-content: start;
  }

  .skillsScroll a {
    height: 6em;
    width: 6em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .skillsScroll img {
    height: 5em;
    padding: 0.5em;
  }

  .skillsTitle {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 2.2em;
    writing-mode: vertical-lr;
    text-orientation: upright;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    align-self: start;
  }

  .skillsTitle h2 {
    margin: 0;
  }

  .verticalLineTitle {
    border-left: 2px solid var(--color-text);
    border-bottom: none;
    height: 4em;
    margin-top: 15em;
    margin-right: -3.3em;
    position: absolute;
  }

  .skill-side-panel {
    right: -100%;
    width: 70%;
    padding: 2em;
  }

  .skill-side-panel .close-panel {
    font-size: 1.8em;
  }

  .skill-side-panel h3 {
    font-size: 1.8em;
  }

  .skill-side-panel p {
    font-size: var(--font-size-p);
    line-height: 1.5em;
  }
}

@media (width >= 1400px) {
  .skillsDropdownContainer {
    margin-left: 3em;
    margin-top: -2em;
  }

  .skillContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 0.1fr;
    grid-template-areas: "desc skills title";
    gap: 5em;
    margin: 4em 5em 15em 12em;
  }

  .skillContainer > * {
    justify-self: start;
  }

  .skillsScroll {
    grid-area: skills;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    overflow-y: scroll;
  }

  .skillsScroll a {
    width: 6em;
    height: 6em;
  }

  .skillsScroll img {
    height: 5em;
  }

  .skillTextDescrip {
    grid-area: desc;
    font-size: var(--font-size-p);
    max-width: 25em;
    margin: 0 auto;
    text-align: center;
    border-top: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    min-height: 27em;
  }

  .skillsTitle {
    grid-area: title;
    font-size: 2.2em;
    writing-mode: vertical-lr;
    text-orientation: upright;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -6.5em;
  }

  .verticalLineTitle {
    border-left: 2px solid var(--color-text);
    height: 5em;
    margin-left: -0.5em;
    margin-top: 17em;
  }

  .skillTextDescrip.default-text {
    opacity: 1;
  }

  .skillTextDescrip:not(.default-text) {
    opacity: 1;
    padding-left: 2em;
  }
}