@font-face {
  font-family: 'Quicksand';
  src: url('quicksand.ttf') format('truetype');
  font-weight: semi-bold;
  font-style: normal;
}

:root {
  --alpha: #EB5D40;
  --letter: #f0f0f0;

  --speaker: #bcbcbc;
  --speaker-task: #F77E63;
  --check-button: #72c17273;

  --reading-card: rgb(255 255 0 / 25%);
  --place: #99999966;

  --selected:#316DD380;
  --correct: #72c172;
  --incorrect: #fb9090;

  --correct-answers: #72c17273;

  --border: #ccc;
  --background: #f3f3f3;
  --white: #fff;
}

/* Links */
a, a:visited, a:active, a:hover, a:focus {
  color: black;
  text-decoration: none;
  user-select: none;
}

/* General settings */
body {
  display: flex;
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  text-align: center;
  margin-top: 40px;
}

audio {
  width: 500px;
}

p, div, li {
  font-size: 24px;
}

p {
  margin: 0;
}

/* non-selectable text */
.dropdown-options, .dropdown-selected,
.lang-container, .speaker,
.letter-container, .reading-letter,
.letter-sound, .read-word,
.read-match-word, .option,
.option-word, .cell, .word,
img, .option-audio, .nav-button,
.unselectable {
  user-select: none;
}

h2 {
  font-size: 32px;
  margin: 0;
  text-align: left;
  font-weight: 600;
}

.lang-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.speaker-task.play-button {
  height: 16px;
  width: 16px;
  padding: 12px 11px 12px 13px;
}

video {
  max-width: 100%;
}
/* General settings end here */









.main-container {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: auto;
}

/* Progress-bar for a chapter */
.progress-container-chapter {
  position: fixed;
  top: 0;
  left: 0px;
  right: 0px;
  background-color: var(--background);
  border: 1px solid var(--border);
  overflow: hidden;
  z-index: 1000;
}

.progress-bar-chapter {
  height: 30px;
  background-color: var(--place);
  width: 0%;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
}

.chapter-letter{
  position: fixed;
  left: 10px;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: white;
}



/* Upper menu: home and language selection */
.bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menu {
  width: 30px;
  background-color: var(--place);
  padding: 11px 50px;
  transition: background-color 0.3s;
}

.menu:hover {
  background-color: #aaa;
}

/* Language selection */
.dropdown {
  position: relative;
  display: inline-block;
  color: white;
  text-align: center;
}

.dropdown-selected {
  border: 1px solid var(--border);
  padding: 10px;
  cursor: pointer;
  position: relative;
  width: 200px;
}

/* Arrow */
.dropdown-selected::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  border: 6px solid transparent;
  border-top-color: white;
  transition: transform 0.3s ease;
}

.dropdown.open .dropdown-selected::after {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-options {
  display: none;
  position: absolute;
  border: 1px solid var(--border);
  z-index: 10;
}

.dropdown-option {
  padding: 10px;
  cursor: pointer;
  background-color: var(--white);
  color: gray;
  width: 200px;
}

.dropdown.open .dropdown-options {
  display: block;
  width: fit-content;
}

.dropdown-option:hover {
  color: white;
}

.ua:hover {
  background-color: #FFC04C;
}

.ar:hover {
  background-color: #52C2AE;
}

.dafa:hover {
  background-color: #69BAF7;
}

.so:hover {
  background-color: #B09653;
}

.de:hover {
  background-color: #F77E63;
}

.hidden-lang {
  display: none !important;
}
/* Upper menu ends here */





/* Exercise slider */
.slider-container {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 100%;
  gap: 20px;
}

.slider {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.exercise {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  width: fit-content;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
}

.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--place);
  color: white;
  padding: 11px;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  transition: background-color 0.3s;
}

.nav-button:hover {
  background-color: #aaa;
}

.nav-button-image {
  width: 30px;
  height: auto;
}
/* Slider ends here */



