:root {
  --btn-flip-color: #4994EC;
  --btn-got-color: #67AC5C;
  --btn-forgot-color: #E15241;
  --btn-reset-color: #FF9800;
  --btn-quit-color: #343A40;

  --font-family: 'Inter',              /* web font */ 
    -apple-system, BlinkMacSystemFont, /* iOS/macOS */
    'Segoe UI',                        /* Windows */
    Roboto, Oxygen, Ubuntu, Cantarell, /* Android/Linux */
    'Helvetica Neue', sans-serif;      /* fallback */
}

*,
*::before,
*::after {
  font-family: var(--font-family);
  line-height: 1.4;
}
* {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;

    -webkit-touch-callout: none;
}

.hidden { display: none }

#unlock-code {
  font-family: 'Arial', sans-serif; /* Font stack: Primary font, fallback */
  font-size: 20px; /* Size in pixels (default is usually 14px) */
  font-weight: normal; /* Options: normal, bold, 400, 700, etc. */
  font-style: normal; /* Optional: italic, oblique, normal */
  color: #333; /* Text color */
  background-color: #f9f9f9; /* Optional: Background for contrast */
}

#select-deck-ul {
  list-style-type: none;
}

#select-deck-ul li {
  margin-bottom: 5px;
}

.deck-select-button {
  color: white;
  background-color: #FF9800;
  padding: 0.2rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  transition: filter 0.4s;
}

.container {
    max-width: 500px;
    margin: 2rem auto;
    text-align: center;
}

#buttons {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: max-content;
    margin: 0 auto;
}

#buttons button, #unlock-button {
    color: white;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    transition: filter 0.4s;
}

button:hover {
  filter: brightness(1.3)
}

@media (hover: none) and (pointer: coarse) {
    #buttons button:hover {
        filter: none;
    }
}

button:active {
    filter: brightness(0.6);
}

#unlock-button {
  background-color: var(--btn-quit-color);
}
#flip {
    background-color: var(--btn-flip-color)
}
#got {
    background-color: var(--btn-got-color);
}
#forgot {
    background-color: var(--btn-forgot-color);
}
#review-missed {
    background-color: var(--btn-reset-color);
}
#start-over {
    background-color: var(--btn-quit-color);
}
#new-deck {
    background-color: var(--btn-quit-color);
}

#card {
  margin-top: .25rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #727272;
  border-radius: 6px;
  font-size: 1.25rem;
  background: #fbf3e5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  font-weight: 600;
  font-size: 1.5rem;
}

@media only screen and (orientation: landscape) {
  .container {
    /* undo the desktop max-width, stretch full screen */
    max-width: none;
    width: 95vw;      /* or just 100% if you prefer within body */
    margin: 0;         /* drop the auto centering */
  }

  #flashcard {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  #buttons {
    order: 1;
    display: flex;
    flex-direction: column;    /* stack buttons vertically */
    flex: 0 0 25%;             /* fixed 25% of container width */
    gap: 0.4rem;
    /* if you want a little padding inside the sidebar: */
    padding: 0.5rem;
  }

  #buttons button {
    flex: none;
    width: 100%;
    margin-bottom: 0;
    padding: 0.5rem 0;
  }

  #card-display {
    order: 2;
    flex: 1 1 75%;             /* fill the remaining 75% */
    margin: 0;                 /* drop the top/bottom margins */
  }
}

/*
body { font-family: system-ui, sans-serif; display:flex; justify-content:center; }
#card { border:1px solid #aaa; padding:2rem; margin:1rem; min-width:15rem; text-align:center; }
button { margin: .25rem; }
.hidden { display:none; }
.hidden { content-visibility: none;}
.well-done { font-size: 2rem; margin-top:1rem; }
*/