style.css

.sr-only-old {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.sr-only {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

body { margin: 0; padding: 0; }

#card-template {
  display: none;
}

#open-explainer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 1em;
}

#open-explainer button {
  background: none;
  background-image: url("https://cdn.glitch.me/6f22b01f-863d-42d0-b982-19a1a5d07120/Book%202.ico?v=1639864611576");
  background-size: 64px;
  border: none;
  color: transparent;
  width: 64px;
  height: 64px;
}

#explainer {
  display: none;
  position: fixed;
  bottom: 0;
  background: darkgray;
  border: 1px solid rebeccapurple;
  width: 30em;
  max-width: 100%;
  min-height: 50px;
  border-top: 3px solid darkgray;
  border-left: 3px solid darkgray;
  border-right: 3px solid gray;
  border-bottom: 3px solid gray;
  left: 50%;
  transform: translate(-50%, 0);
}

.explainer-titlebar {
  background: darkblue;
  display: flex;
  padding-left: 3px;
  justify-content: space-between;
}

.explainer-title {
  color: lightgray;
  font-weight: bold;

}

.explanation {
  max-width: 45em;
  margin: auto;
}

.explanation-main {
  display: none;
  max-height: 25vh;
  overflow: auto;
  background: lightgrey;
  margin: 0.5em;
  border-top: 2px solid gray;
  border-left: 2px solid gray;
  border-right: 2px solid #dddddd;
  border-bottom: 2px solid #dddddd;
}

.explanation-positive,
.explanation-negative,
.explanation-placeholder {
  margin: 1em;
  font-size: 1em;
}

.explanation-positive p,
.explanation-negative p,
.explanation-placeholder p {
  font-size: 1em;
}

.explanation-negative h1,
.explanation-positive h1 {
  font-size: 1em;
  color: black;
  margin: 0;
}

#explainer-options {
  text-align: center;
  font-size: 1em;
  margin-bottom: 1em;
}
#explainer-options label {
  font-size: 1em;
}

.explainer-button {
  width: 20px;
  border-top: 2px solid lightgray;
  border-left: 2px solid lightgray;
  border-bottom: 2px solid gray;
  border-right: 2px solid gray;
  text-align: center;
  background: darkgray;
  margin: 2px;
  font-size: 0.75em;
  cursor: default;
}

.card,
.card * {
  -ms-touch-action: none;
  touch-action: none;
}

.floating {
  z-index: 10
}

#table {
  width: 2000px;
  height: 2000px;
  position: relative;
  background-color: #e6f7f7aa;
  background-image:  linear-gradient(#f745e8 1px, transparent 1px), linear-gradient(to right, #f745e8 1px, #e6f7f7aa 1px);
  background-size: 20px 20px;
  border: 1px solid #f745e8;
}

.deck {
  position: fixed;
  width: 199px;
  height: 284px;
  margin-top: 23px;
  margin-left: 23px;
  z-index: 3;
}

.transition-transform {
  transition: transform 0.25s
}

.card {
  position: absolute;
  width: 235px;
  height: 268px;
  list-style: none;
  transition: width 1s;
  display: flex;
}
.card:focus {
  outline: none;
}

.card.deck-card {
  position: fixed;
  top: 20px;
  left: 15px;
  z-index: 5;
}

.inner-card * {
  box-sizing: border-box;
}

.inner-card {
  border-radius: 8px;
  width: 188px;
  height: 268px;
  background:linear-gradient(146deg, rgba(38, 230, 250, 1) 0%, rgba(140, 5, 227, 1) 70%, rgba(88, 11, 137, 1) 100%);
  transition: transform 1s, box-shadow 1s;
  border: 2px solid rebeccapurple;
  margin: auto;
}

.card:focus-within .inner-card {
  border: 2px solid magenta;
}

.inner-card img {
  border-radius: 5px;
  display: none;
  opacity: 0%;
  position: absolute;
  width: 184px;
  transition: opacity 0.5s;
}

.buttons {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-self: center;
  cursor: pointer;
}

.card:focus-within .buttons {
  visibility: visible;
}

/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */
:root {
  --color-bg: rgb(92,255,192);
  --color-text-main: #000000;
  --color-primary: #D7F5EF;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
  --card-width: 188px;
  --card-height: 268px;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

/* Our remix on glitch button */
.btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #D0FFF1;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: #000;
  text-decoration: none;
  border-style: none;
}
.footer a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: HK Grotesk;
  background-color: var(--color-bg);
}

p,
label {
  font-size: 1.25rem;
}

button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 0.5rem;
}
button {
  cursor: pointer;
}
label {
  color: #000000;
  font-weight: bold;
}

p a {
  text-decoration: none;
  font-weight: bold;
}