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

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}

/* Aesthetic Changes */

:root {
  --rem-value: clamp(10px, 3vw, 18px);
}

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

html{
    font-family: "Montserrat", sans-serif;

    font-size: var(--rem-value);
}

body{
  display: grid;
  place-items: center;
  min-height: 100vh;
}


.info {
  counter-reset: int-width var(--int-width);
  
  font-size: 4rem;
  text-align: center;

  &::before {
    content: "Width: " counter(int-width);
  }
}