@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');




:root {
  --main-color: #292733;
  --sec-color: #3b3849;
  --static-header-color: #fff;
  --website-blue-color: rgb(97, 171, 255);
  --nav-link-color: rgb(114, 233, 35);
  --typewrite-speed: 3s;
  --page-text: #fff;
  --tag-color: #504c63;
  --footer-color: #3b3849;
  --contact-text-color: #6e6986;
}

.nightModeChange {
  --main-color: #f4f4f4;
  --sec-color: #fff;
  --static-header-color: #292733;
  --website-blue-color: rgb(97, 171, 255);
  --nav-link-color: rgb(114, 233, 35);
  --typewrite-speed: 3s;
  --page-text: #292733;
  --tag-color: #cfcfcf;
  --footer-color: #6c757d;
}

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

body {
  background: var(--main-color);
  font-family: 'Cutive Mono', monospace;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
  background: var(--sec-color);
  border-radius: 20px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.4);
}

.input {
  width: 300px;
  border: none;
  outline: none;
  background-color: var(--tag-color);
  padding: 1.2rem 1rem;
  margin-bottom: 20px;
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: 100;
  color: var(--page-text);
}

.input::placeholder {
  color: var(--page-text);
}

button {
  width: 300px;
  border: none;
  outline: none;
  padding: 1.2rem 1rem;
  background: var(--website-blue-color);
  color: var(--page-text);
  cursor: pointer;
  border-radius: 6px;
  font-size: 1.2rem;
  transition: all 0.3s ease-in-out;
}

button:hover {
  background: rgb(72, 127, 189);
}


.json {
  background-color: var(--sec-color);
  width: 500px;
  height: 500px;
  padding: 4rem;
  padding-left: 1rem;
  border-radius: 20px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.4);
}

.text {
  margin-left: 10px;
}

.json p {
  color: var(--page-text);
  font-size: 1.3rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.inset1 {
  margin-left: 30px;
}

.inset2 {
  margin-left: 60px;
}

.inset3 {
  margin-left: 90px;
}

#passSpan {
  -webkit-text-security:disc;
}

@media screen and (max-width: 1025px) {
  .json {
    display: none;
  }
}

@media screen and (max-width: 550px) {
  body {
    background-color: var(--sec-color);
  }

  form {
    box-shadow: none;
  }
}