@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

/* --- */

:root {
  /* Fuentes */
  --font__main: "Open Sans", "Roboto", sans-serif;

  /* Tamaños */
  --body__width--min: 550px;
  --footer__font--size: 16px;
  --footer__height: 100px;
  --header__height: 120px;
  --h1__font--size: 40px;
  --h2__font--size: 26px;
  --item__font--size: 22px;
  --mini__height: 150px;
  --mini__width: 250px;

  /* Márgenes */
  --item__padding: 5px;
  --item__margin: 5px;
  --sections__gap: 40px;
  --item-components__gap: 20px;

  /* Colores */
  --footer__background--color: rgba(3, 2, 1, 0.5);
  --header__background--color: rgba(151, 141, 128, 0.5);
  --footer__hover--color: antiquewhite;
  --footer__link--color: #b3afaf;
  --footer__text--color: #d2d2d2;
  --list__background--color: rgba(142, 127, 108, 0.5);
  --item__text--color: darkorange;
  --item__hover--color: rgba(135, 143, 239, 0.5);
  --item__background--color: rgba(230, 210, 190, 0.5);
  --mini__background--color: rgba(255, 240, 220, 0.5);

  /* Sombras */
  --box__shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  --text__shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  --text__shadow--item01: 1px 1px 2px red;
  --text__shadow--item02: 0 0 1em blue;
  --text__shadow--item03: 0 0 0.2em blue;

  /* Bordes */
  --border__item: 1px solid #888;
  --border__lista: 1px solid #444;

  /* Imágenes */
  --body__background--image: url("../img/school.png");
}

/* --- */

html {
  font-family: var(--font__main);
}

body {
  min-height: 100vh;
  min-width: var(--body__width--min);

  margin: 0;

  background-image: var(--body__background--image);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- */

header {
  height: var(--header__height);

  background-color: var(--header__background--color);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  margin: 0;

  font-size: var(--h1__font--size);

  text-shadow: var(--text__shadow);
}

h2 {
  margin: 0;

  font-size: var(--h2__font--size);

  text-shadow: var(--text__shadow);
}

/* --- */

ul {
  width: 90%;

  border: var(--border__lista);
  margin: var(--sections__gap) auto;
  padding: 0;

  background-color: var(--list__background--color);

  list-style: none;
}

li {
  border: var(--border__item);
  margin: var(--item__margin);

  background-color: var(--item__background--color);
}

li:hover {
  background-color: var(--item__hover--color);
}

.item {
  height: var(--mini__height);
  width: 100%;

  padding: var(--item__padding);

  text-decoration: none;

  display: flex;
  align-items: center;
}

.item-icon {
  height: 100%;
  max-width: var(--mini__width);
  width: 100%;

  background-color: var(--mini__background--color);
  object-fit: contain;
  /*  object-fit: cover;*/
  /*  object-fit: fill;*/
  /*  object-fit: scale-down;*/

  box-shadow: var(--box__shadow);
}

.item-number {
  margin-left: var(--item-components__gap);

  font-size: var(--item__font--size);

  color: var(--item__text--color);
  text-shadow:
    var(--text__shadow--item01),
    var(--text__shadow--item02),
    var(--text__shadow--item03);

  flex: auto;
}

.item-name {
  margin-left: var(--item-components__gap);

  font-size: var(--item__font--size);

  color: var(--item__text--color);
  text-shadow:
    var(--text__shadow--item01),
    var(--text__shadow--item02),
    var(--text__shadow--item03);

  flex: auto;
}

/* --- */

footer {
  height: var(--footer__height);

  background-color: var(--footer__background--color);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer > p {
  margin: 0;

  font-size: var(--footer__font--size);

  color: var(--footer__text--color);
  text-shadow: var(--text__shadow);
}

footer > p > small > a {
  color: var(--footer__link--color);

  text-decoration: none;
}

footer > p > small > a:hover {
  color: var(--footer__hover--color);
}