style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap');

/* primary: bright, secondary: light, tertiary: dark */
:root {
  --primary: lightgray;
  --secondary: orange;
  --warning: yellow;
  --danger: red;
  --background-primary: rgb(30, 30, 30);
  --background-secondary: rgb(50, 50, 50);
  --background-tertiary: rgb(75, 75, 75);
  --border-primary: 1px solid var(--background-tertiary);
  --border-secondary: 1px solid var(--primary);
  --border-tertiary: 1px solid var(--secondary);
  --border-danger: 1px solid var(--danger);
  --border-radius: 0.3125em;
  --box-shadow: 1px 1px 4px 2px rgba(50, 50, 50, 0.2);
  --font-primary: "Noto Sans Mono";
  --font-secondary: "Roboto Mono", monospace;
  --font-tertiary: "Rubik Mono One", sans-serif;
  --font-family: "Noto Sans Mono", Monospace, Arial, Helvetica, Times;
  --font-size-small: 0.75em;
  --font-size-regular: 0.875em;
  --font-size-header: 1em;
  --screen-max-width: 48em;
  --duration: 500ms;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--background-primary);
  color: var(--primary);
  font-family: var(--font-family);
  font-size: var(--font-size-regular);
}

#app-navigator {
  align-items: center;
  background-color: var(--background-secondary);
  border-bottom: var(--border-primary);
  border-radius: var(--border-radius);
  min-height: 3.125em;
  padding: 0.3125em;
  display: flex;
  flex-flow: row nowrap;
}

#app-navigator h1,
#app-navigator nav {
  flex: 1 1;
}

#app-navigator h1 {
  justify-content: start;
}

#app-navigator h1 a {
  border: none;
  color: var(--primary);
  outline: none;
  text-decoration: none;
  text-transform: lowercase;
  transition: all var(--duration) ease-in-out;
}

#app-navigator h1 a:hover,
#app-navigator h1 a:focus,
#app-navigator h1 a:active {
  color: var(--secondary);
}

#app-navigator nav {
  display: flex;
  justify-content: end;
}

#app-navigator button {
  background: var(--background-secondary);
  border: var(--border-primary);
  border-radius: var(--border-radius);
  color: var(--primary);
  cursor: pointer;
  margin: 5px;
  outline: none;
  padding: 10px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all var(--duration) ease-in-out;
  outline: none;
}

#app-navigator button:hover,
#app-navigator button:focus,
#app-navigator button:active {
  border: var(--border-tertiary);
  color: var(--secondary);
}

#app-navigator button:hover:last-child,
#app-navigator button:focus:last-child,
#app-navigator button:active:last-child {
  border: var(--border-danger);
  color: var(--danger);
}

#app-form {
  background: var(--background-secondary);
  border: var(--border-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  color: var(--primary);
  display: none;
  flex-flow: column nowrap;
  height: 210px;
  margin:auto;
  margin-top: 20px;
  overflow: hidden;
  padding: 10px;
  width: 360px;
}

#app-form header {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 0;
}

#app-form header i {
  align-items: center;
  display: flex;
  flex: 0 0 5%;
  justify-content: center;
  font-size: var(--font-size-header);
  color: var(--primary);
}

#app-form header i:hover {
  color: var(--danger);
}

#app-form div,
#app-form footer {
  flex: auto;
  overflow: hidden;
}

#app-form div input,
#app-form footer button {
  background: var(--background-tertiary);
  border: none;
  border-radius: var(--border-radius);
  color: var(--primary);
  font-family: inherit;
  margin: 5px;
  outline: var(--primary) solid thin;
  padding: 5px;
  transition: all var(--duration) ease-in-out;
  width: 95%;
}

#app-form div input:focus,
#app-form div input:hover,
#app-form div input:active,
#app-form footer button:focus,
#app-form footer button:hover {
  background: var(--background-secondary);
  box-shadow: var(--box-shadow);
  color: var(--secondary);
  outline: var(--secondary) solid thin;
}

main {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.flashcard {
  height: 180px;
  margin: 5px;
  padding: 5px;
  perspective: 1000px;
  width: 360px;
  z-index: 1;
}

.flashcard-wrapper {
  cursor: pointer;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
  width: 100%;
}

.flashcard-back,
.flashcard .flashcard-flip {
  transform: rotateY(180deg);
  position: relative;
  left: -10;
  right: 0;
}

.flashcard-face {
  -webkit-backface-visibility: hidden;
  background: var(--background-secondary);
  backface-visibility: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.flashcard-front,
.flashcard-back {
  margin: 10px;
  padding: 10px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.flashcard-back {
  font-size: var(--font-size-regular);
}

.flashcard header {
  color: var(--primary);
  position: absolute;
  top: 25px;
  right: 10px;
  z-index: 2;
}

.flashcard header i:focus,
.flashcard header i:hover {
  color: var(--danger);
}

@media(max-width:768px){
  .flashcard{margin: auto;}

  .flashcard{
    margin-top: 10px;
    margin-bottom: 10px;
  }

  main {
    flex-flow: column nowrap;
  }
}

@media(max-width:480px){
  #app-navigator {
    padding: 20px;
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }

  #app-form {
    width: 95%;
  }

  .flashcard {
    width: 100%;
  }

}