@import url('https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap');
/* @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: 'Raleway', sans-serif;

  /* Tamaños */
  --body__width--min: 550px; 
  --footer__font--size: 15px;
  --footer__height: 70px;
  --header__height: 140px;
  --h1__font--size: 40px;
  --h2__font--size: 26px;
  --item__font--size: 24px;
  --mini__height: 150px;       /*  Como funciona el min/max height width?? */
  --mini__width: 250px;

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

  /* Colores */
  --footer__background--color: rgba(3, 3, 3, 0.6);
  --header__background--color: rgba(105,105,105, 0.1);
  --footer__hover--color: #F5F5F5;
  --footer__link--color: #b3afaf;
  --footer__text--color: #FFFAFA;
  --list__background--color: rgba(135, 135, 135, 0.5);
  --item__text--color: black;
  --item__hover--color: rgba(27, 27, 27, 0.2);
  --item__background--color: rgba(243, 243, 243, 0.048);
  --mini__background--color: rgba(32, 32, 32, 0.384);

  /* Sombras  */
  --box__shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
  --text__shadow: 1px 1px 5px rgba(121, 124, 78, 0.5);
  --text__shadow--item01: 1px 1px 2px rgb(145, 145, 145);
  --text__shadow--item02: 1px 1px 6px rgba(17, 8, 8, 0.281);
  --text__shadow--item03: 1px 1px 6px rgba(0, 0, 0, 0.5);  

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

  /* Imágenes */
  --body__background--image: url("../img/triangle-mosaic.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);
  width: 100%;
  margin-left:auto;
  margin-right: auto;
  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);
}