:root {
  --form-width: 50vw;
  --form-padding: 3rem;
  --form-padding-li: 1rem;
  --transition: 1s;
  --logo-size: 9rem;
  --logo-text: 8rem;
  --font-1-norse: 'Norse-Bold', 'Courier New', Courier, monospace;
  /* --font-2: Arial, Helvetica, sans-serif; */
  --font-2: 'Times New Roman', Times, serif;
  --img-width: calc(100vw - var(--form-width));
  --text-color-1: #bbb;
  --text-color-2: #999;
  --text-color-3: #777;
  --text-color-4: #666;
}

@font-face {
  font-family: Norse-Bold;
  src: url(./media/fonts/Norse-Bold.otf);
}

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

.main {
  display: flex;
  flex: auto;
  flex-direction: column;
}



/* - - - login / sign up - - - */

.login-signup {
  display: flex;
  justify-content: center;
  position: absolute;
  flex: auto;
  z-index: 1;
  height: 100vh;
  background-color: black;
}

/* logo */
.bg-logo {
  display: flex;
  flex: auto;
  z-index: 2;
  justify-content: center;
  position: absolute;
  margin-top: 5rem;
  height: 8rem;
  width: 100%;
  background-color: rgba(0, 0, 0, .50);
}
.logo-and-text {
  display: flex;
  gap: .5rem;
  align-items: center;
  animation: reveal 1s;
}
.logo-and-text > p {
  color: var(--text-color-1);
  font-family: var(--font-1-norse);
  font-size: var(--logo-text);
}
.logo-and-text > img {
  /* position: sticky; */
  height: var(--logo-size);
  width: auto;
}

/* each side */
.bg-login,
.bg-signup {
  width: 50vw;
  transition: all ease-in-out var(--transition);
  animation: reveal var(--transition);
} .bg-login {
  background-image: url(./media/images/backgrounds/gioele-fazzeri-dj_DVO6OeZA-unsplash.jpg);
  background-size: cover;
  background-position: center;
  box-shadow: inset -2rem 0 3rem black;
} .bg-signup {
  background-image: url(./media/images/backgrounds/gioele-fazzeri-5ii9f7pMk40-unsplash.jpg);
  background-size: cover;
  background-position: center;
  box-shadow: inset 2rem 0 3rem black;
}
/*hiding side*/
.hide-side {
  width: 0;
}
.smaller-side {
  width: var(--img-width);
}

/* buttons */
.buttons {
  display: flex;
  position: absolute;
  justify-content: space-around;
  transition: 1s;
  gap: 10rem;
  bottom: 0;
  z-index: 2;
  width: 100%;
  margin-bottom: 10rem;
  animation: raise var(--transition);
}

.login,
.signup {
  padding: 1rem 4rem;
  font-size: 2em;
  color: var(--text-color-1);
  transition: all ease-in-out 100ms;
  border-radius: 3rem;
}
.login {
  background-color: transparent;
  border: none;
  text-decoration: underline #666;
}.login:hover,
.login:focus {
  color: white;
  text-decoration-color: #333;
}.login:active {
  text-shadow: 0 0 3rem white;
}
.signup {
  background-color: rgb(37, 70, 22);
  border: .25rem solid rgb(47, 49, 30);
}.signup:hover,
.signup:focus {
  background-color: rgb(49, 87, 34);
  border-color: rgb(102, 88, 57);
  box-shadow: 0 0 1rem black;
}.signup:active {
  background-color: rgb(70, 105, 41);
  border-color: rgb(129, 110, 70);
  box-shadow: 0 0 2rem white;
}

/*credits*/
.bg-credits {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .50);
  margin-bottom: 1rem;
}.bg-credits p {
  color: var(--text-color-1);
  text-align: center;
  vertical-align: middle;
  margin: .3rem;
  font-family: var(--font-1-norse);
}.bg-credits a:visited {
  color: var(--text-color-2);
  text-decoration: underline #555;
}.bg-credits a:link {
  color: var(--text-color-3);
}



/* - - - forms - - - */

.form { /* divs */
  flex: 1 1 auto;
  position: absolute;
  width: var(--form-width);
  height: 100vh;
  background-color: #111;
  overflow-y: auto;
}
.menu-signup {
  right: 0;
}
.bg-form-color {
  display: flex;
  flex-direction: column;
  flex: auto;
  background-color: #333;
}

/* text */
.form p {
  color: var(--text-color-1);
  font-family: var(--font-2);
  font-weight: 800;
  font-size: 1.5em;
}
.form > p {
  margin: 1rem var(--form-padding);
} .form > p span {
  font-style: italic;
} .form > p:nth-of-type(1n+2) {
  padding-top: 2em;
  padding-bottom: 1em;
}
.form > p:last-of-type {
  font-size: 1.25em;
}

form p {
  padding: .1rem var(--form-padding);
  margin-left: 0;
}
form p:last-of-type {
  font-size: 1em;
  color: var(--text-color-2);
}
form > div > p:nth-of-type(2)::before {
  padding-right: 1.25em;
  content: "";
  background: url(./media/images/input-status/undefined.png)
              no-repeat center left;
  background-size: 1em;
  filter: grayscale(1) brightness(.5);
}

form button.signup {
  padding: .5rem 2rem;
  border-radius: 10% / 50%;
  margin: 2rem var(--form-padding);
  font-size: 1.5em;
}

.form a:visited {
  color: var(--text-color-2);
  text-decoration: underline #555;
}.form a:link {
  color: var(--text-color-3);
}

