.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

:root {
  --primary-color: #b026ff;
  --secondary-color: #ff5126;
  --tertiary-color: #ffcc26;
}

html,
body {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;

  margin: 0;
  padding: 0;
  background-color: black;
  color: white;

  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  line-height: 1.2;
  overflow: hidden;
}

* {
  box-sizing: border-box;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0;
}

h1,
.mega-title {
  font-family: "Bungee Spice", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  font-size: 48px;
}

h2,
h3,
h4,
h5,
h6,
.title {
  font-family: "Kode Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

section {
  display: none;
  position: relative;
  height: 100%;
  height: -webkit-fill-available;
}

section.active {
  display: flex;
}

#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}