:root {
  --bg-main: #000000;
  --bg-section: #080808;
  --bg-card: #111111;

  --text-main: #ffffff;
  --text-title: #f2f2f2;
  --text-muted: #c9c9c9;
  --text-soft: #8a8a8a;

  --border: rgba(255, 255, 255, 0.14);
  --border-soft: rgba(255, 255, 255, 0.08);

  --shadow-strong: rgba(0, 0, 0, 0.8);
}

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

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
}

body {
  overflow-x: hidden;
}

body.is-loading {
  background: var(--bg-main);
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: block;
  fill: currentColor;
  stroke: none;
}

.page-section {
  min-height: 100vh;
  background: var(--bg-section);
  scroll-margin-top: 90px;
}