/* This file contains basic style for the app, its aim is to still apply a few
 * css rules in cas JavaScript is disabled in the browser
 */
@import url("fontawesome/css/all.css");

@font-face {
  font-family: Monospaced Font;
  src: url("./fontawesome/webfonts/Inconsolata-Regular.ttf");
}

* {
  scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background-color: var(--scrollbar-background);
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-foreground);
}

html {
  scroll-behavior: smooth;
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#noscript {
  background-color: #ff5050;
  color: white;
  padding: 20px;
  margin: 0px;
  font-size: 16px;
  text-align: center;
}
#noscript > a {
  color: white;
  font-weight: 900;
}

/* Gives buttons a default 'flat' look */
select,
button {
  border: none;
  cursor: pointer;
}

/* NOTE The styling bellow is purely aesthetic, it violates accessibility best
 * practices from the W3C since these outlines are there to help those
 * navigating with keyboards
 * TODO Do we want to keep this? */

/* Removes the outline on buttons after they're clicked in Firefox */
::-moz-focus-inner {
  border: none;
}
:focus {
  outline: none;
}
/* Removes the outline on select tags after they're clicked in Firefox
 * NOTE This is a bit of a dirty workaround, to change a select tag text's color
 * we'll now need to use 'text-shadow: 0 0 0 var(--color);' */
select,
select:-moz-focusring,
select::-moz-focus-inner {
  color: transparent !important;
  text-shadow: 0 0 #ffffff;
}