@import url(../card-types/allcards.css);
@import url(../themes/black-hex.css);
@import url(../themes/blue-hex.css);
@import url(../themes/default.css);
@import url(../themes/forest.css);
@import url(../themes/forest-2.css);
@import url(../themes/forest-3.css);
@import url(../themes/image-gradient-1.css);
@import url(../themes/keynote.css);
@import url(../themes/fort-lauderdale-1.css);
@import url(../themes/color-gradient-1.css);
@import url(../themes/red-gradient.css);
@import url(../themes/mint.css);
@import url(../themes/pastel.css);
@import url(../themes/peach.css);
@import url(../themes/matto-grosso-do-sul.css);
@import url(../themes/navy.css);
@import url(../themes/natal-1.css);
@import url(../themes/natal-2.css);
@import url(../themes/natal-dunes.css);
@import url(../themes/purple-stripes.css);
@import url(../themes/fort-lauderdale-2.css);
@import url(../themes/t-minus-1.css);
@import url(../themes/caves-1.css);
@import url(../themes/leaf.css);
@import url(../themes/ocean-1.css);
@import url(../themes/painting.css);
@import url(../themes/red-cactus.css);
@import url(../themes/senna.css);
@import url(../themes/clover-1.css);

@font-face {
  src: url("../fonts/GothamSSNarrow-Book.woff2") format("woff2");
  font-family: "Gotham Narrow";
  font-style: normal;
  font-weight: 400;
}

@font-face {
  src: url("../fonts/GothamSSNarrow-Medium.woff2") format("woff2");
  font-family: "Gotham Narrow";
  font-style: normal;
  font-weight: 500;
}

@font-face {
  src: url("../fonts/GothamSSNarrow-BookItalic.woff2") format("woff2");
  font-family: "Gotham Narrow";
  font-style: italic;
  font-weight: 400;
}

@font-face {
  src: url("../fonts/GothamSSNarrow-Bold.woff2") format("woff2");
  font-family: "Gotham Narrow";
  font-style: normal;
  font-weight: 800;
}

@font-face {
  src: url("../fonts/GothamSSNarrow-BoldItalic.woff2") format("woff2");
  font-family: "Gotham Narrow";
  font-style: italic;
  font-weight: 800;
}

@font-face {
  src: url("../fonts/Decimal-Book.woff2") format("woff2");
  font-family: "Decimal";
  font-style: normal;
  font-weight: 400;
}

:root {
  font-family: "Gotham Narrow";
  font-style: normal;
  font-weight: 400;
  --f-bar-background: hsla(178, 6%, 91%, 1);
  --f-bar-border: hsla(177, 1%, 80%, 1);
  --myGreen: hsla(129, 67%, 47%, 1);
}

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1; /* hide images */
  content: url("../img/caves-1.jpg") url("../img/forest-1.jpg")
    url("../img/fort-lauderdale-1.jpg") url("../img/fort-lauderdale-2.jpg")
    url("../img/leaf.jpg") url("../img/natal-1.jpg")
    url("../img/natal-dunes.jpg") url("../img/red-cactus.jpg")
    url("../img/t-minus-1.jpg") url("../img/natal-2.jpg")
    url("../img/ocean-1.jpg") url("../img/clover-1.jpg")
    url("../img/forest-2.jpg") url("../img/painting.jpg")
    url("../img/forest-3.jpg") url("../img/image-gradient-1.jpg")
    url("../img/black-hex.jpg") url("../img/purple-stripes.jpg")
    url("../img/matto-grosso-do-sul.jpg") url("../img/blue-hex.jpg");
}

/*
**
*** BASE STYLES FOR ALL FLASHCARDS
**
*/

body {
  display: grid;
  /* position: relative; */
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4rem;
  justify-items: start; /* items start at vertical top of row */
}

.container {
  width: 100%;
}

.question-wrapper {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  min-height: 100%;
  overflow-y: hidden;
}

/*
*** POINTER TO RIGHT ARROW ON HOME VIEW
*/
.pointer {
  color: red;
  font-family: Decimal;
  font-size: 3rem;
  left: -6.5rem;
  position: absolute;
  top: -6rem;
  transform: rotateZ(45deg);
}

/*
**
*** F-Bar Styles
**
*/
.f-bar {
  background-color: hsla(178, 6%, 91%, 1);
  border-top: 1px solid hsla(177, 1%, 80%, 1);
  display: flex;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  justify-content: space-around;
  width: 100%;
}

.nav-arrow {
  /* arrows for reveal and forward/start */
  filter: grayscale(1) opacity(0.5);
  /* opacity: 0.5; */
  transition: filter 1s ease;
}

.reveal img {
  aspect-ratio: 1 / 1;
  transform: rotate(90deg);
  width: 3rem;
}

.cards-left {
  border: 0.3rem solid hsla(179, 2%, 67%, 1);
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
}

#count {
  color: hsla(179, 2%, 67%, 1);
  transition: opacity 1.5s ease;
}

#count.count-active {
  color: hsla(219, 70%, 62%, 1);
}

#count {
  font-weight: 800;
  text-align: center;
}

.count-2 {
  /* 2-digit number of flashcards left */
  font-size: 1.4rem;
  padding-top: 0.2rem;
}

