/* Start General Stuff */

/* Bootstrap icons */
/* @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"); */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  /* to prevent text lines breaking at spaces */
  white-space: nowrap;
  /* hide text which does not fit inside its element */
  overflow: auto;
  overflow-y: auto;
  /* ellipsis: hint on hidden text (overflown) by "..." */
  text-overflow: clip;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizeSpeed;
  /* line-height: 1.5; */

  /* color: hsl(130, 60%, 66%); */
  /* font-size: 1.25rem; */
  /* background-color: hsl(204, 6%, 17%); */
  color: hsl(120, 1%, 21%);
  /* font-size: 1.25rem; */
  /* background-color: hsl(210, 17%, 98%); */
  background: #eeeeee;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

body {
  /* place-content: center; */

  /* font-family: var(--ff-primary); */
  /* font-weight: var(--fw-400); */

  /* background-color: hsl(var(--clr-neutral-200)); */
}

h1,
h2,
h3 {
  font-weight: var(--fw-700);
}

/* Root font-size on the document level */
html {
  font-size: 20px;
}

@media (max-width: 900px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  html {
    font-size: 12px;
  }
}

/* End General Stuff */

/* Start Layout Related */
main {
  /* overflow: hidden; */
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;

  /* color: hsl(130, 60%, 66%); */
  /* font-size: 1.25rem; */
  /* background-color: hsl(204, 6%, 17%); */
  color: hsl(120, 1%, 21%);
  /* font-size: 1.25rem; */
  /* background-color: hsl(210, 17%, 98%); */
}

.main-rows-wo-trans {
  grid-template-rows:
    auto
    auto
    auto
    auto
    1fr
    auto
    auto;
}

.main-rows-w-trans {
  grid-template-rows:
    auto
    auto
    auto
    auto
    3fr
    2fr
    auto
    auto;
}

.main-rows-w-buttons {
  grid-template-rows:
    auto
    auto
/*    auto ==> for editor */
    1fr
    auto
    auto
    auto;
}

/* .player-container {
  display: grid;
  grid-template-columns: 5fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
} */

.columns {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 2fr;
  /*==> repeat(3, 1fr)*/
}

.grid-col-span-2 {
  grid-column: span 2;
}

/* End Layout Related */

/* Start Styling Related */
.header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr;
  gap: 1rem;
  justify-items: center;
  justify-self: normal;
  align-items: center;
  /* align-self: normal; */
  text-align: center;

  /* color: hsl(214, 69%, 47%); */
  color: #444;
  font-size: 1rem;
  padding: 0.2rem 0.5rem;
  line-height: normal;
}

.footer-container {
  display: grid;
  /* grid-template-columns: auto auto auto auto auto; */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 0.6rem;
  grid-template-rows: 1fr;
  justify-items: center;
  justify-self: normal;
  align-items: center;
  align-self: normal;
  height: 100%;
  /* outline-color: rgb(234, 246, 9);
  outline-style: solid; */
}

.footer {
  /* max-width: 90%; */
  /* place-content: center; */
  /* align-content: center;
  justify-content: end;*/
  /* align-self: right; */
  /* justify-self: right; */
  justify-self: center;
  color: hsl(0, 87%, 50%);
  font-size: 1.2rem;
  padding: 0.1rem 0.3rem;
  line-height: normal;
  /* outline-color: rgb(220, 161, 12);
  outline-style: solid; */
  /* min-height: 100vh; */

  /* font-family: var(--ff-primary); */
  /* font-weight: var(--fw-400); */

  /* background-color: hsl(var(--clr-neutral-200)); */
}

.title {
  max-width: 80%;
  justify-self: center;
  /* color: hsl(107, 64%, 50%); */
  color: black;
  font-size: 2.2rem;
  font-weight: bolder;
  padding: 0.2rem 0.5rem;
  /* outline-color: rgb(12, 64, 220);
  outline-style: solid; */
}

.subtitle {
  max-width: 80%;
  justify-self: center;
  /* color: hsl(107, 34%, 50%); */
  color: #444;
  font-size: 1.4rem;
  padding: 0.2rem 0.5rem;
  /* outline-color: rgb(220, 12, 106);
  outline-style: solid; */
}

