@font-face {
    font-family: 'Gilroy';
    src: local('Gilroy Regular'), local('Gilroy-Regular'),
        url('fonts/Gilroy-Regular-subset.woff2') format('woff2'),
        url('fonts/Gilroy-Regular-subset.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

@font-face {
    font-family: 'Gilroy';
    src: local('Gilroy Medium'), local('Gilroy-Medium'),
        url('fonts/Gilroy-Medium-subset.woff2') format('woff2'),
        url('fonts/Gilroy-Medium-subset.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

@font-face {
    font-family: 'Gilroy';
    src: local('Gilroy SemiBold'), local('Gilroy-SemiBold'),
        url('fonts/Gilroy-SemiBold-subset.woff2') format('woff2'),
        url('fonts/Gilroy-SemiBold-subset.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

body {
  font-family: "Gilroy", "Arial", sans-serif;
}

div.content {
  display: block;
  text-align: center;
}

h1 {
  font-size: 200%;
  font-weight: 500;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

span#temp {
  font-weight: 600;
}

span#degree {
  font-weight: 400;
}

#current_temp {
  font-size: 10em;
  color: black;
  transition: color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

#current_temp.color-gray {
  color: #eeeeee;
  transition: color 2.0s ease;
}

#current_temp.precise {
  font-size: 7em;
}

@media (max-width: 320px) {
  #current_temp {
   font-size: 9em;
  }

  #current_temp.precise {
  font-size: 6em;
  }
}


@media (prefers-color-scheme: dark) {
  body {
    background-color: #111111;
    color: #cccccc;
  }
  #current_temp {
    color: #cccccc;
    transition: color 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
  }

  #current_temp.color-gray {
    color: #1a1a1a;
    transition: color 2.0s ease;
  }
}