::placeholder {
  color: var(--primary-text);
}

form {
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  justify-content: center;
  align-items: center; /*
  background-color: var(--primary-container); */
  backdrop-filter: blur(5px);
  background-color: rgba(150, 150, 150, 0.1);
  color: var(--primary-text);
  border-radius: 20px;
  padding: 20px;
}

form:not(#formgotten) {
  flex-direction: column;
  width: 460px; /* 500 - 40 (20 padding * 2) */
  gap: 20px;
}

form input, button {
  width: calc(100% - 4px); /*
  background-color: var(--primary-bg); */
  background-color: transparent;
  color: var(--primary-text);
  border: none;
  flex-grow: 1;
  max-height: 38px;
}

form button, form span {
  border: 2px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  background-color: rgba(150, 150, 150, 0.1);
}

form span {
  display: flex;
  align-items: center;
  padding-left: 5px;
  width: calc(100% - 9px); /* -padding */
}

form svg {
  max-height: 24px;
  max-width: 24px;
}

form * {
  width: 100%;
  margin: 0px;
  height: 40px;
  border-radius: 10px;
}

form > p, form > a {
  height: auto;
}

#connect {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

button p {
  width: auto;
  height: auto;
}

details {
  min-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

details div {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center; /*
  background-color: var(--primary-container); */
  border-radius: 20px;
}

details > summary {
  margin: 20px;
  list-style: none;
  cursor: pointer;
  color: var(--primary-text);
  text-decoration: underline;
}
details > summary::-webkit-details-marker {
  display: none;
}

#formgotten {
  width: 100%;
  gap: 5px;
}

#closeformgotten {
  display: none;
}

details span {
  width: 100%;
}

details button {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 40px;
  width: fit-content;
  padding-right: 10px;
}

details button svg {
  min-width: fit-content;
  min-height: fit-content;
}

details input, details span {
  border-radius: 10px 0px 0px 10px;
}

details button {
  border-radius: 0px 10px 10px 0px;
  cursor: pointer;
}

@media screen and (max-width: 812px) {
  main {
    position: relative;
    overflow: hidden;
  }
  
  form {
    width: 100dvh;
    position: absolute;
    top: 0px;
    max-height: 100%;
    height: 100%;
  }
  
  form span, form button {
    width: 85%;
    height: 60px;
    max-height: 60px;
  }
  
  form button {
    width: calc(85% + 5px);
  }
  
  details {
    z-index: 1;
  }
  
  details summary {
    position: absolute;
    left: 0px;
    bottom: 0px;
    color: var(--primary-container-text);
  }
  
  details form {
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
  
  details form * {
    border: none;
    border-radius: 10px;
  }
  
  #closeformgotten {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 0px;
    height: 40px;
    width: 40px;
  }
  
  footer {
    z-index: 2;
  }
}