div {
  overscroll-behavior: none;
}

a {
  cursor: pointer;
}

header > [rel="prev"] {
  margin: 0;
  margin-left: var(--pico-spacing);
  padding: 0;
  float: right;
  display: block;
  width: 1rem;
  height: 1rem;
  border: none;
  background-image: var(--pico-icon-close);
  background-position: center;
  background-size: auto 1rem;
  background-repeat: no-repeat;
  background-color: transparent;
  opacity: .5;
  transition: opacity var(--pico-transition);
}
body {
  #main {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    > * {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100dvw;
      height: 100dvh;
      transition: left 0.5s;
      background-color: var(--pico-background-color);
      overflow-y: scroll;
    }

    &:not(.home-focused) #home {
      left: -100dvw;
    }

    #home {
      left: 0dvw;
    }
    #quiz, #editor, #study, #timedQuiz, #buy {
      left: 100dvw;
    }

    &.quiz-focused #quiz {
      left: 0dvw;
    }
    &.timed-quiz-focused #timedQuiz {
      left: 0dvw;
    }
    &.editor-focused #editor {
      left: 0dvw;
    }
    &.buy-focused #buy {
      left: 0dvw;
    }
    &.study-focused #study {
      left: 0dvw;
    }
  }
  #study {
    padding-top: 0;
    > header {
      position: sticky;
      top: 0;
      z-index: 1;
      background-color: var(--pico-background-color);
      box-shadow: var(--pico-card-box-shadow);
      > svg {
	float: right;
	cursor: pointer;
      }

      .progress {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: var(--percent);
	transition: right 0.5s;
	box-shadow: inset 1px 6px 0px 0px var(--pico-primary-focus);
	pointer-events: none;
      }
    }

    table {
      margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
      margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
      width: calc(100% + var(--pico-block-spacing-horizontal) * 2);
      font-size: 0.85em;

    }

    img::after {
	content: 'yead';
	display: block;
    }
  }
  #home {
    h5 {
      text-align: center;
    }

    .chapters {
      padding-top: 1em;
      @media (min-width: 1000px) { 
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;

	> div, article {
	  width: 30%;
	}
      }
    }

    #practice {
      padding-top: 1em;
      @media (min-width: 1000px) { 
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;

	> div, article {
	  flex: 1;
	}
      }
    }
    #timed-practice {
      padding-top: 1em;
      @media (min-width: 1000px) { 
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;

	> div, article {
	  flex: 1;
	}
      }
    }



    .guideBtn {
      margin: 1em;
      position: relative;

      .quizBtn {
	margin: 0;
      }
      .mask {
	position: absolute;
	top: 0;
	display: block;
	width: 3.2em;
	height: var(--percent);
	overflow: hidden;
	z-index: 1;
      }
    }

    > .menu-page {
      height: calc(100dvh - 4em);
      overflow-y: scroll;
      display: none;
      padding: 0 var(--pico-block-spacing-horizontal);

      &.active {
	display: block;
      }
    }
    .menu {
      position: sticky;
      bottom: 0;
      width: 100%;
      height: 4em;
      margin: 0;

      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;

      display: flex;
      justify-content: space-between;

      > * {
	display: flex;
	align-items: end;
	gap: 0.5em;
	@media (max-width: 500px) { 
	  > span {
	    display: none;
	  }
	}

      }
      svg { cursor: pointer }
    }

    .quizzes {
      display: flex;
      .labeledBtn {
	button { margin-right: 0.5em; }
	display: flex;
	font-size: 0.8em;
	align-items: center;
      }

    }

    .quizBtn {
      margin: 1em;
      display: block;
      border-radius: 50%;
      width: 3.1em;
      height: 3.1em;
      transform: rotateX(30deg);
      box-shadow: 1px 6px 0px 0px var(--pico-primary-focus);
      padding: 0.5em;

      &.secondary {
	box-shadow: 1px 6px 0px 0px #ddd;
      }
    }
    #profile {
      padding-top: 1em;

      @media (min-width: 1000px) { 
	display: flex;
	gap: 1em;

	> div, article {
	  flex: 1;
	}

      }


      .pwsignin footer, .upsell footer {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 1em;
      }

      .social-buttons {
	display: flex;
	gap: 1em;
	justify-content: center;
      }
    }
  }

  #quiz {
    overflow: hidden;
    width: 100dvw;
    height: 100dvh;

    header {
      display: flex;
      height: 4em;
      padding: 1.5em;
      gap: 1em;
    }

    .questions {
      display: flex;
      position: absolute;
      left: 0px;
      transition: left 0.5s;
      height: calc(100dvh - 4em);
    }
    .card {
      width: 100dvw;
      height: 100dvh;
      > footer {
	width: 100dvw;
	position: absolute;
	bottom: 0;
	padding-bottom: 2em;
	> button {
	  margin-top: 1em;
	  width: 100%;
	}
      }
      .response {
	position: absolute;
	bottom: -100%;
	transition: bottom 0.5s;

	&.correct {
	  color: var(--pico-color-green-500);
	  bottom: 0%;
	}
	&.incorrect {
	  color: var(--pico-color-red-650);
	  bottom: 0%;
	}

	> :first-child {
	  display: flex;
	  justify-content: space-between;
	}
      }
      
      > .answers {
	max-width: 40em;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(2, 50%);

	@media (max-width: 500px) { grid-template-columns: 100%; }

	> * {
	  padding: 1em;
	  button { width: 100%; }
	}
      }
    }
  }

  #editor {
    padding: 0 2em;
    .with-remove {
      > svg { float: right; }
    }
    .chapter {
      > summary {
	display: flex;
	gap: 1em;
	label { display: none; }
	& :nth-child(2) { width: 5em; }
      }
    }
    .question {
      display: flex;
      gap: 1em;
      > * { width: 100%; }

      input[type="range"] {
	  left: -5em;
	  top: 7em;
	  position: relative;
	  transform: rotate(90deg);
	  width: 13em;
	  z-index: 1;
      }

      .answers {
	position: relative;
	padding-left: 3em;
	.slider-container {
	  width: 3em;
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	}
      }
    }
  }
}

figure {
  display: inline-table;
  position: relative;
  max-width: calc(100% + var(--pico-block-spacing-horizontal) * 2);

  margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
  margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
  img {
    display:block;
  }
  figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: 0.875em;

    padding: 0 calc(var(--pico-block-spacing-horizontal) );
  }

}  

#buy {
  .back {
    background-color: var(--pico-background-color);
  }
}