.section2 {
  background-image: url("/images/backgrounds/section2.jpg");

  height: 85vh;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section2 h1 {
  color: var(--accentC);
}

.section2 .websites {
  display: flex; /* Use flexbox layout */
  overflow-x: auto; /* Enable horizontal scrolling */

  scroll-snap-type: x mandatory;
}

.section2 .websites .panel {
  flex: 0 0 auto; /* Maintain original width */
  border: 0.5vh solid var(--textC);
  border-radius: 2.5vh;
  backdrop-filter: blur(0.3vh);
  background-color: var(--websiteB);

  aspect-ratio: 1/1;
  width: 20.15vh;

  display: table;
  overflow: hidden;

  scroll-snap-align: start;
  scroll-snap-stop: normal;

  transition: all 0.25s;
}

.section2 .websites .panel:hover {
  color: var(--accentC);
  background-color: var(--websiteHoverB);
}

.section2 .websites .panel h2 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.scrollable {
  width: 21vh;
  height: 21vh;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  float: left;
}

.scrollable::-webkit-scrollbar {
  display: none;
}

.websites button {
  width: 1.5vh;
  display: block;
  margin: 0.25vh;

  border: none;
  background: var(--websiteB);
  cursor: pointer;
  border-top-right-radius: 0vh;
  border-bottom-right-radius: 0vh;

  transition: all 0.25s;
}

.websites .activeButton {
  background: var(--accentC);
  cursor: default;
  width: 4vh;
  border-top-right-radius: 1vh;
  border-bottom-right-radius: 1vh;
}

.websites button:hover {
  width: 4vh;
  border-top-right-radius: 1vh;
  border-bottom-right-radius: 1vh;
}

.websites p {
  color: rgba(255, 255, 255, 0);
  transition: all 0.25s;
  white-space: nowrap;
  font-weight: 500;
  font-size: 1.75vh;
}

.websites button:hover p {
  color: rgba(255, 255, 255, 50%);
}

.websites .activeButton p {
  color: rgba(255, 255, 255, 100);
}

.websites .buttonGroup {
  float: left;
  margin: 2.15vh 0 0 0;
}

#button1 {
  height: 5.25vh;
}

#button2 {
  height: 3vh;
}

#button3 {
  height: 7.75vh;
}

.websites table {
  margin: 0vh 1vh 0vh 1vh;
  padding: 12.5vh 22.25vw 12.5vh 22.25vw;
  background: rgba(0, 0, 0, 50%);
  backdrop-filter: blur(1vh);
  border-radius: 2.5vh;
}

.websites td {
  width: 13.5vw;
  text-align: center;
}

.websites h1 {
  font-size: 6vh;
  font-weight: 500;
  color: var(--accentC);
}

.websites h3 {
  font-size: 3vh;
  font-weight: 100;
  color: var(--textC);
  margin: 0 0 3vh 0;
}