@import "import";

.quizSection {
  position: relative;
  width: 100%;
  height: 100%;
  @include flex(column, center, center);
  padding: 0 2rem 20vh 2rem;

  @supports (height: 1dvh) {
    padding: 0 2rem 20dvh 2rem;
  }

  @include breakpoint(vmedium) {
    padding: 0 2rem 10vh 2rem;
    @supports (height: 1dvh) {
      padding: 0 2rem 10dvh 2rem;
    }
  }
}

.fieldText {
  @include flex(column, center, center);

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="textarea"],
  textarea {
    position: relative;
    width: 100vw;
    max-width: 35ch;
    height: auto;
    resize: none;
    text-align: center;
    padding: 0 1.2em;
    margin-bottom: 1em;
    line-height: 1.3em;
    display: block;
    background-color: transparent;
    color: color(white);
    border: none;
    outline: none;
    border-radius: 0;
    box-shadow: none;
    //outline: 1px purple dashed;

    &:focus-visible {
      // Not vailable in only keyboard
      // outline: 2px solid color(white);
    }
  }
  textarea {
    height: 1.6em;
    overflow: hidden;
    resize: none;
  }
}