/* C U S T O M I Z A T I O N */

:root {
  --fgColor   : #ffffff; /* foreground color */
  --bgColor   : #212121; /* background color */
  --bgFilter  : rgba(0, 0, 0, 0.1); /* background image filter */
  --font      : "Roboto"; /* custom font */

  --animationSpeed  : 0.2s; /* speed for animations when hovering/resizing */
}


/*============================================================================*/

* {
  margin          : 0;
  padding         : 0;
  outline         : none;

  font-family     : var(--font), Roboto, "DejaVu Sans", sans-serif;
  text-decoration : none;

  transition      : ease-in-out var(--animationSpeed);
}

html {
  font-size       : 16px;
}

body {
  color           : var(--fgColor);
  background-color: var(--bgColor);
  background-image: linear-gradient(var(--bgFilter), var(--bgFilter)),
                    url("bg.jpg");
  background-size : cover;

  height          : 100vh;
  width           : 100vw;

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

a {
  color           : inherit;
}

.container {
  display         : flex;
}

.bigContainer {
  padding         : 48px 92px;
}

#middleContainer {
  flex-flow       : row nowrap;
}

#iconsContainer {
  flex-flow       : column;
  justify-content : center;
  align-items     : center;
}

.icon {
  margin          : 4px;
  margin-right    : 48px;
  opacity         : 50%;
  font-size       : 2rem;
}

#infoContainer {
  flex-flow       : column;
  align-items     : start;
  justify-content : center;
  max-width       : 480px;
}

#currentTime {
  font-size       : 5rem;
  font-weight     : 700;
  margin-top      : -16px;
}

#currentDate {
  font-size       : 1.5rem;
  margin-bottom   : 16px;
}

#quote {
  font-style      : italic;
  margin-bottom   : 8px;
} 
#quoteAuthor {
  opacity         : 50%;
}

#listContainer {
  flex-flow       : row wrap;
}

.listItem {
  font-size       : 1.1rem;
  opacity         : 50%;
  margin-right    : 24px;
}

.icon:hover,
.icon:focus,
.listItem:hover,
.listItem:focus {
  opacity         : 100%;
}

@media only screen and (max-width: 30rem) {
  html {
    font-size       : 16px;
  }
  body {
    justify-content : flex-start;
  }

  .bigContainer {
    padding         : 24px 48px;
  }

  #middleContainer {
    flex-flow       : column wrap;
  }
  
  #iconsContainer {
    flex-flow       : row wrap;
    justify-content : flex-start;
    align-items     : flex-start;
  }

  .icon {
    margin          : 16px;
  }
  
  .icon:last-of-type {
    margin-bottom   : 48px;
  }

  #listContainer {
    flex-flow       : column nowrap;
  }

  .listItem {
    margin          : 0;
    margin-bottom   : 16px;
  }
}