* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

html,
body {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background-color: #bbff54;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  text-align: center;
  color: #00008b;
}

.container {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
}

.soundBtn {
  box-shadow: 0px 0px 1.1px rgba(0, 0, 0, 0.043),
    0px 0px 4px rgba(0, 0, 0, 0.077), 0px 0px 9.2px rgba(0, 0, 0, 0.1),
    0px 0px 17.5px rgba(0, 0, 0, 0.115), 0px 0px 30px rgba(0, 0, 0, 0.14),
    0px 0px 46.8px rgba(0, 0, 0, 0.18), 0px 0px 65px rgba(0, 0, 0, 0.23);
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  cursor: pointer;
}

.soundBtn > img {
  width: 2.5rem;
  height: auto;
  filter: drop-shadow(0px 0px 2px #fff);
}

#AMG {
  background: linear-gradient(90deg, #32940b 0%, #000000 50%);
  border: 1px solid #001a00;
}

#CAP {
  background: linear-gradient(147deg, #bf0e0e 0%, #000000 60%);
  border: 1px solid #240000;
}

#CAM {
  border: 1px solid #222;
  background: linear-gradient(90deg, #ffffff 0%, #000000 50%, #ffffff 90%);
}

#BAH {
  background-color: #ffffff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #6284ff 50%,
    #ff0000 100%
  );
  border: 1px solid #460080;
}

#BOT {
  border: 1px solid #333;
  background: linear-gradient(90deg, #000 0%, #fff 50%, #000 100%);
}

#COR {
  background-color: #1e1e1e;
  background-image: linear-gradient(180deg, #1e1e1e 0%, #7d7d7d 100%);
  border: 1px solid #111;
}

#CFC {
  border: 1px solid #1f5a24;
  background: linear-gradient(180deg, #fff 0%, #005700 50%, #fff 100%);
}

#CRU {
  border: 1px solid #0006f0;
  background: linear-gradient(180deg, #0000ad 0%, #006 100%);
}

#CUI {
  border: 1px solid #73d800;
  background: linear-gradient(180deg, #004400 0%, #e1f100 100%);
}

#FLA {
  border: 1px solid #4d0000;
  background: linear-gradient(180deg, #bb0000 0%, #000000 50%, #bb0000 100%);
}

#FLU {
  background: linear-gradient(90deg, #023d00 0%, #310015 50%);
  border: 1px solid #ccc;
}

#FOR {
  background-image: linear-gradient(
    90deg,
    #0000ff 0%,
    #ffffff 50%,
    #ff0000 100%
  );
  border: 1px solid #aaa;
}

#GOI {
  background: linear-gradient(180deg, #004e07 0%, #003f18 50%);
  border: 1px solid #030;
}

#GRE {
  background: linear-gradient(180deg, #006eec 0%, #141414 50%);
  border: 1px solid #e7e7e7;
}

#INT {
  background: linear-gradient(180deg, #e90000 0%, #aa0000 50%);
  border: 1px solid #690000;
}

#PAL {
  background: linear-gradient(180deg, #004200 0%, #ffffff 50%, #004200 100%);
  border: 1px solid #8f0000;
}

#RBB {
  background: linear-gradient(180deg, #414141 0%, #221c1c 50%);
  border: 1px solid #421818;
}

#SAN {
  background: linear-gradient(180deg, #d4d4d4 0%, #6e6e6e 50%);
  border: 1px solid #1f1f1f;
}

#SAO {
  background: linear-gradient(180deg, #af0202 0%, #cecece 50%, #212121 100%);
  border: 1px solid #924848;
}

#VAS {
  background: linear-gradient(147deg, #1d1d1d 0%, #f1f1f1 50%, #1d1d1d 100%);
  border: 1px solid #aa0000;
}

#ACG {
  background-color: #000;
  background-image: linear-gradient(45deg, #000 0%, #f00 50%, #000 100%);
  border: 1px solid #fff;
}

#CRI {
  background-color: #ffff00;
  background-image: linear-gradient(
    180deg,
    #ffff00 0%,
    #000000 50%,
    #ffffff 100%
  );
  border: 1px solid #242424;
}

#CRI > img {
  width: 3rem;
}

#JUV {
  background-color: #009d00;
  background-image: linear-gradient(
    90deg,
    #009d00 0%,
    #ffffff 50%,
    #009d00 100%
  );
  border: 1px solid #070;
}

#JUV > img {
  width: 2.75rem;
}

#VIT {
  background: linear-gradient(90deg, #bb0000 0%, #000000 50%, #bb0000 100%);
  border: 1px solid #616161;
}

#CEA {
  background-color: #000000;
  background-image: linear-gradient(
    90deg,
    #000000 0%,
    #ffffff 25%,
    #000000 50%,
    #ffffff 75%,
    #000000 100%
  );
  border: 1px solid #fff;
}

#MIR {
  background-color: #fff300;
  background-image: linear-gradient(
    180deg,
    #fff300 0%,
    #14c300 50%,
    #fff300 100%
  );
  border: 1px solid #fff;
}

#SPO {
  background-color: #ff2f00;
  background-image: linear-gradient(
    180deg,
    #ff2f00 0%,
    #000000 50%,
    #ff2f00 100%
  );
  border: 1px solid #ff0;
}