/*password*/
.span-pass {
  height: 0%;
  overflow: hidden;
  transition: height 1s;
}
.span-pass > p {
  padding: 0;
  margin: 0;
}
.span-pass ul {
  list-style: none;
  padding-left: .25em;
  font-size: 1em;
}
.span-pass ul li {
  padding-left: 0;
}
.span-pass ul li::before {
  content: "";
  padding-right: 20px;
  background-image: url(./media/images/input-status/bad.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: left;
}
.span-pass ul li.valid::before {
  background-image: url(./media/images/input-status/good.png);
}

/*width*/
form {
  max-width: 1000px;
}
.form > p {
  max-width: calc(1000px - var(--form-padding) * 2);
}

/* fields */
form > div > ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: .1rem var(--form-padding);
  color: var(--text-color-1);
}
form > div > ul > li {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  width: calc(50% - var(--form-padding-li) );
  max-width: 300px;
  min-height: 5rem;
  padding: var(--form-padding-li);
  padding-left: 0;
}
label,
input,
input + span {
  font-size: 1.25em;
  font-family: var(--font-2);
}
input::placeholder {
  font-size: .9em;
  color: var(--text-color-4);
}
abbr {
  color: var(--text-color-3);
}

/* status cues */

/**/
input {
  padding-right: 30px;
  background-image: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  background-color: #444;
  border: none;
  border-bottom: 5px solid #555;
  color: var(--text-color-1);
  font-family: var(--font-2);
}
input:focus,
input:hover {
  background-color: #555;
  border-bottom: 4px solid #777;
  outline: none;
  box-shadow: 0 0 .5rem white;
}
input.visited:valid:not(#repeat-pass),
#repeat-pass.visited.valid {
  border-bottom: 4px solid green;
  background-image: url(./media/images/input-status/good.png);
}
input.visited:invalid,
#repeat-pass.visited:not(.valid) {
  border-bottom: 4px solid orangered;
  background-image: url(./media/images/input-status/bad.png);
}
input:placeholder-shown {
  border-bottom: 4px solid #555;
  background-image: none;
}
input.visited:not([type="tel"]):placeholder-shown {
  border-bottom: 4px solid yellow;
  background-image: url(./media/images/input-status/undefined.png);
}
input.visited[type="tel"]:placeholder-shown {
  border-bottom: 4px solid #555 !important;
  background-image: none !important;
}
input.visited:placeholder-shown:not([type="password"]):not([type="tel"]) + span::after {
  content: "This field is required.";
}
input[type="password"]:focus + span,
input[type="password"].visited + span {
  height: 100%;
}
input[type="password"]:valid + span {
  height: 0%;
}

/*status message*/
input[type="email"].visited:invalid + span::after {
  content: "Wrong format.";
}
input[type="email"].visited:valid + span::after {
  content: none;
}
input[type="email"].visited:placeholder-shown + span::after {
  content: "This field is required."
}

input[type="tel"].visited:invalid + span::after {
  content: "At least 8 numbers";
}
input[type="tel"].visited:valid + span::after{
  content: none;
}
input[type="tel"].visited:placeholder-shown + span::after {
  content: ""
}

/*progress bar*/
.span-pass-confirm {
  display: flex;
  flex-direction: column;
}
.span-pass-confirm p {
  padding: 0;
  margin: 1em 0 .25em 0;
}
/* .span-pass-confirm progress[value] {
  appearance: none;
  width: 100%;
  height: 1rem;
  background-color: #222;
  border: none;
  border-radius: .5rem;
  
}
.span-pass-confirm progress::-webkit-progress-bar,
.span-pass-confirm progress::-moz-progress-bar {
  border-radius: .5rem;
  background-color: red;
} */

progress[value],
progress[value]::-webkit-progress-bar {
  appearance: none;
  border: none;
  border-radius: .5rem;
  width: 100%;
  height: 15px;
  background-color: #222;
}
progress[value]::-moz-progress-bar { /*firefox*/
  background-color: red;
  border-radius: .5rem;
} progress[value]::-webkit-progress-value { /*chrome, opera*/
  background-color: red;
  border-radius: .5rem;
}
progress[value="4"]::-moz-progress-bar,
progress[value="5"]::-moz-progress-bar {
  background-color: darkgreen;
} progress[value="4"]::-webkit-progress-value,
progress[value="5"]::-webkit-progress-value {
  background-color: darkgreen;
}
progress[value="6"]::-moz-progress-bar,
progress[value="7"]::-moz-progress-bar {
  background-color: green;
} progress[value="6"]::-webkit-progress-value,
progress[value="7"]::-webkit-progress-value {
  background-color: green;
}

/* - - - general use - - - */

.hidden {
  display: none;
}

/* keyframes */
@keyframes raise {
  from {
    margin-bottom: 0rem;
    opacity: 0;
    filter: blur(2rem);
  }
  50% {
    filter: blur(0);
  }
  to {
    margin-bottom: 10rem;
  }
}

@keyframes reveal {
  from {
    filter: blur(2rem);
  }
  to {
    filter: blur(0);
  }
}


/* media query */

@media screen and (max-width: 1600px){
  :root {
    --form-width: 60vw;
    --logo-size: 6rem;
    --logo-text: 5rem;
  }
}

@media screen and (max-width: 1200px){
  :root {
    --form-width: 70vw;
    --logo-size: 5rem;
    --logo-text: 4rem;
  }
}

@media screen and (max-width: 900px){
  :root {
    --form-width: 80vw;
    --logo-size: 4rem;
    --logo-text: 3rem;
  }
  .login,
  .signup {
    font-size: 1.25em;
  }
  .bg-credits {
    font-size: .75em;
  }
}

@media screen and (max-width: 400px){
  :root {
    --form-width: 100vw;
    --logo-size: 0rem;
    --logo-text: 0rem;
  }
  .login,
  .signup {
    font-size: 1em;
  }
  .bg-credits {
    font-size: .25em;
  }
}


/*for testing*/

** {
  outline: 1px solid gray;
}