/* Audio buttons */
.speaker-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.speaker-task-background, .speaker-background, .lang-background {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow .3s ease;
  cursor: pointer;
}

.lang-background {
  transition: box-shadow .3s ease;
}

.speaker-task-background {
  background-color: var(--speaker-task);
}

.speaker-background {
  background-color: var(--speaker);
}

.play-button {
  height: 20px;
  width: 20px;
  padding: 10px;
}
/* Audio buttons end here */


/* Containers */
.letter-sound-container, /* Hören Sie. */
.audio-image, /* Hören Sie. - audio and picture */
.audio-sounds /* Hören Sie. - audio and picture (sound or syllable) */ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.random-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}


/* Main letter color */
.alpha-letter {
  color: var(--alpha);
  font-size: 1em;
  font-weight: bold;
}

/* Hovers */
.speaker-task-background:hover, .speaker-background:hover,
.lang-background:hover,
.image-item:hover, .card:hover, .letter-container-sound:hover,
.check-button:hover, .read-match-word:hover,
.option:hover,.option-word:hover,
.show-background:hover, .show-background-markieren:hover {
  box-shadow: 3px 3px 3px lightgray;
  cursor: pointer;
}

/* Progress-bar container */
.progress-container {
  width: calc(100% - 2px);
  height: 20px;
  background-color: var(--background);
  border: 1px solid var(--border);
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Progress-bar container, visible */
.progress-container.visible {
  opacity: 1;
}

/* Progress-bar */
.progress-bar {
  height: 100%;
  background-color: var(--correct);
  width: 0%;
  transition: width 0.5s ease;
}

/* Check button */
.check-button,
.show-background, .show-background-markieren {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 45px;
  cursor: pointer;
  border-width: 0;
  background-color: var(--check-button);
  transition: box-shadow .3s ease;
}

.show-background, .show-background-markieren {
  opacity: 0.3;
}

.img-check {
  width: 20px;
  height: 20px;
}

.read-match-word,
.option,
.option-word {
  display: flex;
  width: fit-content;
  padding: 10px;
  border: 1px solid var(--border);
  background-color: var(--background);
  transition: box-shadow .3s ease;
}

.picto {
  width: 40px;
  height: 40px;
  margin-left: 20px;
}

.check-button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.show-img {
  width:30px;
}


/* Settings for separate exercises */

/* Presentation */
#presentation {
  position: relative;
  max-width: 500px;
  overflow: hidden;
}

#pres-controls {
  display: flex;
  align-items: center;
  width: 500px;
  max-width: 800px;
  margin-top: -20px;
}

#pres-progressContainer {
  flex: 1;
  height: 10px;
  background: var(--background);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}

#pres-progress {
  height: 100%;
  width: 0%;
  background: #72c172;
}

#pres-playPause {
  margin-right: 10px;
  background: var(--place);
  border: none;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
}

#pres-playPauseIcon {
  width: 15px;
  height: 15px;
}

#presentation img {
  width: 100%;
  height: auto;
}











/* Hören Sie. /
Hören Sie und sprechen Sie nach. */
.letter-container {
  width: 250px;
  height: 250px;
  background-color: var(--reading-card);
  display: flex;
  justify-content: center;
  align-items: center;
}

.letter {
  font-size: 80pt;
  opacity: 0.6;
}

.listen-image {
  width: 170px;
  height: 140px;
  border: 1px solid var(--border);
}





/* Markieren Sie A/a. */
.sentences {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px 0;
}

.sentence {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 20px;
}

.words {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 60px;
}

.column {
  display: flex;
  flex-direction: column;
}

.word {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.letter-in-word {
  font-size: 28px;
  border: 1px solid white;
}

.letter-in-word:hover {
  background-color: var(--selected);
  cursor: pointer;
}

.examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.word img {
  width: 40px;
  height: 40px;
  padding-right: 10px;
}





/* SVL  */
.reading-words {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 20px;
}

.reading-word1,
.reading-word2 {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.reading-word1 {
  gap: 10px;
}

.left-card {
  margin-left: 10px;
}

.reading-card1,
.reading-card2 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--reading-card);
  height: 120px;
}

