/* Home stylesheet: */

/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNS-Light"), local(".SFNSText-Light"),
    local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"),
    local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 300;
  src: local(".SFNS-LightItalic"), local(".SFNSText-LightItalic"),
    local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"),
    local("Segoe UI Light Italic"), local("Ubuntu Light Italic"),
    local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 400;
  src: local(".SFNS-Regular"), local(".SFNSText-Regular"),
    local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"),
    local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 400;
  src: local(".SFNS-Italic"), local(".SFNSText-Italic"),
    local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"),
    local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 500;
  src: local(".SFNS-Medium"), local(".SFNSText-Medium"),
    local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"),
    local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 500;
  src: local(".SFNS-MediumItalic"), local(".SFNSText-MediumItalic"),
    local(".HelveticaNeueDeskInterface-MediumItalicP4"),
    local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"),
    local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 700;
  src: local(".SFNS-Bold"), local(".SFNSText-Bold"),
    local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"),
    local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 700;
  src: local(".SFNS-BoldItalic"), local(".SFNSText-BoldItalic"),
    local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"),
    local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"),
    local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
}

:root {
  font-family: system-ui;
  /* (62.5/100) * 16px = 10px */
  font-size: 62.5%;
  /* 14px */
  --font-size--small: 1.4rem;
  /* 16px */
  --font-size--default: 1.6rem;
  /* 24px */
  --font-size--large: 2.4rem;
}

body {
  font-size: var(--font-size--default);
  min-height: 100vh;
}

.container {
  min-height: inherit;
  background-image: url(../img/pexels-pixabay-159711.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.adder {
  display: grid;
  grid-template-rows: 300px;
  justify-items: center;
  align-items: center;
}

.form {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: beige;
  border-radius: 5px;
  border-block-start: 5px solid lightskyblue;
  border-block-end: 5px solid lightskyblue;
}

.grid-checkbox {
  grid-template-columns: auto auto;
  display: grid;
  gap: 0.5rem;
}

.align-checkbox {
  margin-top: 0.2rem;
  accent-color: lightskyblue;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, 40ch);
  gap: 1rem;
  justify-content: center;
  padding-block-end: 1rem;
}

.card {
  display: grid;
  gap: 1rem;
  align-items: center;
  justify-items: center;
  background-color: beige;
  padding: 1rem;
  border-radius: 5px;
  border-block-start: 5px solid lightskyblue;
  border-block-end: 5px solid lightskyblue;
  text-align: center;
  word-break: break-word;
}

.bold-text {
  font-weight: bold;
}

.blue-button {
  background-color: lightskyblue;
  border: none;
  padding: 0.7rem;
  border-radius: 5px;
  transition: background-color 0.4s ease-in-out;
  font-weight: bold;
}

.blue-button:hover {
  background-color: rgb(75, 183, 250);
}

.hidden-alert {
  display: none;
}

/* Attributions:

- Photo by Pixabay: Books in Black Wooden Book Shelf, https://www.pexels.com/photo/books-in-black-wooden-book-shelf-159711/
- Favicon from https://favicon.io/
- SVG icons from https://materialdesignicons.com/

*/