style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  user-select: none;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

* {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
}
input:focus {
  background-color: rgb(255, 238, 5, 0.1);
}

input:-internal-autofill-selected {
  appearance: unset !important;
  background-image: none !important;
  background-color: rgb(255, 238, 5, 0.1) !important;
  color: white !important;
}

main {
  width: 100%;
  height: 100vh;
  background-image: url(./images/background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
}

.account-page {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.signin-form,
.signup-form {
  width: 500px;
  background-color: rgb(0, 0, 0, 0.5);
  background-position: center;
  background-size: cover;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.account-Btns {
  position: fixed;
  top: 0;
  background-color: rgb(0, 0, 0, 0.5);
  width: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  z-index: 1111;
}

.form-alert {
  position: absolute;
  top: -30%;
  width: 100%;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 20px 20px;
  color: red;
  z-index: 1111111111;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.form-alert > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.form-alert-close,
.form-alert > div > i {
  cursor: pointer;
  font-size: 25px;
  letter-spacing: 1px;
  font-weight: 600;
}

.form-alert-text {
  cursor: pointer;
  font-size: 25px;
  letter-spacing: 1px;
  font-weight: 500;
}

.signin-form {
  display: none;
}

.signin-form > h1,
.signup-form > h1 {
  font-size: 2rem;
  font-weight: 300;
  z-index: 1111;
  text-shadow: 5px 5px 30px white;
  color: white;
  text-decoration: underline white;
  text-underline-offset: 20px;
}
label {
  position: relative;
  font-weight: 300;
  cursor: pointer;
  z-index: 1111;
  width: 100%;
  color: white;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px 10px;
  padding: 15px 15px;
}

.passowrd-eye {
  transition: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(255, 255, 255)'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457ZM14.7577 16.1718L13.2937 14.7078C12.902 14.8952 12.4634 15.0002 12.0003 15.0002C10.3434 15.0002 9.00026 13.657 9.00026 12.0002C9.00026 11.537 9.10522 11.0984 9.29263 10.7067L7.82866 9.24277C7.30514 10.0332 7.00026 10.9811 7.00026 12.0002C7.00026 14.7616 9.23884 17.0002 12.0003 17.0002C13.0193 17.0002 13.9672 16.6953 14.7577 16.1718ZM7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925L16.947 12.7327C16.9821 12.4936 17.0003 12.249 17.0003 12.0002C17.0003 9.23873 14.7617 7.00016 12.0003 7.00016C11.7514 7.00016 11.5068 7.01833 11.2677 7.05343L7.97446 3.76015Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  cursor: pointer !important;
  position: absolute;
  top: 45%;
  transform: translateY(45%);
  right: 5%;
  width: 20px;
  height: 20px;
  z-index: 114441;
}
.passwordEyeCut {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(255, 255, 255)'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z'%3E%3C/path%3E%3C/svg%3E");
}

input {
  font-weight: 400;
  letter-spacing: 1px;
  z-index: 1111;
  width: 100%;
  background-color: rgb(0, 0, 0, 0.5);
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid white;
  color: white;
  box-shadow: none;
  font-size: 1rem;
  padding: 15px 15px;
}

input:focus {
  outline: none;
}

input::placeholder {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: white;
}

.signup-submit-btn,
.signin-submit-btn,
.SignUpButton,
.SignInButton {
  padding: 10px 20px;
  z-index: 1111;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  color: white;
  font-weight: 400;
  letter-spacing: 1px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  text-underline-offset: 5px;
}
.start-quiz-btn:hover,
.logout-btn:hover,
.deleteaccount-btn:hover,
.signup-submit-btn:hover,
.signin-submit-btn:hover,
.SignUpButton:hover,
.SignInButton:hover {
  text-decoration: underline;
  transform: scale(1.1);
}

.user-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
}

.user-page-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.account-delete-form {
  overflow: hidden;
  width: 500px;
  background-color: rgb(0, 0, 0, 0.5);
  background-position: center;
  background-size: cover;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.confirm-email-label {
  opacity: 0.5;
  transform: translateX(-200%);
}
.confirm-password-delete-label {
  opacity: 0;
  transform: translateX(200%);
}

.user-name {
  font-size: 4rem;
  color: white;
}

.start-quiz-btn,
.logout-btn,
.deleteaccount-btn {
  padding: 10px 20px;
  z-index: 1111;
  background-color: rgb(0, 0, 0, 0.9);
  border-radius: 20px;
  color: white;
  font-weight: 400;
  letter-spacing: 1px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.quiz {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.quiz-header {
  width: 100%;
  position: absolute;
  top: 5%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
}

.correctanswer {
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 30px;
  color: white;
  opacity: 0;
}

.quiz-timer {
  text-align: center;
  padding: 10px 30px;
  font-size: 1.6rem;
  line-height: 30px;
  font-weight: 300;
  color: white;
  background-color: rgb(0, 0, 0, 0.9);
  border-radius: 10vh 0 0 50vh;
  border: none;
}
.quiz-body {
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 12px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 0 18px;
}

.quiz-question {
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 30px;
  color: white;
  padding: 0 10px;
}

.quiz-answer-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 10px 10px;
  padding: 10px 10px;
}
.quiz-question-next,
.quiz-answer-btn {
  cursor: pointer;
  width: 220px;
  padding: 10px 20px;
  font-size: 1rem;
  line-height: 30px;
  font-weight: 400;
  color: white;
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 10vh 0 0 50vh;
  border: none;
}
.quiz-question-next {
  width: auto;
  border-radius: 10vh 0 0 10vh;
}

.quiz-question-next:hover {
  color: white;
  background-color: rgb(0, 0, 0, 0.9);
}

@media (max-width: 1400px) {
  .signin-form > h1,
  .signup-form > h1 {
    font-size: 2rem;
  }
  label {
    font-size: 1rem;
    gap: 5px 5px;
    padding: 15px 15px;
  }

  input {
    font-size: 15px;
  }
  input::placeholder {
    font-size: 1rem;
  }

  .SignUpButton,
  .SignInButton {
    padding: 8px 18px;
    font-size: 1rem;
  }
}

@media (max-width: 550px) {
  .account-page {
    padding: 0 20px;
  }
  .account-delete-form,
  .signin-form,
  .signup-form {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .signin-form > h1,
  .signup-form > h1 {
    font-size: 1.5rem;
  }
  .passowrd-eye {
    background-size: 15px;
    right: 10%;
    width: 15px;
    height: 15px;
    top: 50%;
    transform: translateY(50%);
  }
  label {
    font-size: 0.9rem;
  }

  input {
    font-size: 0.8rem;
  }
  input::placeholder {
    font-size: 0.8rem;
  }

  .start-quiz-btn,
  .logout-btn,
  .deleteaccount-btn,
  .signup-submit-btn,
  .signin-submit-btn {
    font-size: 0.8rem;
  }
  .quiz-timer {
    font-size: 1rem;
  }
  .quiz {
    padding: 0 10px;
  }
  .quiz-body {
    width: 100%;
    height: max-content;
    padding: 12px 0;
  }
  .quiz-question {
    font-size: 1rem;
  }
  .quiz-question-next,
  .quiz-answer-btn {
    font-size: 0.8rem;
  }
  .user-name {
    font-size: 1.5rem;
  }

  .form-alert > div > i,
  .form-alert-close {
    font-size: 17px;
  }

  .form-alert-text {
    font-size: 1rem;
  }
}