.reading-card1 {
  padding: 0 20px;
}

.reading-card2:hover {
  background-color: var(--selected);
}

.reading-letter.left {
  padding-left: 30px;
}

.reading-letter.right {
  padding-right: 30px;
}

.reading-letter {
  font-size: 5rem;
  margin: 0 0;
  opacity: 0.6;
}

.reading-card1 .reading-letter {
  opacity: 0.1;
}





/* Welche Wörter beginnen mit A? Hören Sie und klicken Sie das Bild an. */
.image-item {
  width: 150px;
  height: 120px;
  padding: 10px;
  border: 1px solid var(--border);
  background-color: var(--letter);
  transition: box-shadow .3s ease;
}





/* Welchen Laut hören Sie? Klicken Sie den Laut an. */
.sounds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.letter-container-sound {
  width: 200px;
  height: 200px;
  background-color: var(--reading-card);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow .3s ease;
}

.letter-sound {
  font-size: 60pt;
  opacity: 0.6;
}





/* Wo hören Sie A/a im Wort? Klicken Sie das graue Feld an. */
.places {
  width: 170px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 3px;
}

.place {
  width: 50%;
  height: 30px;
  background-color: var(--place);
}

.place:hover {
  cursor: pointer;
}

.no-cursor {
  width: 50%;
  height: 30px;
  background-color: var(--place);
  cursor: default;
}

.beispiel {
  background-color: var(--selected);
}





