.up, .down, .left, .right {
  float: left;
  width: clamp(40px, 18vw, 80px);
  margin-top: 9px;
  margin-left: clamp(0px, 4vw, 48px);
  display: block;
}

.up {
  content: url("data:image/gif;base64,R0lGODlh8ADwAIAAAP/7AP/7ACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAADwAPAAQAL+jI+py+0Po5y02ouz3rz7AITiSALfiabqyirlC8dhS9f2jcn6zs/4DwxmesSi0SdMKlvHpvOJXEqnDKj1io1St6ys9wvWcseQsPmMFpOV6bb7rV5/4PS6PS5v3Pf8Pl7qFyg4+JdCeIiYWBih2Oj4uJgnOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+vrC/MrfHE1PFxnDOuY/AnZw0zmDAZdI81HTWwNiW2g7a2T+y1ulTpu3pZ5rh44te7uvPIu704xb3//wq2/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCvqGmGx1o7+jKyccBz15aMmNyLzXCu5BBHKG9JWojjnMoe9mA/w5aMJwiYPkTqfSOwZMiFQdAGH3tFndNCxpI3CMdUW6+m6clLvhaqaNB3WrSa3ei3R7qtYGT/GmiUS76zaIxzWuiU34a1cL1Xm2g2DM6/evXz7+v0LOLDgwYQLGz6MOLHixYwbO34MObLkyZQrW76MObPmzZw7e/4MOjTASKINkSjNMgbqLjtXzzHiegOU2Bay0GY07faCNLoPwLl9FLWf0IQ6K8q8jTJUyOMaT0U8r7DNwEP7Ps3LdeVYnmotzv1510TD8KeFkr9J8Dy4oupb82sPmxt8j8zmw/1l3zav/Lmpb/E/o9F/vCkj4ButFGgHVQgGB9KCw4HiYHGcRJiIVhQeR8mF8Mih4XJbdChOWCA2J8SI9OBgYnQ0pIhPWixO99qLQLUlI1My1ShVPTh6VcaO2+3mY3e+BflWb0YeiWSSSi7JZJNOPglllFJOSWWVVl6JZZZabslll15+CWaYYo5JZplmnolmmmquyWabbr4JZ5xyzklnnXbeiWeeeu7JZ59+/glooHQWAAA7");
}

.down {
  content: url("data:image/gif;base64,R0lGODlh8ADwAIAAAP/7AP/7ACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAADwAPAAQAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1ih0Bttyu9wsOi8fksvmMTqvX7LYb7HjL5/S6/Y5fe/L8vv8PSOYSSFhoeOhzqLjIGObUCBkpl5UgaSlJiXG5aZd5wgkK51kTqjhaVDp3SpUquvoaEAk7O5FHe/txhrvL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ393Mrd7W3hHS7+ZzJufi5mg77OacT+zmcFPy+IS2++fC+rrY+nXdGvzD8S8wbOKGVQSKGEUd4wfPXlocSJFCtavIgxo8b+jRw7evwIMqTIkSRLmjyJMqXKlSxbunwJM6bMmTRr2ryJM6fOnTx7+nwSMKjQiA2GGoUH7qjSVnuWOm1U7qnUPoOmWm2j7qpWRz22XnXndeijsEirkBV36iyoXWoZDWtLThlcOtPmpvln19XDuRy3klzKsh/NdTy7/ax06TCERYovxG3MoQ7kEnomrxhj+SCAzJw7e/4MOrTo0aRLmz6NOrXq1axbu34NO7bs2bRr276NO7fu3bx7+/4NPLjw4cSLGz+OPLny5cybO38OPbr06dSrW7+OPbv27bzzegek4Lv4TkXHm6+8+Lx6zADXu9+i4f35pvLtiqjfNip+rSqW9k+t6p9RMgQYVFYEloXDgYR1pWA4CjWYClgQJpbEhPswYaEpDWUInlkc2pLFh5KNIqIbs5R4lz0ostfLikQF4+JmxpSYj4XbKFiXf9fUh5d6DI1HUV4Y5bdRWCB9NdJTKB0VWEAw3TMYOzidU9g3PzEF2VqcWRIaVKQhglogrVEF2x21qYIbVt2hEZxAxHF1XBfcCVMAADs=");
}

