@import url('https://fonts.googleapis.com/css?family=Orbitron');
:root {
  --primary-color: #ffffff;
  --secondary-color: #7c0000;
}

html,
body {
  /* https://css-tricks.com/couple-takes-sticky-footer/ */
  height: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
}


/* For sticky footer - grow to fill the space */
.content {
  flex: 1 0 auto;
}

.container {
  width: 90%;
  margin: 0 auto;
  overflow: none;
  padding: 10px;
}

.app-header {
  background: var(--primary-color);
  box-shadow: 3px 3px 10px #36344c;
}

.app-header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  justify-content: center;
  padding: 10px 10px;
}

.app-header .logo {
  width: 170px;
  margin-bottom: 1rem;
}

.app-header input[type='text'] {
  padding: 7px;
  border: #777;
  width: 300px;
  border-radius: 3px;
}

.subheader {
  background: #36344c;
  color: #fff;
  box-shadow: 3px 3px 10px #888888;
  font-size: 14px;
  padding: 5px;
  width: 90%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subheader p {
  margin: 4px;
}

.subheader img {
  width: 40px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10%;
}

.grid .item {
  display: flex;
  flex-direction: column;
  border: 1px #ccc solid;
  padding: 5px;
  box-shadow: 2px 3px 4px #ccc;
}

.grid .item h4 {
  margin-bottom: 5px;
}

.grid .item p {
  font-size: 14px;
  color: var(--secondary-color);
  font-weight: bold;
  margin-bottom: 10px;
}

.grid .item img {
  width: 30px;
  text-align: right;
  display: block;
  align-self: flex-end;
}

.app-footer {
  flex-shrink: 0;
  background: #f4f4f4;
  color: #444;
  /*padding: 10px;*/
  font-size: 12px;

}

.app-footer ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.app-footer ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-footer ul li i {
  font-size: 22px;
}

/* Splash */
#splash {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--primary-color);
  height: 100vh;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 1s;
}

#splash img {
  width: 300px;
}

#splash.fade {
  opacity: 0;
}

/*CLOCK START*/

/*body {*/
/*  background-color: #121212;*/
/*}*/



/*CLOCK END*/

/* Desktop */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid .item img {
    width: 60px;
  }
}