/* Hören Sie und lesen Sie. */
.audio-word-container, .word-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audio-word {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.read-word {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.syllable {
  border: 1px solid var(--selected);
  border-radius: 25px;
  padding: 5px 10px;
  pointer-events: none;
}





/* Lesen Sie. Was passt zusammen? */ 
.dropzones {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.dropzone {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 10px;
  border: 1px solid var(--border);
}

.options.random-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
  min-height: 100px;
  width: 600px;
  overflow: visible;
}

.dropzone,
.options.random-container {
  position: relative;
}

.option.hide {
  display: none;
}

.options {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.option-audio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.option {
  touch-action: none;
}

.name-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}




/* Hören Sie und lesen Sie mit. */
.lesen-mit-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}





/* Welches Wort sehen Sie im Satz? Klicken Sie das Wort an. */
.lesen-sentence {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.sentence-word-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.sentence-word {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.answers {
  display: flex;
  flex-wrap: nowrap;
}





/* Welche Wörter hören Sie? Klicken Sie die Wörter an. 
Welche Wörter hören Sie im Text? Klicken Sie die Wörter an. */ 
.audio-task {
  margin: 20px 0;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}





/* Suchen Sie und markieren Sie die Wörter. */
.matrix-arrows {
  display: grid;
  grid-template-columns: calc(100% - 30px) 30px;
  grid-template-rows: 30px calc(100% - 30px);
}

.matrix {
  display: grid;
  grid-template-columns: repeat(7, 50px);
  grid-gap: 5px;
  grid-column-start: 1;
}

.matrix-8 {
  grid-template-columns: repeat(8, 50px);
}

.word-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 40px;
  list-style: none;
}

.cell {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  cursor: pointer;
}

.cell.selected {
  background-color: var(--selected);
}

.cell.correct {
  background-color: var(--correct);
}

.cell.incorrect {
  background-color: var(--incorrect);
}

.word-found {
  text-decoration: line-through;
  color: var(--border);
}

.arrow {
  place-self: center;
}

.arrow-right {
  width: 80px;
  rotate: 180deg;
  padding-top: 10px;
}

.arrow-down {
  height: 14px;
  rotate: 270deg;
  padding-top: 10px;
}





/* Hotspot */
.hotspot-container {
  position: relative;
  display: inline-block;
}

.hotspot-container-mobile {
  display: none;
}
 
.hotspot {
  position: absolute;
  background-color: var(--selected);
  border-radius: 5px;
  display: block;
  opacity: 0;
}
 
 
.target-image {
  width: 700px;
  height: auto;
  padding: 10px;
  border: 1px solid var(--white);
}
 
.target-image.correct {
  background-color: var(--correct);
  border: 1px solid var(--border);
}
 
.target-image.incorrect {
  background-color: var(--incorrect);
  border: 1px solid var(--border);
}

.hotspot-correct {
  background-color: var(--correct);
  opacity: 0.5;
}
 
.hotspot-incorrect {
  background-color: var(--incorrect);
  opacity: 0.5;
}



/* Schreiben Sie A/a. Achten Sie auf das große A und das kleine a. */
.write-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.write-sentence {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.write-sentence-content {
    margin: 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

.write-sentence p {
  margin: 10px 0;
}

.write-input {
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  text-align: center;
  height: 10px;
  font-size: 24px;
  padding: 10px;
  border: 1px solid var(--border);
}

.write-input.word {
  width: 150px !important;
}



.selected {
  background-color: var(--selected); 
}  

.correct {
  background-color: var(--correct)
}  
  
.incorrect {
  background-color: var(--incorrect)
}

.correct-answers {
  background-color: var(--correct-answers);
}



/* Mobile version */
@media screen and (max-width: 1060px) {
  .main-container {
    width: 100%;
    gap: 10px;
  }
}

@media screen and (max-width: 800px) {
  body {
    margin-top: 30px;
  }

  .progress-bar-chapter {
    height: 20px;
  }

  .chapter-letter {
    font-size: 1rem;
    left: 5px;
  }

  .menu {
    padding: 11px;
  }

  .dropdown-option, .dropdown-selected {
    font-size: 1rem;
  }

  .dropdown-selected, .dropdown-option {
    width: 150px;
  }

  audio {
    width: 100%;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .random-container {
    gap: 10px;
  }

  .options.random-container {
    width: 100%;
  }

  .speaker.play-button, .svl.play-button {
    height: 16px;
    width: 16px;
    padding: 8px;
}

  .speaker-task.play-button {
    height: 14px;
    width: 14px;
    padding: 9px 8px 9px 10px;
  }

  .progress-container {
    height: 15px;
  }

  .check-button-container {
    gap: 10px;
  }
  
  p, div, li {
    font-size: 1.2rem;
  }
  
  .lesen-sentence p,
  .sentence-word p {
    margin: 0 0;
  }
  
  .letter-in-word {
    font-size: 1.5rem;
  }
  
  .words {
    gap: 5px 40px;
  }
  
  .sentences {
    gap: 0 0;
  }
  
  .sentence-word {
    gap: 0 10px;
  }
  
  .reading-word1{
    gap: 5px;
  }

  .reading-card1 {
    padding: 0 10px;
  }
  
  .reading-card1, .reading-card2 {
    height: 70px;
  }
  
  .reading-letter {
    font-size: 2rem;
  }

  .letter-container-sound {
    width: 150px;
    height: 150px;
  }

  .letter-sound {
    font-size: 50pt;
  }

  .matrix {
    grid-template-columns: repeat(7, 40px);
    grid-gap: 3px; 
  }
  
  .cell {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .word-list {
    margin: 0 0;
  }
  
  li {
    font-size: 1.2rem;
  }

  .image-container {
    gap: 20px 10px;
  }

  .dropzones {
    gap: 20px 30px;
  }

  .lesen-mit-container {
    gap: 10px;
  }

  .lesen-sentence p {
    font-size: 1.2rem;
  }

  /*  Hotspot */
  .hotspot-container {
    display: none;
  }

  .hotspot-container-mobile {
    position: relative;
    display: inline-block;
  }
  
  .target-image {
    width: 300px;
    padding: 10px;
    border: 1px solid var(--white);
  }
}

@media screen and (max-width: 500px) {
  #pres-controls {
    width: 100%;
  }
}