#micTest::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGlkPSJzdmdfMiIgZD0ibTEyLDE2YzIuMjA2LDAgNCwtMS43OTUgNCwtNGwwLC02YzAsLTIuMjA2IC0xLjc5NCwtNCAtNCwtNHMtNCwxLjc5NCAtNCw0bDAsNmMwLDIuMjA1IDEuNzk0LDQgNCw0eiIvPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGlkPSJzdmdfMyIgZD0ibTE5LDEybDAsLTJjMCwtMC41NTIgLTAuNDQ3LC0xIC0xLC0xcy0xLDAuNDQ4IC0xLDFsMCwyYzAsMi43NTcgLTIuMjQzLDUgLTUsNXMtNSwtMi4yNDMgLTUsLTVsMCwtMmMwLC0wLjU1MiAtMC40NDcsLTEgLTEsLTFzLTEsMC40NDggLTEsMWwwLDJjMCwzLjUyIDIuNjEzLDYuNDMyIDYsNi45MmwwLDEuMDhsLTMsMGMtMC41NTMsMCAtMSwwLjQ0NyAtMSwxczAuNDQ3LDEgMSwxbDgsMGMwLjU1MywwIDEsLTAuNDQ3IDEsLTFzLTAuNDQ3LC0xIC0xLC0xbC0zLDBsMCwtMS4wOGMzLjM4NywtMC40ODggNiwtMy40IDYsLTYuOTJ6Ii8+CiA8L2c+Cjwvc3ZnPg==");
  background-size: contain;
  display: block;
  width: 20px;
  height: 20px;
}

#soundTest::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoKIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSJub25lIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iNDAyIiB3aWR0aD0iNTgyIiB5PSItMSIgeD0iLTEiLz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBmaWxsPSIjMjE2MGM0IiBpZD0iWE1MSURfMjc1XyIgZD0ibTk1MCw1ODAuN2wwLDI0NS43YzAsMjkuOCAtMjQuMyw1NC4xIC01NC4xLDU0LjFsLTc4LjcsMGMtMjkuOCwwIC01NC4xLC0yNC4zIC01NC4xLC01NC4xbDAsLTIwMS44YzAsLTI5LjkgMjQuMywtNTQuMSA1NC4xLC01NC4xbDcyLjcsMGMtNS40LC0yMDMuMyAtMTcyLjgsLTM2NyAtMzc3LjgsLTM2N2wtMC4yLDBjLTIwNSwwIC0zNzIuMywxNjMuNyAtMzc3LjgsMzY3bDcyLjcsMGMyOS44LDAgNTQuMSwyNC4zIDU0LjEsNTQuMWwwLDIwMS43YzAsMjkuOCAtMjQuMyw1NC4xIC01NC4xLDU0LjFsLTc4LjcsMGMtMjkuOCwwIC01NC4xLC0yNC4zIC01NC4xLC01NC4xbDAsLTI0NS42YzAsLTU5LjEgMTEuNiwtMTE2LjQgMzQuNSwtMTcwLjNjMjIuMSwtNTIuMSA1My43LC05OC44IDkzLjksLTEzOWM0MC4yLC00MC4xIDg3LC03MS42IDEzOS4yLC05My42YzU0LC0yMi44IDExMS4zLC0zNC4zIDE3MC40LC0zNC4zbDAuMiwwYzU5LjEsMCAxMTYuNCwxMS41IDE3MC40LDM0LjNjNTIuMiwyMiA5OSw1My41IDEzOS4yLDkzLjZjNDAuMiw0MC4xIDcxLjgsODYuOSA5My45LDEzOWMyMi43LDUzLjkgMzQuMywxMTEuMiAzNC4zLDE3MC4zeiIvPgogIDxwYXRoIGZpbGw9IiMyMTYwYzQiIGlkPSJYTUxJRF8xMTFfIiBkPSJtNjgyLDM1Ny44Yy00OC44LC0zOS40IC0xMTAuMSwtNjAuOCAtMTcyLjgsLTYwLjhsLTAuMSwwYy02Mi43LDAgLTEyMS45LDIwLjQgLTE3MS4xLDU5LjZsLTM3LjQsLTQ3LjFjMjksLTIzLjEgNjEuNCwtNDAuOSA5Ni4xLC01My4zYzM2LC0xMi45IDczLjgsLTE5LjIgMTEyLjMsLTE5LjJsMC4xLDBjMzksMCA3Ny4yLDYuNCAxMTMuNSwxOS41YzM1LjEsMTIuNyA2Ny43LDMxIDk2LjksNTQuNmwtMzcuNSw0Ni43eiIvPgogPC9nPgo8L3N2Zz4=");
  background-size: contain;
  display: block;
  width: 20px;
  height: 20px;
}

main {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}
main div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
}



.article {
  background-color:#363636;
  color:white;
  padding: 0 20% 2%;
}

a {
  color:yellow;
}