:root {
  --orange: #FF8200;
  --red: #C8102E;
}

[hidden] {
    display: none !important;
}

html, body {  
  margin: 0;  
  padding: 0;  
}

body {
  font-family: "Bookerly", serif;
}

#nav-links a,
#nav-search a {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  color: white;
  width: 40px;
  height: 40px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

#nav-links a {
  border-radius: 50%;
}

@keyframes icon-swap {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(0); opacity: 0; }
  60%  { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#share-btn.swapping .material-icons {
  animation: icon-swap 0.3s ease;
}

#nav-links a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

#nav-links a:active {
  background-color: rgba(255, 255, 255, 0.25);
}

#nav-links a .material-icons,
#nav-search a .material-icons {
  font-size: 24px;
  line-height: 1;
}

#nav-search {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  height: fit-content;
}

#nav-search input {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 20px 0 0 20px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  font-family: "Bookerly", serif;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  field-sizing: content;
  max-width: 250px;
}

#nav-search input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#nav-search input:focus {
  background-color: rgba(255, 255, 255, 0.3);
}

#nav-search input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 10px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyMi4zMDg2NiIgaGVpZ2h0PSIxMjIuMzA4NjYiIHZpZXdCb3g9IjAgMCAxMjIuMzA4NjYgMTIyLjMwODY2IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQiIGQ9Im0gMS43NTczNjI1LDEwLjI0MjY0MiBjIC0yLjM0MzE1LDIuMzQzMTQ2IC0yLjM0MzE1LDYuMTQyMTM0IDAsOC40ODUyOCBMIDQ0LjE4Mzc3Myw2MS4xNTQzMyAxLjc1NzM2MjUsMTAzLjU4MDc0IGMgLTIuMzQzMTUsMi4zNDMxNCAtMi4zNDMxNSw2LjE0MjEzIDAsOC40ODUyOCBsIDguNDg1Mjc5NSw4LjQ4NTI4IGMgMi4zNDMxNSwyLjM0MzE1IDYuMTQyMTQsMi4zNDMxNSA4LjQ4NTI4LDAgTCA2MS4xNTQzMzMsNzguMTI0ODkzIDEwMy41ODA3NCwxMjAuNTUxMyBjIDIuMzQzMTQsMi4zNDMxNSA2LjE0MjEzLDIuMzQzMTUgOC40ODUyOCwwIGwgOC40ODUyOCwtOC40ODUyOCBjIDIuMzQzMTUsLTIuMzQzMTUgMi4zNDMxNSwtNi4xNDIxNCAwLC04LjQ4NTI4IEwgNzguMTI0ODkzLDYxLjE1NDMzIDEyMC41NTEzLDE4LjcyNzkyMiBjIDIuMzQzMTUsLTIuMzQzMTQ2IDIuMzQzMTUsLTYuMTQyMTM0IDAsLTguNDg1MjggbCAtOC40ODUyOCwtOC40ODUyODI1IGMgLTIuMzQzMTUsLTIuMzQzMTQ2IC02LjE0MjE0LC0yLjM0MzE0NiAtOC40ODUyOCwwIEwgNjEuMTU0MzMzLDQ0LjE4Mzc2NyAxOC43Mjc5MjMsMS43NTczNTk1IGMgLTIuMzQzMTQxLC0yLjM0MzE0NiAtNi4xNDIxMzEsLTIuMzQzMTQ2IC04LjQ4NTI4LDAgeiIvPjwvc3ZnPgo=);
  background-size: 10px 10px;
}

#search-btn,
#mic-btn {
  border-radius: 0 20px 20px 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s ease;
}

#search-btn:hover,
#mic-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

#mic-btn.recording {
  background-color: var(--red);
  animation: pulse 1.5s ease-in-out infinite;
}

#mic-btn.recording:hover {
  background-color: var(--red);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

h1,h2 {
  font-family: "Bookerly Display", serif;
}

::selection {
  background-color: var(--red);
  color: white;
}