:root {
  --color: hsla(32, 100%, 50%, 97%);
  --color2: hsl(32, 100%, 50%);
  --borderRadius: 2ex;
  --background1: hsla(33, 80%, 5%, 50%);
  --fontSize: 24px;
  --margin1: 0.25ex;
  --margin2: 0.5ex;
  --margin3: 1ex;
  --margin4: 2ex;
  --borderColor1: hsla(34, 100%, 60%, 0.66);
  --borderColor2: hsla(34, 100%, 75%, 0.8);
  --borderWidth: 0.2ex;
}


body {
  display: flex;
  background: black;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  color: var(--color);
  stroke: var(--color);
  fill: var(--color);
  stroke-width: 0.5ex;
  border-width: var(--borderWidth);
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color: var(--color);
  font-size: var(--fontSize);
}

div:focus {
  outline: none !important;
}


input {
  background: var(--background1);
  border-radius: var(--borderRadius);
  margin: var(--margin2);
  padding: var(--margin1);
  color: var(--color);
  border-color: var(--borderColor1);
  border-width: var(--borderWidth);
  font-size: var(--fontSize);
  text-align: center;
  width: 10ex;
}
input:focus {
  outline: none !important;
  border-color: var(--borderColor2);
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background1);
  border-radius: var(--borderRadius);
  margin: var(--margin1);
  padding: var(--margin2);
  color: var(--color2);
  border-color: var(--borderColor1);
  border-width: var(--borderWidth);
  font-size: var(--fontSize);
  font-weight: bold;
  text-align: center;
}
button:focus {
  border-color: var(--borderColor1);
}

svg {
  font-size: var(--fontSize);
  height: 100%;
  stroke: var(--color);
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#onSwitch {
  position: absolute;
  z-index: -100;
  width: 100%;
  height: 100%;
}

.onSwitch_svg {
  width: 80%;
}

#logIn {
  flex-direction: column;
}

#enter {
  height: 3ex;
  width: 3em;
}