@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

/* --- ROBOTO CLASSIC: NORMAL WEIGHTS --- */

/* Thin */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-Thin.woff2") format("woff2"),
    url("/assets/fonts/Roboto-Thin.woff") format("woff"),
    url("/assets/fonts/Roboto-Thin.ttf") format("truetype"),
    url("/assets/fonts/Roboto-Thin.eot"),
    local("Roboto Thin"),
    local("Roboto-Thin");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-Light.woff2") format("woff2"),
    url("/assets/fonts/Roboto-Light.woff") format("woff"),
    url("/assets/fonts/Roboto-Light.ttf") format("truetype"),
    url("/assets/fonts/Roboto-Light.eot"),
    local("Roboto Light"),
    local("Roboto-Light");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-Regular.woff2") format("woff2"),
    url("/assets/fonts/Roboto-Regular.woff") format("woff"),
    url("/assets/fonts/Roboto-Regular.ttf") format("truetype"),
    url("/assets/fonts/Roboto-Regular.eot"),
    local("Roboto"),
    local("Roboto-Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-Medium.woff2") format("woff2"),
    url("/assets/fonts/Roboto-Medium.woff") format("woff"),
    url("/assets/fonts/Roboto-Medium.ttf") format("truetype"),
    url("/assets/fonts/Roboto-Medium.eot"),
    local("Roboto Medium"),
    local("Roboto-Medium");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-Bold.woff2") format("woff2"),
    url("/assets/fonts/Roboto-Bold.woff") format("woff"),
    url("/assets/fonts/Roboto-Bold.ttf") format("truetype"),
    url("/assets/fonts/Roboto-Bold.eot"),
    local("Roboto Bold"),
    local("Roboto-Bold");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Black */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-Black.woff2") format("woff2"),
    url("/assets/fonts/Roboto-Black.woff") format("woff"),
    url("/assets/fonts/Roboto-Black.ttf") format("truetype"),
    url("/assets/fonts/Roboto-Black.eot"),
    local("Roboto Black"),
    local("Roboto-Black");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- ROBOTO CLASSIC: ITALIC WEIGHTS --- */

/* Thin Italic */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-ThinItalic.woff2") format("woff2"),
    url("/assets/fonts/Roboto-ThinItalic.woff") format("woff"),
    url("/assets/fonts/Roboto-ThinItalic.ttf") format("truetype"),
    url("/assets/fonts/Roboto-ThinItalic.eot"),
    local("Roboto Thin Italic"),
    local("Roboto-ThinItalic");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Light Italic */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-LightItalic.woff2") format("woff2"),
    url("/assets/fonts/Roboto-LightItalic.woff") format("woff"),
    url("/assets/fonts/Roboto-LightItalic.ttf") format("truetype"),
    url("/assets/fonts/Roboto-LightItalic.eot"),
    local("Roboto Light Italic"),
    local("Roboto-LightItalic");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Italic (Regular) */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-Italic.woff2") format("woff2"),
    url("/assets/fonts/Roboto-Italic.woff") format("woff"),
    url("/assets/fonts/Roboto-Italic.ttf") format("truetype"),
    url("/assets/fonts/Roboto-Italic.eot"),
    local("Roboto Italic"),
    local("Roboto-Italic");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium Italic */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-MediumItalic.woff2") format("woff2"),
    url("/assets/fonts/Roboto-MediumItalic.woff") format("woff"),
    url("/assets/fonts/Roboto-MediumItalic.ttf") format("truetype"),
    url("/assets/fonts/Roboto-MediumItalic.eot"),
    local("Roboto Medium Italic"),
    local("Roboto-MediumItalic");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-BoldItalic.woff2") format("woff2"),
    url("/assets/fonts/Roboto-BoldItalic.woff") format("woff"),
    url("/assets/fonts/Roboto-BoldItalic.ttf") format("truetype"),
    url("/assets/fonts/Roboto-BoldItalic.eot"),
    local("Roboto Bold Italic"),
    local("Roboto-BoldItalic");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Black Italic */
@font-face {
  font-family: "RobotoClassic";
  src:
    url("/assets/fonts/Roboto-BlackItalic.woff2") format("woff2"),
    url("/assets/fonts/Roboto-BlackItalic.woff") format("woff"),
    url("/assets/fonts/Roboto-BlackItalic.ttf") format("truetype"),
    url("/assets/fonts/Roboto-BlackItalic.eot"),
    local("Roboto Black Italic"),
    local("Roboto-BlackItalic");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* --- GLOBAL STYLING & RENDERING TWEAKS --- */

body {
  font-family:
    "RobotoClassic", "RobotoDraft", "Roboto Flex", Roboto, "Helvetica Neue",
    Helvetica, system-ui, Arial, sans-serif;

  /* The 2011 version was designed for lower DPI screens. 
     These properties help it look crisp on modern displays. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Slight letter-spacing often helps the original Roboto feel 
     less "crowded" on modern web layouts. */
  letter-spacing: 0.01em;

  text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);

  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(3px) contrast(0.8) saturate(1.1);
  backdrop-filter: blur(3px) contrast(0.8) saturate(1.1);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#footer {
  color: white;
}

html {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: 0% 0%;
  background-image: url("/assets/img/bg.webp");
}

html.lol {
  background-image: url("/assets/img/bg-old.png");
  background-position: center;
}


code,
pre {
  font-family: "Roboto Mono", monospace;
}

.mui--text-display4,
.mui--text-display3 {
  font-weight: 100;
}
.mui--text-display2,
.mui--text-display1,
.mui--text-headline {
  font-weight: 300;
}

#qrcode {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 1.5rem;
}

#hero {
  width: 100%; 
  text-align: center;
  color: white;
  margin-bottom: 1.5rem;
}

.mui-container-fluid {
  min-width: 45vw;
}

.material-icons {
  font-size: 1em!important;
}

#logo {
  width: 5.5rem;
  height: 5.5rem;
  font-size: 5rem!important;
  display: block;
  margin: 0 auto;
  margin-bottom: 1rem;
}

#hero h1 {
  margin-top: 0;
}

#hero .buttons {
  display: flex;
  /* gap: .25rem; */
  justify-content: center;
  align-items: center;
}

#hero .mui-btn.mui-btn--flat {
  color: white;
}

.mui-btn.mui-btn--flat:active, .mui-btn.mui-btn--flat:focus, .mui-btn.mui-btn--flat:hover {
  background-color: #0001;
}