/*
// Entry point for your Sass build
// site.scss
// sassc src/assets/site.scss public/css/site.css
*/
@font-face {
  font-family: 'Nunito';
  src: url("/static/fonts/Nunito-ExtraLight.ttf") format("truetype"); }

@font-face {
  font-family: 'NunitoRegular';
  src: url("/static/fonts/Nunito-Regular.ttf") format("truetype"); }

@font-face {
  font-family: 'NunitoMedium';
  src: url("/static/fonts/Nunito-Medium.ttf") format("truetype"); }

@font-face {
  font-family: 'Digital';
  /*    src: url("/static/rallye/fonts/LED_Dot_Matrix.ttf") format("truetype");
      src: url("/static/rallye/fonts/ErbosDraco.ttf") format("truetype");
      */
  src: url("/static/fonts/Digital7Mono.ttf") format("truetype"); }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  scroll-behavior: smooth; }

body {
  font-size: 20px;
  font-family: "NunitoRegular", sans-serif;
  background-color: #CCC;
  color: #222;
  width: 100vw; }

footer {
  margin: auto;
  padding: 0.2rem 1rem;
  font-size: 0.6rem;
  text-align: center; }

main {
  padding: 1rem 0;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto; }

.icontext {
  display: none; }

ul.buttons {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

li {
  list-style: none; }

li a {
  margin: 0.5rem 1rem; }

.hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 1000; }

.hero-inner {
  padding: 1rem; }

.hero .buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto;
  width: 100%; }

.hero .btn {
  display: block;
  padding: 0.5em 1rem;
  margin: 0.5em;
  color: #555;
  text-decoration: none;
  border: 1px solid #AAA;
  border-radius: 0.3rem; }

.hero a.btn:hover {
  color: #000;
  border-color: #000; }

a {
  text-decoration: none;
  padding: 0; }

ul {
  list-style: none; }

.header {
  background-color: #25F;
  box-shadow: 1px 1px 5px 0px #777;
  position: sticky;
  top: 0;
  width: 100%;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: stretch; }

.brand {
  display: flex;
  align-items: center; }

a.logo {
  display: flex;
  align-items: center;
  color: #EEE;
  font-size: 1.4rem; }

a.logo img {
  margin: 0.2rem; }

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 2;
  overflow: hidden; }

.menu {
  display: flex;
  align-items: center; }

.menu a {
  padding: 0.5rem 1rem;
  color: #EEE;
  font-size: 1.4rem; }

.menu a .icontext {
  display: none; }

.menu a:hover {
  background-color: transparent;
  color: #000; }

.list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #999;
  background-color: #EEE;
  padding: 0.5rem; }

.car_number, .race_name {
  margin-right: 1rem; }

.car_number {
  min-width: 6rem;
  text-align: right; }

.car_info, .race_info {
  flex: 2; }

.car_brand, .race_locality {
  display: block;
  font-family: "NunitoMedium", sans-serif;
  font-size: 1.2rem;
  font-weight: 900; }

.car_driver, .race_date {
  display: inline-block;
  font-size: 1rem;
  color: #555; }

.car_detail, .race_detail {
  padding: 0 1rem; }

form {
  margin: auto;
  margin-bottom: 2rem;
  width: 800px;
  text-align: center;
  background-color: #EEE;
  border: 1px solid #77F; }

table {
  margin: auto;
  margin-bottom: 1rem;
  width: 100%;
  background-color: #EEE;
  border: 1px solid #009;
  border-collapse: collapse;
  font-size: 0.8rem; }

thead tr {
  background-color: #009;
  color: #FFF; }

th {
  padding: 0.4rem;
  text-align: center; }

tbody tr:last-child {
  border: 0; }

tbody tr:nth-child(even) {
  background-color: #DDD; }

td {
  padding: 0.1rem 1rem;
  text-align: center; }

th.left, td.left {
  text-align: left; }

th.right, td.right {
  text-align: right; }

.updateBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem; }

#updateButton {
  padding: 0.4rem;
  margin: 0.5rem;
  font-size: 1.2rem; }

#updateSelect {
  font-size: 1.2rem;
  padding: 0.4rem 0; }

#timeClock {
  font-family: "Digital", "NunitoMedium", sans-serif;
  font-size: 2.6rem;
  font-weight: bold;
  color: #000; }

#timeUpdated {
  padding: 4px 6px;
  font-family: "Digital", "NunitoMedium", sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  background-color: black;
  color: #0F0; }

#timeUpdated.stopped {
  color: red; }

@media (min-width: 768px) {
  main {
    padding: 1rem; }
  .menu a .icontext {
    display: inline-block; }
  table {
    font-size: 1rem; } }