* {
  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: #5d89ca;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  text-align: center;
  color: #dadada;
}

.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);
}

#ABC {
  background: #fff;
  background-image: linear-gradient(
    180deg,
    #fff 0%,
    #000 25%,
    #fff 50%,
    #000 75%,
    #fff 100%
  );
  border: 1px solid #000;
}

#ANA {
  background: #000;
  background-image: linear-gradient(
    180deg,
    #000 0%,
    #fff 25%,
    #000 50%,
    #fff 75%,
    #000 100%
  );
  border: 1px solid #f00;
}

#BPB {
  background: #000;
  background-image: linear-gradient(
    90deg,
    #000 0%,
    #fff 12.5%,
    #000 25%,
    #fff 37.5%,
    #000 50%,
    #fff 62.5%,
    #000 75%,
    #fff 87.5%,
    #000 100%
  );
  border: 1px solid #a50000;
}

#BRU {
  background-color: #ff0000;
  background-image: linear-gradient(
    90deg,
    #ff0000 0%,
    #ffff00 50%,
    #00ff00 100%
  );
  border: 1px solid #000;
}

#CAX {
  background-color: #5a1738;
  background-image: linear-gradient(180deg, #5a1738 0%, #512 100%);
  border: 1px solid #0578c5;
}

#CON {
  background-color: #fff;
  background-image: linear-gradient(90deg, #fff 0%, #003caa 50%, #fff 100%);
  border: 1px solid #003caa;
}

#CSA {
  background-color: #fff;
  background-image: linear-gradient(
    90deg,
    #fff 0%,
    #004f99 25%,
    #fff 50%,
    #004f99 75%,
    #fff 100%
  );
  border: 1px solid #3d2be2;
}

#FIG {
  background-color: #000;
  background-image: linear-gradient(
    -150deg,
    #000 0%,
    #fff 25%,
    #000 50%,
    #fff 75%,
    #000 100%
  );
  border: 1px solid #858585;
}

#FLO {
  background-color: #6adb01;
  background-image: linear-gradient(90deg, #6adb01 0%, #070 50%, #6adb01 100%);
  border: 1px solid #070;
}

#FLO > img {
  width: 3rem;
}

#GFC {
  background-color: #00dc5e;
  background-image: linear-gradient(0deg, #00dc5e 0%, #15b905 100%);
  border: 1px solid #007800;
}

#ITA {
  background-color: #dedede;
  background-image: linear-gradient(
    90deg,
    #0000de 0%,
    #dedede 25%,
    #dedede 50%,
    #dedede 75%,
    #0000de 100%
  );
  border: 1px solid #de0000;
}

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

#LON {
  background-color: #46b1f3;
  background-image: linear-gradient(
    90deg,
    #46b1f3 0%,
    #fff 25%,
    #46b1f3 50%,
    #fff 75%,
    #46b1f3 100%
  );
  border: 1px solid #000;
}

#MAR {
  background-color: #00461b;
  background-image: linear-gradient(90deg, #00461b 0%, #000 50%, #00461b 100%);
  border: 1px solid #fff;
}

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

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

#RET {
  background-color: #00f;
  background-image: linear-gradient(147deg, #00f 0%, #ff0 50%, #00f 100%);
  border: 1px solid #fff;
}

#SBE {
  background-color: #ff0;
  background-image: linear-gradient(
    90deg,
    #ff0 0%,
    #000 25%,
    #ff0 50%,
    #000 75%,
    #ff0 100%
  );
  border: 1px solid #ff0;
}

#TOM {
  background-color: #ff0000;
  background-image: linear-gradient(
    90deg,
    #f00 0%,
    #fff 25%,
    #f00 50%,
    #fff 75%,
    #f00 100%
  );
  border: 1px solid #ff0;
}

#YPI {
  background-color: #ff1;
  background-image: linear-gradient(
    90deg,
    #ff1 0%,
    #080 25%,
    #ff1 50%,
    #080 75%,
    #ff1 100%
  );
  border: 1px solid #bf0;
}