* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Google Sans", system-ui, sans-serif;
  background: #0f172a;
  color: #e5e7eb;
}

button, input, select {
  font-family: inherit;
}


.google-sans-400 {
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
    "GRAD" 0;
}
.google-sans-500 {
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    "GRAD" 0;
}
.google-sans-600 {
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
    "GRAD" 0;
}
.google-sans-700 {
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
    "GRAD" 0;
}


.recording {
    border-color: red !important;
    animation: blink 1s infinite;
}

@keyframes blink {
    0% { border-color: red; }
    50% { border-color: darkred; }
    100% { border-color: red; }
}   


.scrollable-content {
  /* For Internet Explorer and Edge */
  -ms-overflow-style: none;
  /* For Firefox */
  scrollbar-width: none;
  /* Ensure content that overflows still has the ability to scroll */
  overflow: auto; 
}

/* For Chrome, Safari, Opera, and other WebKit-based browsers */
.scrollable-content::-webkit-scrollbar {
  display: none;
}