.count-3 {
  /* 3-digit number of flashcards left */
  font-size: 1.1rem;
  padding-top: 0.4rem;
}

.count-hash {
  /* What displays for flashcards left on home view (#) */
  font-size: 1.6rem;
  padding-top: 0.07rem;
}

.watermark {
  aspect-ratio: 1 / 1;
  filter: grayscale(1) opacity(0.3);
  /* opacity: 0.3; */
  width: 3.8rem;
}

/* .emerge {
  filter: grayscale(0);
  opacity: 1;
} */

/*
**** NEW CSS CHECK DISC
*/
#c-button {
  background-color: hsla(220, 70%, 62%, 1);
  border: 0.3125rem solid hsla(220, 70%, 62%, 1);
  border-radius: 50%;
  filter: grayscale(1) opacity(0.55);
  height: 3rem;
  position: relative;
  transition: all 0.6s ease;
  width: 3rem;
}

.small-bar {
  /* short */
  height: 17px;
  left: 9px;
  position: absolute;
  top: 15px;
  transform: rotate(-45deg);
  width: 5.5px;
}

.large-bar {
  /* long */
  height: 24px;
  left: 22px;
  position: absolute;
  top: 7px;
  transform: rotate(45deg);
  width: 5.5px;
}

.small-bar,
.large-bar {
  background-color: var(--f-bar-background);
  transition: background-color 0.6s ease;
}

#c-button.marked .small-bar,
#c-button.marked .large-bar {
  background-color: #fff;
}

#c-button.marked {
  background-color: var(--myGreen);
  border-color: var(--myGreen);
}

/*
**** END NEW CORRECT DISC
*/

.nextcard {
  height: 3rem;
  position: relative;
}

.nextcard img {
  aspect-ratio: 1 / 1;
  width: 3rem;
}

input[type="checkbox"] {
  display: none;
}

.arrows-functional img {
  /* REVEAL and RIGHT ARROW appearance when they are functional */
  filter: grayscale(0) opacity(0.8);
  /* opacity: 0.8; */
}

/*
**
*** CARD TRANSITION STYLES
**
*/

/* .done {
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  height: 1.3rem;
  left: 4.6rem;
  position: absolute; 
  top: 4.7rem;
  transition: opacity 0.6s ease;
  width: 1.3rem;
}

.hide-done {
  opacity: 0;
} */

.question-wrapper {
  position: relative;
}

.shade {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*
**
*** Home View Template Styles
**
*/
select {
  font-size: 1.1rem;
  outline: none;
  margin-left: 0.3rem;
  padding: 0.2rem 0.4rem;
  width: 14rem;
}

.home-select {
  display: block;
}

.home-item {
  list-style-type: none;
  margin-bottom: 1.7rem;
}

.home-item:last-child {
  margin-bottom: 0;
}

.home-item img {
  aspect-ratio: 1 / 1;
  display: inline-block;
  margin: 0 0.3rem;
  vertical-align: middle;
}

.home-reveal img,
.home-start img {
  opacity: 0.8;
  width: 1.8rem;
}

.home-reveal img {
  transform: rotate(90deg);
}

.desaturated img {
  filter: grayscale(1);
  opacity: 0.6;
}

.home-logo img {
  width: 2.1rem;
}

.home-correct img:nth-of-type(1) {
  filter: hue-rotate(122deg);
  width: 2rem;
}

.home-correct img:nth-of-type(2) {
  width: 2rem;
}

.home-h2,
.home-h3 {
  color: hsla(247, 47%, 26%, 1);
  font-weight: 800;
  text-align: center;
}

.home-h2 {
  font-size: 2.5rem;
}

.home-h3 {
  font-size: 2rem;
}

.home-instructions {
  font-size: 1.2rem;
}

/* Media Queries */
/* narrower screen media queries */
@media screen and (max-width: 1132px) {
  html,
  body {
    grid-template-rows: 1fr 5rem;
    height: 100%;
    min-height: 100%;
    width: 100%;
  }

  .f-bar {
    align-items: center;
    padding: 0 5%;
  }
} /*  end narrow media query */

/* iPad Mini 2266 x 1488 pixels in landscape*/
@media screen and (width: 1133px) {
  html,
  body {
    grid-template-rows: 1fr 5.8rem;
    height: 100%;
    min-height: 100%;
    width: 100%;
  }

  .f-bar {
    padding: 0 5.6rem;
  }

  .cards-left,
  .nextcard,
  .reveal,
  #c-button {
    margin-top: 0.8rem;
  }

  .home-button-div {
    margin-top: 0.44rem;
  }
} /* end iPad mini media landscape query */

/* iPad mini portrait media query */
@media screen and (orientation: portrait) {
  html,
  body {
    grid-template-rows: 1fr 5.8rem;
  }

  .cards-left,
  .nextcard,
  .reveal,
  #c-button {
    margin-bottom: 1rem;
  }

  .home-button-div {
    margin-bottom: 1rem;
  }
} /* end portrait iPad Mini media query */

/* Wider screen media query */
@media screen and (min-width: 1134px) {
  html,
  body {
    grid-template-rows: 1fr 5rem;
    height: 100%;
    min-height: 100%;
    width: 100%;
  }

  .f-bar {
    align-items: center;
    padding: 0 5%;
  }
} /*  end wide media query */