.left {
  content: url("data:image/gif;base64,R0lGODlh8ADwAIABAAAm///7ACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAADwAPAAQAL+jI+py+0Po5y02ouz3rz7AIRi+JXmiaaqNLYusMbyTMvvjdf6zvcHDgySfMSisSJMKmHHptO3jEqf1GpJis0OrdxuQwsOM73kp/iMLqt36LZ7u4573vT6WI5n2ff7vD/BFygI9+c1eIh4V9iU2Ni4qOYo+Qb5N3kZValpgNk5sgmq4PkYWvo1Wmeqqoeqtfpq0ZoES6sh+1mb2+Gp23uS6Bu8YidcTCNmnMyzpNxc9OIcTYQrXY0iZJ2d4ardzUDpnT0YnnxJXnt7Dnp7o57HzuzOBR8mb0RPZ3+ML6hvwj/JHwaArQQ+IMjP4EGE8BTGYojJ4S6I4yReo+jGYg3+jFk0PuOYwyMVkIpEzgNo0lLBlJsCsnzV76WvjDKbdaypLQhOeSJ28izps5qLoNaAELU562gwLEpz1Wuqqg3UdfmmFgpkFQ+irGUkcbXS6SsjVGKhsCu7MSFaFRDX/uPolgPJnnEfzqVWd+FdaHm/7dXZ98dfJX0HM11rGIzYxGesMqZJ9HGqnZL5yKxc0SNmYCY3H6rpuY/P0JAjk1bs+HSmxaoBI249tDBsoHVVB/aL+bbexLpZ7e2NZC7wgRiHb2BofA6+5G9lMU9B9vkwc9JnOKrOJjP27MS2fyzt/fvT8Ga4kQe7+rwhbOrXhGwvpwX8q/Mt1ddK6H4X+fr+1/PvX8V7AI4l4IDTsGegWUklyB1hDKY1xYM2mCfhRahV2Nx4GE6UxoZygeMhcVWFGFx3JPpm4okOfKbiKSy2CAgpMHLi1YwRtcjLidF56NyGZ1VIj4RqGUgQkQgBSJF+cM1HEnx3qfcXeYZ5xxh2kkmXW3KeGUcacLbdBltgs9H21Zj5lWnmmamlqWZTbP635pt0TSUnX27WaadpeOZJ2Z4FXuanUTgFiiBLhC7Y2aGIaqRoPIw26uijkBaq2aSCGmopnyllCiegnOo5qVKWQgVpnH5yRShreKK16mts1pambLOBGaZurQ13mpZbMrdZdZVt91h4vEkZJZRPOtlvZH0g9VccksgZiRKD0T64HIYN8dhjiCvpmCOON9ro0ow0yijuuC+WK5h26KZr2boLYOUubiPG++689NYr1b27aaivixf2u2+EAEdA4cAQHGbwBOklrPCiDKOo6cMQ4yVxiZ1WbHGbGPu28Ycdr1UAADs=");
}

.right {
  content: url("data:image/gif;base64,R0lGODlh8ADwAIABAAAm///7ACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAADwAPAAQAL+jI+py+0Po5y02ouz3rz7BoRi+JXmiaaqNrYusMbyTNfJi+f2zve+kgsKSb+i8ZgZKpcwpPOJZEqn0KpVNc1qideuV7INi5vfsneMTpvXxrT7zWXLU/C6nTzPY+78vv7/0Cc4GAc4R4iYiGd4pejoyPj0OAkX+UWJKWWZl9k5smnpCQlKeiB6V5rKcCqm6grBqvQ6SxH7SYt74ZnLy6HYC1yCGkyMMlaMLMOUzGzz0gztcxtNvTNUjW2slc2t+9YNvkAYno1Jjmx7TmuLo77JvuwuB98qb0VfZ1+EP66vzD/JnzCApwR6I0jPoAOECRWCYJjJYQWIiCT6ovjN4gn+jNs0zuAYxOMPkItEtgFoskyslHoosXwn6OWrjDJ5dayZTAhObiJ2uivkE5yLoEJ1EKW25CizLEqD1Ws6yw1UVXamwuRjFVCirPMecb0U8SsUVmKPwCvbAyXajwzXYuHodiDJknEnzm1R18Jdo3kD7dXZV9zfpIENDGaa93AYt4rRiG1Msynkqkcn+9lpuR/LzL9Ecq5o8jNWmaIj1yz9lChqKlZXX3vseijj2HTRri5sijNuIJB3P/zrG9bc4BPgErdL8HgSfMovrmzuoSB0E2Gna+tsfQXo7GyHcXdW6bs0x+JP3ixvVhP6KrLWd+Hr/sy0+GZq0790nxPQ/O/+5/NvJNt/97Qj4FghFRjFawiORNiCPLDmYA3nRajdFhTGcMyF16WmYQemdbjchyAiF96Ieo1mYnExpRjBdiyustWLgmEno2EB1RhAdSzusqMoKT7XITtBnkUhPxEmh2BbAlL0n3H0kfTkcOsBV95h4jXG3WTWZQbdZ8qVRtxtu8WGG232wWZmYmb2NNuabJblZoBcxfnMnHTWOdWd8FWm554+9QlYUIAqiNOg7Z1m6KGbJdpgaIzG49mj6mkkKaSUVhpopJjimdKmci7q6ZkehaoapkpVCtWjrRlqZ59o0mkbrGvFWdeafdFWmGtjgumbaMfp9qWWXWK5pZVZUvly3V5TQukeSPdhxB9ESyI5LXMLWusgkUUCeSFZI/r4o44mmlPjjTiOgqONmqWr7mXsIrDiuzd4J++8JdbLm1T4/pbhvvxa6K9fAAcsMIQEF9zowQhnqrBwhDbcIsMQR0zgxCT6Z7GKGGessagc+/VxWQUAADs=");
}

.row {
  width: 100vw;
  max-width: 601px;
  float: left;
  border-bottom: 1px inset silver;
  margin-left: calc((100vw - 601px) / 2);
}

.scoreboard {
  float: right;
  width: clamp(17px, 11vw, 48px);
  font-size: 36px;
  font-weight: bold;
  color: white;
}

.correct {
  background-color: green;
}

.misplaced {
  background-color: red;
}

.status {
  padding: 6px;
  width: calc(100vw - 12px);
  max-width: 589px;
  float: left;
  margin-left: calc((100vw - 589px - 12px) / 2);
  font-size: clamp(14px, 3vw, 24px);
}

.success {
  color: white;
  background-color:green;
}

.warning {
  color: black;
  background-color: yellow;
}

.failure {
  color: white;
  background-color: red;
}

@media screen and (width <= 600px) {
  .row {
    margin-left: 0;
  }
  
  .status {
    margin-left: 0;
    float: left;
    padding: 4px;
    width: calc(100vw - 8px);
  }

  .up, .down, .left, .right {
    margin-left: clamp(0px, 2vw, 24px);
  }
}