@import url("https://fonts.googleapis.com/css?family=Space+Mono");

html, body {
	width:100%;
	height:100%;
}
body {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to right top, #0f2a42, #3b0b17);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Space Mono';
    background-size: 200% 200%;
    color: white;
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow: hidden;
	animation: gradient 15s ease infinite;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.cam {
  border-radius: 10px;
}

.card {
  background: rgba(255,255,255, 0.06);
  padding: 0.5em;
  border-radius: 10px;
  border-left: 1px solid rgba(255,255,255, 0.3);
  border-top: 1px solid rgba(255,255,255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 20px 20px 40px -6px rgba(0,0,0, 0.2);
  text-align: center;
  max-height: 100%;
  max-width: 100%;
}

.page_grid {
  display: grid;
  grid-template-rows: 13fr 74fr 19fr;
  max-height: 100%;
  margin: 1em;
  row-gap: 1em;
}

.header_grid {
  display: grid;
  grid-template-columns: 20fr 60fr 20fr;
  height: 100%;
  width: 100%;
  column-gap: 1em;
}

.middle_grid {
  display: grid;
  grid-template-columns: 25fr 50fr 25fr;
  column-gap: 1em;
}

.middle_grid_left_side {
  display: grid;
  grid-template-rows: 1fr;
  height: 100%;
  row-gap: 1em;
}

.middle_grid_right_side {
  display: grid;
  grid-template-rows: 1fr 0.5fr;
  height: 100%;
  row-gap: 1em;
}

img {
  width: 100%;
}

.icon_table {
  display: grid;
  row-gap: 6em;
  margin: 3em;
  margin-bottom: 0px;
  overflow: hidden;
}

.filament_icon_table {
  display: grid;
  row-gap: 2.5em;
  margin: 1.5em;
  overflow: hidden;
}

.icon {
  height: 35px;
  width: auto;
}

.footer_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;
  column-gap: 1em;
}

h5 {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

p {
  margin: auto;
  word-break: break-all;
}

.icon_title {
  font-weight: bold;
}

.progress_bar_border {
  width: auto;
  margin: 1em;
  margin-top: 0em;
  border: 1px solid rgba(255, 255, 255, 0.856);
  height: 1em;
  border-radius: 1em;
  background-color: rgba(255, 255, 255, 0.151);
}

.progress_bar {
  height: 100%;
  background-image: linear-gradient(to right, #1db9ff, #a2a0ff, #fb7ad4);
  border-radius: 1em;
}

.status_div {
  margin-top: 1.5em;
  border: solid 5px rgba(255, 0, 0, 0);
}

.temperature_table {
  display: grid;
  margin: auto;
  margin-top: 2em;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 70%;
  column-gap: 1em;
  text-align: center;
}

.smarthome_grid {
  display: grid;
  margin: auto;
  margin-top: 2em;
  grid-template-columns: 1fr 1fr;
  width: 70%;
  column-gap: 1em;
  text-align: center;
}

.smarthome_icons {
  height: 50px;
  width: auto;
}

.chart_div {
  margin: auto;
  width: 80%;
}

.chart {
  max-height: 8em;
}

h4 {
  font-weight: bold;
  font-size: 1rem;
  margin-top: 0.5em;
  margin-bottom: 0.1em;
}

.chart_section_title_grid {
  display: grid;
  margin: auto;
  grid-template-columns: 1fr 8fr 1fr;
  width: 36%;
  text-align: center;
}

.chart_icon {
  margin-top: 6px;
  height: 25px;
  width: auto;
}

.headline_icon {
  margin-top:20px;
  height: 50px;
  width: auto;
}

.headline_grid {
  display: grid;
  margin: auto;
  margin-top: 8px;
  grid-template-columns: 1fr 8fr 1fr;
  width: 40%;
  text-align: center;
}



.random_color_picker {
  color: #1db7ffe7;
}