.slider-container {
  display: grid;
/*  grid-template-columns: 1fr 5fr 1fr 1fr; ==> for editor */
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  /* justify-self: normal; */
  align-items: center;
  /* align-self: normal; */
  text-align: left;
  height: 100%;
  accent-color: hsl(221, 44%, 41%);
  /* outline-color: rgb(234, 246, 9);
  outline-style: solid; */
}

.text-buttons {
  max-width: fit-content;
  padding: 0.3rem;
  color: hsl(221, 44%, 41%);
  font-size: 3rem;
}

.continuous-on {
  color: hsl(125, 84%, 51%);
}

.card-ady {
  display: flex;
  /* flex-wrap: wrap; */
  white-space: break-spaces;
  word-wrap: break-word;
  /* hide text which does not fit inside its element */
  overflow: auto;
  /* ellipsis: hint on hidden text (overflown) by "..." */
  text-overflow: clip;
  font-family: "Andika", sans-serif;
  /* font-weight: 100; */
  /* font-size: 2.1rem; */
  /* font-size: 6.1vw; */
  font-size: calc(19px + 0.390625vw);
  background-color: #fff;
  /* background-color: #ccc; */
  border-radius: 0.8rem;
  width: 95%;
  height: 95%;
  margin: 5% auto;
  padding: 0.4rem;
  color: #222;
  /* box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; */
  box-shadow: 0 0 0.5rem #999999;
  /* box-shadow: 0 0 80px #999999; */
  /* transition: box-shadow 0.2s ease-in-out; */
  /* vertical-align: middle; */
  /* align-items: center; */
  align-items: center;
  justify-content: center;
  text-align: center;
  /* align-self: center; */
  /* align-content: center; */
}

.card-translation {
  display: flex;
  white-space: break-spaces;
  word-wrap: break-word;
  /* hide text which does not fit inside its element */
  overflow: auto;
  /* ellipsis: hint on hidden text (overflown) by "..." */
  text-overflow: clip;
  font-family: "Andika", sans-serif;
  /* font-weight: 100; */
  /* font-size: 2.1rem; */
  font-size: calc(19px + 0.390625vw);
  background-color: rgb(233, 232, 232);
  /* background-color: #ccc; */
  border-radius: 0.8rem;
  width: 95%;
  height: 95%;
  margin: 5% auto;
  padding: 0.4rem;
  color: rgb(134, 133, 133);
  /* box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; */
  box-shadow: 0 0 0.5rem #999999;
  /* box-shadow: 0 0 80px #999999; */
  /* transition: box-shadow 0.2s ease-in-out; */
  /* vertical-align: middle; */
  /* align-items: center; */
  align-items: center;
  justify-content: center;
  text-align: center;
  /* align-self: center; */
  /* align-content: center; */
}

.buttons-editor {
  display: grid;
  /* grid-template-columns: auto auto auto auto auto; */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
  grid-template-rows: 1fr;
  justify-items: center;
  justify-self: stretch;
  align-items: center;
  align-self: normal;
  height: 100%;
  /* outline-color: rgb(234, 246, 9);
  outline-style: solid; */
}

.audio-player {
  width: 100%;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.audio-player-container {
  width: 100%;
}

/* End Styling Related */

/* comments ....

Sample code from Kevin Powell::
https://github.com/kevin-powell/learn-grid-the-easy-way
https://www.youtube.com/watch?v=rg7Fvvl3taU


inheritance


cascading


box mode:
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: #333;
  font-size: 1.25rem;
}


specificıty
naming
layout
content vs. layout

media query:
// Root font-size on the document level
html {
  font-size: 20px;
}

@media (max-width: 900px) {
  html { font-size: 16px; }
}

@media (max-width: 400px) {
  html { font-size: 12px; }
}

em vs. rem:
em: font size relative to closest parent's font size.
rem: font size relative to root's (html's) font size.

grid:
.columns {
  display: grid;
  gap: 1em;
  grid-template-columns:  1fr 1fr 1fr; ==> repeat(3, 1fr)
}
fr: fraction, e.g. in the above example there are 3 fractions, and each column has 1 fraction, namely a 1/3.

.grid-col-span-2 {
  grid-column: span 2;
}
*/