html {
    font-family: "Roboto Mono", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
  
  
  [popover]:popover-open {
    opacity: 1;
    transform: scaleX(1);
  }
  
  [popover] {
    font-size: 1.2rem;
    padding: 20px;
    text-align: center;
    background-color: #46a843; /* color */
    color: white;
    border: none; /* Removes any default border */
    border-radius: 20px; /* Adjust for a rounded rectangle shape */
    width: 50vw; /* Default width for desktop */
    max-width: 400px;
    position: fixed;
  
  }
  
  /* Smaller popover for mobile screens */
  @media (max-width: 500px) {
    [popover] {
      width: 80vw; /* Take up less space */
      max-width: 250px; /* Smaller max size */
      font-size: 1rem; /* Smaller text */
      padding: 20px; /* Less padding */
      top: 10%; /* Move it higher on smaller screens */
      color: white;
    }
  }
  
  
  /* Needs to be included after the previous [popover]:popover-open
     rule to take effect, as the specificity is the same */
  @starting-style {
    [popover]:popover-open {
      opacity: 0;
      transform: scaleX(0);
    }
  }
  
  
  /* Transition for the popover's backdrop */
  
  [popover]::backdrop {
    background-color: rgb(0 0 0 / 0%);
    color: white;
    transition:
      display 0.7s allow-discrete,
      overlay 0.7s allow-discrete,
      background-color 0.7s;
    /* Equivalent to
    transition: all 0.7s allow-discrete; */
  }
  
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 25%);
  }
  
  /* Nesting selectors (&) cannot represent pseudo-elements, so this 
     starting-style rule cannot be nested. */
  
  @starting-style {
    [popover]:popover-open::backdrop {
      background-color: rgb(0 0 0 / 0%);
    }
  }
  
  #restartButton {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #83dd80;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    font-family: "Roboto Mono", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
  
  #restartButton:hover {
    background-color: #46a843;
  }