section {
  display: flex;
  flex-direction: column;
}

scroll {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
  scroll-snap-type: x proximity;
  padding-top: 1.5em;
}

section > h2 {
  margin-bottom: 0px;
}

span + span {
  margin-left: 10px;
}

span {
  width: fit-content;
  height: fit-content;
  transform-style: preserve-3d;background: none;
  perspective: 500px;
}

card {
  display: flex;
  border-radius: 10px;background-size: cover;
  transition: all 0.2s ease;
}

.game {
  width: 267px;
  height: 400px;
}

.music {
  width: 372px;
  height: 372px;
  border-radius: 50%;
}

card div {
  height: calc(100% - 20px); /* 400px height - 10 margin x 2 sides */
  width: calc(100% - 20px); /* Same for width */
  padding: 10px;
  color: #FFFFFF;background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition: all; /* I show or hide everything at half the anymation, making it look like it was on a side */
  transition-delay: 0.1s; /* FYI if I put opacity at 100%, even rotated it would show, it would just be inverted horizontally */
  opacity: 0%; /* I think I could have maybe change the z-indices of both the card and the div, for a realistic approach. Thing is, if you'd read the text at the start of style.css, you'd know I don't care */
}

card.game div {
  transform: rotate3d(0, 1, 0, -180deg);
}

card p, card h3 {
  width: 100%;
  background-color: transparent;
}

span:hover card.game {
  transform: rotate3d(0, 1, 0, -180deg);
}

span:hover card.music {
  border-radius: 10px;
}

span:hover div {
  opacity: 100%;
}

card h3 {
  text-align: center;
}

card p {
  flex: 1;
}

iframe {
  border: none;
  border-radius: 10px;
  background-color: transparent;
  width: 100%;
  height: 100%;
}

#Layton3{background-image:url("https://cdn2.steamgriddb.com/grid/17a163f6ab3de102b49599f5577866fc.png");/*SteamGridDB,MrSandman7337*/}#GhostTrick{background-image:url("https://cdn.cloudflare.steamstatic.com/steam/apps/1967430/library_600x900_2x.jpg?t=1687396876");/*OfficialSteamCapsule*/}#IE2G{background-image:url("https://cdn2.steamgriddb.com/grid/0b606fcc33641c55d93c8d85f3c0ae5d.jpg");/*SteamGridDB,RoueSoify(Me!)*/}#DL1{background-image:url("https://cdn.cloudflare.steamstatic.com/steam/apps/239140/library_600x900_2x.jpg?t=1724176184");/*OfficialSteamCapsule*/}#Dandara{background-image:url("https://cdn.cloudflare.steamstatic.com/steam/apps/612390/library_600x900_2x.jpg?t=1655468775");/*OfficialSteamCapsule*/}#ArkhamK{background-image:url("https://cdn.cloudflare.steamstatic.com/steam/apps/208650/library_600x900_2x.jpg?t=1681938905");/*OfficialSteamCapsule*/}#TR2013{background-image:url("https://cdn.cloudflare.steamstatic.com/steam/apps/203160/library_600x900_2x.jpg?t=1709833975");/*OfficialSteamCapsule*/}

#IB{background-image:url("https://i.scdn.co/image/ab6761670000ecd4c7c8384371f555390bb963cc");background-position-y:bottom;}#BC{background-image:url("https://i.scdn.co/image/ab67616100005174edd4fa636f7f1b609321663f");}#SM{background-image:url("https://i.scdn.co/image/ab6761670000ecd40be3a518756175f12d504b0b");}#DM{background-image:url("https://i.scdn.co/image/ab67616d00001e0254b2960bf1b210c616eff542");background-position:center;}#HP{background-image: url("https://i.scdn.co/image/ab67616d00001e020bb67c0c5a647271cee81720");}#CV{background-image: url("https://i.scdn.co/image/ab67616d00001e020fe503e41e371c28fb06f55c");}

@media only screen and ((max-width: 820px) or (((hover: none) or (hover: hover)) and (pointer: coarse))) {
  .music {
    width: 267px;
    border-radius: 30%;
  }
}