/* 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 {
  grid-template-rows:
    auto
    auto
    1fr
    1fr;
}

/* 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; */
}

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

.card-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0rem;
  grid-template-rows: 1fr auto;
  justify-items: center;
  justify-self: stretch;
  justify-content: center;
  align-items: center;
  align-self: normal;
  text-align: center;
  height: 100%;

  background-color: #fff;
  border-radius: 0.3rem;
  width: 95%;
  height: 95%;
  margin: 2% auto;
  padding: 0.1rem;
  color: #222;
  box-shadow: 0 0 0.5rem #999999;
}

.card-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0rem;
  grid-template-rows: 1fr auto;
  justify-items: center;
  justify-self: stretch;
  justify-content: center;
  align-items: center;
  align-self: normal;
  text-align: center;
  height: 100%;

  background-color: #fff;
  border-radius: 0.3rem;
  width: 95%;
  height: 95%;
  margin: 2% auto;
  padding: 0.1rem;
  color: #222;
  box-shadow: 0 0 0.5rem #999999;
}

.textarea-common {
  height: 100%;
  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-weight: 100; */
  font-size: 1.5rem;
  resize: none;
}

.textarea-top {
  font-family: "Abel", sans-serif;
}

.textarea-bottom {
  font-family: "Andika", sans-serif;
}

.buttons-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* grid-template-columns: auto auto auto auto; */

  grid-template-rows: 1fr;
  gap: 0.1rem;
  margin-bottom: 0.2rem;
  margin-top: 0.1rem;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  justify-items: space-around;
  justify-self: stretch;
  align-items: center;
  align-self: normal;
  text-align: center;
  height: 100%;
}

.button-font {
  font-size: 0.8rem;
  font-family: "Alef", sans-serif;
}

/* Tabs */
/*
body {
  margin: 50px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 400px;
  font-family: sans-serif;
}

.tabs__label {
  padding: 10px 16px;
  cursor: pointer;
}

.tabs__radio {
  display: none;
}

.tabs__content {
  order: 1;
  width: 100%;
  border-bottom: 3px solid #dddddd;
  line-height: 1.5;
  font-size: 0.9em;
  display: none;
}

.tabs__radio:checked + .tabs__label {
  font-weight: bold;
  color: #009578;
  border-bottom: 2px solid #009578;
}

.tabs__radio:checked + .tabs__label + .tabs__content {
  display: initial;
}
*/

/* 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;
}
*/