.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

body {
    margin: 0;
    padding: 0;
    background-color: #FFFDF9;
}

#container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr 1fr;
    align-content: stretch;
    justify-content: stretch;
    align-items: center;
    justify-items: center;
}



#header {
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

p {
    font-size: 1.5rem;
    color: #2B2B2B;
}

#question_text {
    overflow: hidden;
    margin: 16px;
    text-align: center;
    font-size: min(3rem, 5vh);
    color: #2B2B2B;
}

#buttons {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
}

.answer_button {
    background-color: #a259ff;
    color: #FFFDF9;
    border: none;
    width: max(150px, min(18vh, 18vw));
    height: max(150px, min(18vh, 18vw));
    border-radius: 50%;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    margin: 15px;
    transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.2s ease;
}

.answer_button:hover {
    background-color: #8a3fdc; /* slightly darker purple */
    transform: scale(1.08);    /* grow a little */
    box-shadow: 0 0 15px rgba(162, 89, 255, 0.6); /* glow effect */
}

.answer_button:active {
    transform: scale(0.95);    /* shrink briefly */
    background-color: #702bbf; /* deeper purple */
    box-shadow: 0 0 5px rgba(162, 89, 255, 0.4);
}

@keyframes flashGreen {
  0%   { background-color: #a259ff; }
  20%  { background-color: #3bb33f; } /* pop + green */
  100% { background-color: #a259ff; }
}

@keyframes flashRed {
  0%   { background-color: #a259ff; }
  20%  { background-color: #c93a35; } /* pop + red */
  100% { background-color: #a259ff; }
}

.answer_button.flash-green {
  animation: flashGreen 0.7s ease;
}

.answer_button.flash-red {
  animation: flashRed 0.7s ease;
}