:root {
  --font-size-base: clamp(14px, 0.4vw + 1rem, 18px);
  --space: 1lh;
  --font-family-base: system-ui, "Segoe UI", Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans",  Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol","Noto Color Emoji";
}

html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-family-base);
  margin: 0;
  color: #222;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.2rem, 1.5vw + 1.5rem, 3.2rem);
}

h2 {
  font-size: clamp(1.8rem, 1.2vw + 1.2rem, 2.6rem);
}

h3 {
  font-size: clamp(1.5rem, 1vw + 1rem, 2.2rem);
}

h4 {
  font-size: clamp(1.3rem, 0.8vw + 0.9rem, 1.8rem);
}

h5 {
  font-size: clamp(1.1rem, 0.5vw + 0.8rem, 1.4rem);
}

h6 {
  font-size: clamp(1rem, 0.3vw + 0.75rem, 1.2rem);
}

p {
  font-size: 1rem;
  max-width: 70ch;
}

article {
  max-width: 70ch;
}

body {
  background-color: black;
}

.background-img {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0.4;
}

* {
  color: aliceblue;
}

.signup-btn {
  background-color: #1a82f2;
  font-weight: bold;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.signup-btn:hover {
  background-color: #2e92fd;
  transform: translateY(-2px);
}

.signup-btn:active {
  transform: translateY(-1px) scale(0.98);
}

article {
  background-color: rgb(30, 30, 30, 0.5);
}

.input-div {
  background-color: rgb(50,50,50,0.8);
  border-radius: 5px;
  border: 1px solid transparent;
}

.input-div:hover, label:hover {
  cursor: pointer;
}

i {
  color:aliceblue;
}

option {
  color:black;
}

input, select {
  background: none;
  border: none;
  outline: none;
}

.focus {
  border: 1px solid #1a82f2bf;
}

.invalid {
  border: 1px solid rgb(255, 0, 0,0.5);
}

.valid {
  border: 1px solid rgb(0, 255, 0, 0.5)
}

.error {
  color: red;
}

.signup-msg {
  text-align: center;
  color: green
}