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

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

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

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

#AMA {
  background-color: #000000;
  background-image: linear-gradient(
    90deg,
    #000000 0%,
    #ffe900 50%,
    #000000 100%
  );
  border: 1px solid #770;
}

#AVA {
  background-color: #77beff;
  background-image: linear-gradient(
    90deg,
    #77beff 0%,
    #ffffff 50%,
    #77beff 100%
  );
  border: 1px solid #0000aa;
}

#BFC {
  background-color: #ff0000;
  background-image: linear-gradient(
    90deg,
    #ff0000 0%,
    #ffffff 50%,
    #000000 100%
  );
  border: 1px solid #3d1d1d;
}

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

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

#CHA {
  background-color: #00640a;
  background-image: linear-gradient(
    90deg,
    #00640a 0%,
    #00ff00 50%,
    #00640a 100%
  );
  border: 1px solid #ccc;
}

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

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

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

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

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

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

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

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

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

#VIL {
  background-color: #ff0000;
  background-image: linear-gradient(90deg, #ff0000 0%, #6f0000 100%);
  border: 1px solid #600;
}

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

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

#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;
}

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

#FER {
  background-color: #520623;
  background-image: linear-gradient(90deg, #520623 0%, #502 100%);
  border: 1px solid #f2e0f6;
}

#FER > img {
  width: 3rem;
}

#REM {
  background-color: #010f2e;
  background-image: linear-gradient(180deg, #010f2e 0%, #013 100%);
  border: 1px solid #cdcdcd;
}

#VOL {
  background-color: #101010;
  background-image: linear-gradient(
    90deg,
    #101010 0%,
    #ef1 25%,
    #101010 50%,
    #ef1 75%,
    #101010 100%
  );
  border: 1px solid #050505;
}