@font-face{
  font-family: 'Roboto-Regular';
  src: url(../fonts/Roboto/Roboto-Regular.ttf);
}
@font-face{
  font-family: 'Roboto-Medium';
  src: url(../fonts/Roboto/Roboto-Medium.ttf);
}
@font-face{
  font-family: 'Roboto-Bold';
  src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

/** Global Color Variables **/
:root{
  --primary-dark: #0B0D0A;
  --primary-dark-alt: #12140F;
  --primary-light: #141A13;
  --primary-light-alt: #181B16;
  --primary-lighter: #2C2E2B;
  --primary-lighter-alt: #1F221D;
  
  --test: #343434;

  --some: #0b0b0b52;
  
  --secondary-lighter: #FFFFFFB3;
  --secondary-lighter-alt: #FFFFFFA3;
  --secondary-light-alt: #FFFFFF63;
  --secondary-light: #FFFFFF33;
  --secondary-dark: #FFFFFF14;  /* Lightened off-white */
  --secondary-darker: #FFFFFF0C;  /* Further lightened off-white */

  --accent-maroon: #D9416B;
  --accent-pink: #E046A6;
  --accent-violet: #A45BC9;
  --accent-purple: #8F5BC9;
  --accent-dark-purple: #7760B6;
  --accent-blue: #5A71D3;
  --accent-light-blue: #5A8CD3;
  --accent-teal: #2EA1A3;
  --accent-sea-green: #4DBE7A;
  --accent-green: #38B553;
  --accent-light-green: #94BF52;
  --accent-gold: #E2C753;
  --accent-orange: #E76D58;
  --accent-red: #E25D6A;
}

[data-theme="light"] {
  --primary-dark: #a8a7a7;
  --primary-dark-alt: #eceaef;
  --primary-light: #e9e6ec;
  --primary-light-alt: #e3e0e7;
  --primary-lighter: #d1cfd44d;
  --primary-lighter-alt: var(--primary-light);

  
  --some: #f4f4f452;
  
  --secondary-lighter: #000000B3;
  --secondary-light: #00000033;
  --secondary-dark: #0000001A;
  --secondary-darker: #0000001D;
}


/** App's main containers initialisation **/
* {
  user-select: none;
  outline: none;
  overscroll-behavior: none;
}

input {
  user-select: auto;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  display: flex;
}

/** Global filter definitions **/
.blurred-sm{
  filter: blur(5px);
}

.blurred-md{
  filter: blur(8px);
}

.blurred-xl{
  filter: blur(10px);
}

/** Global Box Sizing Initialisation **/
* {
  box-sizing: border-box;
}

/** Global Input Initialisation **/
input::-moz-focus-outer {
  border: 0;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--secondary-lighter);
}

input:focus {
  outline: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:  var(--secondary-light-alt);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:  var(--secondary-light-alt);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color:  var(--secondary-light-alt);
}


/** Global Typography Styleguide **/
h1 {
  font-family: Roboto-Regular;
  font-size: 24px;
  color: var(--secondary-lighter);
}

h2 {
  font-family: Roboto-Regular;
  font-size: 16px;
  color: var(--secondary-lighter);
}

h3 {
  font-family: Roboto-Bold;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--secondary-lighter);
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h4 {
  font-family: Roboto-Bold;
  font-size: 12px;
  color: var(--secondary-lighter);
  margin: 0;
  padding: 0;
  font-weight: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

p {
  font-family: Roboto-Medium;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  -webkit-font-smoothing: antialiased;
  line-height: 16px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--secondary-lighter);
  margin: 0;
}

button {
  text-transform: uppercase;
  font-family: Roboto-Regular;
  font-size: 12px;
  color: var(--secondary-lighter);
  border: none;
}

.label {
  font-family: Roboto-Medium;
  font-size: 12px;
  color: var(--secondary-lighter);
  margin: 0;
  padding: 0;
  font-weight: normal;
  margin-bottom: 8px;
}

.select_value {
  font-family: Roboto-Bold;
  font-size: 12px;
  color: var(--secondary-lighter);
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.label:after {
  content: ":"
}

.label.disabled {
  color: var(--secondary-light);
}

/** Global Scrollbar styling */
* {
  scrollbar-color: var(--secondary-dark) var(--primary-dark);
  scrollbar-width: thin;
  z-index: 0;
}

* .invisible_scrollbar{
  scrollbar-color: transparent;
  scrollbar-width: none;
  z-index: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  background:  var(--primary-dark);
  width: 5px;
  height: 5px;
  z-index: 0;
}

div.invisible_scrollbar::-webkit-scrollbar {
  background: transparent;
  width: 0px;
  height: 0px;
  z-index: 0;
}

::-webkit-scrollbar-corner {
  background: transparent;
}


::-webkit-scrollbar-track {
  background:  var(--primary-dark);
  width: 5px;
  height: 5px;
}

div.invisible_scrollbar::-webkit-scrollbar-track  {
  background: transparent;
  width: 0px;
  height: 0px;
  z-index: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary-dark);
  width: 5px;
  height: 5px;
}

div.invisible_scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  width: 0px;
  height: 0px;
}
