/* FONTS */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@font-face {
  font-family: 'Gotham';
  src: url('./font/Gotham-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Gotham Light';
  src: url('./font/Gotham-Light.otf') format('opentype');
}

@font-face {
  font-family: 'Gotham Ultra';
  src: url('./font/Gotham-Ultra.otf') format('opentype');
}

@font-face {
  font-family: 'Oswald';
  src: url('./font/Oswald-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald Light';
  src: url('./font/Oswald-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald Ultra';
  src: url('./font/Oswald-Ultra.ttf') format('truetype');
}

@font-face {
  font-family: 'Sokol';
  src: url('./font/Sokol-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Sokol Light';
  src: url('./font/Sokol-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Sokol Ultra';
  src: url('./font/Sokol-Ultra.ttf') format('truetype');
}

/* COLORS */

:root {
  --font-primary:         'Open Sans';
  --font-secondary:       'Gotham';
  --font-secondary-light: 'Gotham Light';
  --font-secondary-ultra: 'Gotham Ultra';
  --radius-lg:             5px;
  --radius-sm:             2px;
  --primary:         #0A1D31;
  --secondary:       #D9110E;
  --tertiary:        #0E96D9;
  --purple:          #4F2A5F;
  --dark-red:        #871811;
  --red:             #D9110E;
  --orange:          #F44206;
  --yellow:          #FAB62D;
  --light-green:     #61B343;
  --green:           #1C8923;
  --dark-green:      #1E6F38;
  --turquoise:       #1C4857;
  --dark-blue:       #245480;
  --blue:            #0E96D9;
  --light-blue:      #14ADBA;
  --primary-dark:    #091A2B;
  --secondary-dark:  #BF0F0C;
  --tertiary-dark:   #0C84BF;
  --purple-dark:     #462554;
  --dark-red-dark:   #77150F;
  --red-dark:        #BF0F0C;
  --orange-dark:     #D73A05;
  --yellow-dark:     #DCA028;
  --light-green-dark:#559E3B;
  --green-dark:      #19791F;
  --dark-green-dark: #1A6231;
  --turquoise-dark:  #193F4D;
  --dark-blue-dark:  #204A71;
  --blue-dark:       #0C84BF;
  --light-blue-dark: #1298A4;
  --white:           #FFFFFF;
  --grey-0:          #FAFAFA;
  --grey-1:          #F5F5F5;
  --grey-2:          #EEEEEE;
  --grey-3:          #E0E0E0;
  --grey-4:          #BDBDBD;
  --grey-5:          #9E9E9E;
  --grey-6:          #757575;
  --grey-7:          #616161;
  --grey-8:          #424242;
  --grey-9:          #212121;
  --black:           #000000;
  --red-0:           #FFEBEE;
  --red-1:           #FFCDD2;
  --red-2:           #EF9A9A;
  --red-3:           #E57373;
  --red-4:           #EF5350;
  --red-5:           #F44336;
  --red-6:           #E53935;
  --red-7:           #D32F2F;
  --red-8:           #C62828;
  --red-9:           #B71C1C;
  --purple-0:        #F3E5F5;
  --purple-1:        #E1BEE7;
  --purple-2:        #CE93D8;
  --purple-3:        #BA68C8;
  --purple-4:        #AB47BC;
  --purple-5:        #9C27B0;
  --purple-6:        #8E24AA;
  --purple-7:        #7B1FA2;
  --purple-8:        #6A1B9A;
  --purple-9:        #4A148C;
  --blue-0:          #E3F2FD;
  --blue-1:          #BBDEFB;
  --blue-2:          #90CAF9;
  --blue-3:          #64B5F6;
  --blue-4:          #42A5F5;
  --blue-5:          #2196F3;
  --blue-6:          #1E88E5;
  --blue-7:          #1976D2;
  --blue-8:          #1565C0;
  --blue-9:          #0D47A1;
  --cyan-0:          #E0F7FA;
  --cyan-1:          #B2EBF2;
  --cyan-2:          #80DEEA;
  --cyan-3:          #4DD0E1;
  --cyan-4:          #26C6DA;
  --cyan-5:          #00BCD4;
  --cyan-6:          #00ACC1;
  --cyan-7:          #0097A7;
  --cyan-8:          #00838F;
  --cyan-9:          #006064;
  --green-0:         #E8F5E9;
  --green-1:         #C8E6C9;
  --green-2:         #A5D6A7;
  --green-3:         #81C784;
  --green-4:         #66BB6A;
  --green-5:         #4CAF50;
  --green-6:         #43A047;
  --green-7:         #388E3C;
  --green-8:         #2E7D32;
  --green-9:         #1B5E20;
  --yellow-0:        #FFFDE7;
  --yellow-1:        #FFF9C4;
  --yellow-2:        #FFF59D;
  --yellow-3:        #FFF176;
  --yellow-4:        #FFEE58;
  --yellow-5:        #FFEB3B;
  --yellow-6:        #FDD835;
  --yellow-7:        #FBC02D;
  --yellow-8:        #F9A825;
  --yellow-9:        #F57F17;
  --orange-0:        #FFF3E0;
  --orange-1:        #FFE0B2;
  --orange-2:        #FFCC80;
  --orange-3:        #FFB74D;
  --orange-4:        #FFA726;
  --orange-5:        #FF9800;
  --orange-6:        #FB8C00;
  --orange-7:        #F57C00;
  --orange-8:        #EF6C00;
  --orange-9:        #E65100;
  --brown-0:         #EFEBE9;
  --brown-1:         #D7CCC8;
  --brown-2:         #BCAAA4;
  --brown-3:         #A1887F;
  --brown-4:         #8D6E63;
  --brown-5:         #795548;
  --brown-6:         #6D4C41;
  --brown-7:         #5D4037;
  --brown-8:         #4E342E;
  --brown-9:         #3E2723;
  --sqrt-2: 1.4142135623730951;
}

/* HTML */

html {
  min-height: 100%;
}

/* BODY */

body {
  height: 100%;

  margin: 0px;

  font-family: var(--font-primary);

  line-height: 1.2;

  overflow-y: scroll;
}

body.dark {
  background: var(--grey-9);
  color: var(--grey-3);
}

/* PAGE */

.page {
  height: 100%;
}

/* SPA */

#spa {
  height: 100%;
}

/* MATERIAL ICONS */

.material-icons {
  font-size: 16px;

  line-height: 1.2;

  vertical-align: bottom;
}

/* HEADING */

h1 {
  margin: 0px;

  font-family: var(--font-secondary);
  font-size: 32px;
  font-weight: inherit;

  line-height: 1.25;
}

/* LINK */

a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: transparent;

  color: var(--blue-8);

  transition: text-decoration-color 0.25s ease-in-out;
}

a:hover {
  text-decoration-color: var(--blue-8);
}

body.dark a {
  color: var(--blue-3);
}

body.dark a:hover {
  text-decoration-color: var(--blue-3);
}

/* IMAGE */

.image {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;

  width: 100%;
}

.image-content {
  width: 100%;

  border-radius: var(--radius-lg);

  background: var(--grey-1);
}

.image-label {
  height: 15px;

  color: var(--grey-7);

  font-size: 12px;
  font-style: italic;
}

body.dark .image-content {
  background: var(--grey-8);

  filter: brightness(88%);
}

body.dark .image-label {
  color: var(--grey-5);
}

/* VIDEO */

.video {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;

  width: 100%;
}

.video-content {
  width: 100%;

  border-radius: var(--radius-lg);

  background: var(--grey-1);

  aspect-ratio: 16 / 9;
}

.video-label {
  height: 15px;

  color: var(--grey-7);

  font-size: 12px;
  font-style: italic;
}

body.dark .video-content {
  background: var(--grey-8);
}

body.dark .video-label {
  color: var(--grey-5);
}

/* TOUR */

.tour {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;

  width: 100%;
}

.tour-content {
  width: 100%;

  border-radius: var(--radius-lg);

  background: var(--grey-1);

  aspect-ratio: 16 / 9;
}

.tour-label {
  height: 15px;

  color: var(--grey-7);

  font-size: 12px;
  font-style: italic;
}

:global(body.dark) .tour-content {
  background: var(--grey-8);
}

:global(body.dark) .tour-label {
  color: var(--grey-5);
}

/* CODE */

q {
  padding: 0px 2px;

  border-radius: var(--radius-sm);

  font-family: 'JetBrains Mono';

  background: var(--grey-2);
  color: var(--grey-8);
}

body.dark q {
  background: var(--grey-8);
  color: var(--grey-4);
}

q:before {
  content: none;
}

q:after {
  content: none;
}

/* ERROR */

p {
  display: inline;

  margin: 0px;
}

/* SELECTION */

::selection {
  background: rgba(0, 0, 0, 0.15);
}

body.dark ::selection {
  background: rgba(255, 255, 255, 0.15);
}