lumeweb.com/src/index.css

@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");

:root {
  --primary-dark: #000000;
  --primary-light: #ffffff;
}

:root {
  --black:
    rgba(0, 0, 0, 1);
  --blue-charcoal:
    rgba(1, 14, 16, 1);
  --blue-charcoal-2:
    rgba(3, 21, 24, 1);
  --aquamarine:
    rgba(122, 252, 187, 1);
  --cloud:
    rgba(199, 199, 199, 1);
  --alto:
    rgba(217, 217, 217, 1);
  --white:
    rgba(255, 255, 255, 1);

  --font-size-s: 20px;
  --font-size-m: 21px;
  --font-size-l: 25px;
  --font-size-xl: 30px;
  --font-size-xxl: 32px;
  --font-size-xxxl: 45px;
  --font-size-xxxxl: 100px;

  --font-family-ibm_plex_sans_devanagari: "IBM Plex Sans Devanagari";
  --font-family-jaldi: "Jaldi";
  --font-family-jetbrains_mono: "JetBrains Mono";
}

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

html {
  scroll-behavior: smooth;
}

a,
a:visited {
  text-decoration: none;
  color: white;
}

body {
  font-family: "JetBrains Mono", sans-serif;
  background-color: #031418;
  color: white;
}

.body-block {
  align-items: center;
  display: flex;
  gap: 78px;
}

.centered {
  display: grid;
  place-items: center;
  overflow: hidden;
  height: auto;
  margin-bottom: 1.5vh;
}

.home {
  background-color: #031418;
  flex-direction: column;
  align-items: center;
  display: absolute;
  overflow: hidden;
  border: 1px none;
  height: auto;
  width: 100%;
}

.title {
  height: 57px;
  letter-spacing: -1.5px;
  line-height: 102px;
  white-space: nowrap;
}

a {
  text-decoration: none;
}

h1 {
  font-size: calc(26px + (82 - 26) * ((100vw - 300px) / (1600 - 300)));
  font-weight: 100;
}

h2 {
  font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
  color: var(--aquamarine);
  text-transform: uppercase;
  z-index: 999;
}

h3 {
  font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
  min-width: 75vw;
  margin-top: 0.5em;
  z-index: 999;
}

h4 {
  font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300)));
  color: var(--cloud);
  font-family: var(--font-family-jaldi);
  font-size: var(--font-size-m);
  font-weight: 400;
  font-style: normal;
  max-width: 550px;
  margin-top: 0.5em;
  line-height: 35px;
}

h5 {
  font-size: calc(15px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
  color: var(--white);
  font-family: var(--font-family-jaldi);
  font-weight: 400;
  font-style: normal;
  max-width: 300;
  line-height: 2rem;
}

h6 {
  font-size: calc(15px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
  color: var(--cloud);
  font-family: var(--font-family-jaldi);
  font-weight: 100;
  font-style: normal;
  max-width: 300;
}

ul {
  list-style-type: none;
}

.container {
  max-width: 1240px;
  margin: auto;
  padding: 0 1rem;
}

@media screen and (max-width: 1050px) {
  .left {
    display: flex;
    position: relative;
    overflow: hidden;
    white-space: normal;
  }

  .h2-alignment {
    margin-left: -10em;
  }

  h5 {
    font-size: calc(20px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
    color: var(--white);
    font-family: var(--font-family-jaldi);
    font-weight: 400;
    font-style: normal;
    max-width: 300;
    line-height: 2rem;
  }

  h6 {
    font-size: calc(17px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
    color: var(--cloud);
    font-family: var(--font-family-jaldi);
    font-weight: 100;
    font-style: normal;
    max-width: 300;
  }
}