:root {
  --header-height: 64px;
  --dora-black: rgb(34, 30, 39);
  --dora-warm-white: rgb(240, 238, 234);
  --dora-sky-blue: rgb(73, 160, 236);
  --dora-vermillion: rgb(245, 90, 36);
  --dora-spotlight-yellow: rgb(240, 225, 90);
  --dora-mauve: rgb(184, 175, 254);
  --dora-deep-plum: rgb(114, 2, 92);
  --dora-prussian-blue: rgb(11, 57, 84);
  --dora-primary-dark: var(--dora-black);
  --dora-primary-light: var(--dora-warm-white);
  --dora-highlight: var(--dora-spotlight-yellow);
  --dora-secondary-a: var(--dora-vermillion);
  --dora-secondary-b: var(--dora-sky-blue);
  --dora-secondary-c: var(--dora-mauve);
  --dora-tertiary-a: var(--dora-deep-plum);
  --dora-tertiary-b: var(--dora-prussian-blue);
  --background: white;
  --grey-10: color-mix(in srgb, var(--dora-black), var(--background) 90%);
  --grey-15: color-mix(in srgb, var(--dora-black), var(--background) 85%);
  --grey-20: color-mix(in srgb, var(--dora-black), var(--background) 80%);
  --grey-30: color-mix(in srgb, var(--dora-black), var(--background) 70%);
  --grey-40: color-mix(in srgb, var(--dora-black), var(--background) 60%);
  --grey-50: color-mix(in srgb, var(--dora-black), var(--background) 50%);
  --grey-60: color-mix(in srgb, var(--dora-black), var(--background) 40%);
  --grey-70: color-mix(in srgb, var(--dora-black), var(--background) 30%);
  --grey-80: color-mix(in srgb, var(--dora-black), var(--background) 20%);
  --grey-90: color-mix(in srgb, var(--dora-black), var(--background) 10%);
  --dora-secondary-b-30: color-mix(in srgb, var(--dora-secondary-b), var(--background) 70%);
  --dora-secondary-c-30: color-mix(in srgb, var(--dora-secondary-c), var(--background) 70%); }

main {
  width: 100%; }

#searchResultsContainer {
  margin: 0 1em; }
  #searchResultsContainer #searchResultsContainer h3 {
    border-bottom: 1px solid #ccc;
    color: #666; }

#resultsHeader {
  color: #666;
  display: none; }
  #resultsHeader b {
    color: #202124; }

#publicationResults {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr; }
  #publicationResults div.publication {
    display: flex;
    margin-right: 1em; }
    #publicationResults div.publication small {
      color: #1a73e8; }
  #publicationResults div.snippet {
    font-family: roboto;
    line-height: 1.25;
    font-weight: 300; }
  #publicationResults div.snippetText {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    overflow: hidden; }
  #publicationResults div.thumbnail {
    margin-right: 0.25em; }
  #publicationResults h3 {
    font-size: 1em;
    font-weight: bold;
    border: none;
    display: inline; }
  #publicationResults h4 {
    font-size: 0.75em;
    color: #999;
    display: inline; }
  #publicationResults a {
    text-decoration: none;
    color: #333; }
  #publicationResults img {
    max-width: 8em;
    max-height: 8em;
    margin-right: 0.5em;
    border: 1px solid #999; }

#askDoraContainer {
  text-align: center; }
  #askDoraContainer a {
    text-decoration: none; }

.searching {
  color: #999;
  font-style: italic; }

#webResults {
  flex-grow: 1;
  margin-top: 2em;
  margin-right: 2em; }

.webResult {
  padding: 0.75rem 0;
  display: block;
  color: #636363;
  text-decoration: none; }
  .webResult:not(:last-child) {
    border-bottom: 1px solid #eee; }
  .webResult h4 {
    color: #202124;
    font-weight: bold; }
  .webResult .url {
    font-size: 0.75rem; }
  .webResult:hover {
    color: #333; }
    .webResult:hover h4,
    .webResult:hover .url {
      color: #1a73e8; }

#askDora {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 1em;
  text-align: center;
  margin-top: 6em;
  padding: 0.5rem;
  width: 16rem;
  display: none; }
  #askDora img {
    width: 8rem; }
  #askDora h3,
  #askDora h4 {
    color: #333; }
  #askDora h3 {
    font-size: 1.25rem;
    font-weight: bold;
    border: none; }
  #askDora h4 {
    font-size: 0.85rem; }

@media (max-width: 960px) {
  #publicationResults {
    grid-template-columns: 1fr 1fr; } }

@media (max-width: 800px) {
  #publicationResults {
    grid-template-columns: 1fr; }
  #webAndGenerativeResults {
    flex-direction: column; }
  #askDora {
    margin-top: 2em; } }