:root {
  --navbar-height: 70px;
  --content-max-width: 1000px;
  --default-border-color: #6F5F8E; }

a {
  color: white; }
  a:hover {
    color: lightgrey; }

body {
  background: #281B41;
  margin: var(--navbar-height) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14pt;
  color: white; }

#ellipse-1 {
  position: absolute;
  width: 25vw;
  height: 25vw;
  left: 10vw;
  top: 8vh;
  background: #DA8CFF;
  opacity: 0.2;
  filter: blur(230px); }

#ellipse-2 {
  position: absolute;
  width: 25vw;
  height: 25vw;
  right: 10vw;
  bottom: 8vh;
  background: #6850FF;
  opacity: 0.2;
  filter: blur(230px); }

#navbar {
  background-color: #1E1E1E;
  height: var(--navbar-height);
  width: 100%;
  border-bottom: 2px solid var(--default-border-color);
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: content-box;
  line-height: var(--navbar-height);
  font-size: 1.5em; }
  #navbar .icon {
    padding: 12px 0;
    height: var(--navbar-height); }
  #navbar .logo {
    height: 25px; }
  #navbar .navbar-left {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    justify-content: flex-start; }
  #navbar .navbar-right {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    justify-content: flex-end; }

#content {
  margin-top: 50px; }

.box {
  --box-padding: 12px;
  background: linear-gradient(126.6deg, rgba(255, 255, 255, 0.12) 28.69%, rgba(255, 255, 255, 0) 100%);
  border: 2px solid var(--default-border-color);
  border-radius: 12px;
  color: white;
  padding: var(--box-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 50px;
  padding-right: 50px; }
  .box > .box-title {
    width: 100%;
    padding-bottom: var(--box-padding);
    display: flex;
    justify-content: center; }
  .box > .box-seperator {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 51.04%, rgba(255, 255, 255, 0) 100%); }
  .box > .box-content {
    padding-top: var(--box-padding);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; }

.centering {
  display: flex;
  flex-direction: column;
  align-items: center; }

/******************************************************************************
 * Components
 *****************************************************************************/
.measure {
  display: flex;
  justify-content: center;
  line-height: 1; }
  .measure > .value {
    font-weight: 700;
    font-size: 2.8em; }
  .measure > .unit {
    font-weight: 400;
    opacity: 0.6; }

#temperature-box {
  margin-bottom: 10px; }
  #temperature-box .measure {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px; }

.bar-indicator {
  width: 100%;
  display: flex;
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.3) 70%, rgba(0, 0, 0, 0.2) 100%);
  position: relative; }
  .bar-indicator > .sections {
    width: 100%;
    height: 15px;
    display: flex; }
    .bar-indicator > .sections > .section {
      z-index: -1;
      flex-grow: 1; }
      .bar-indicator > .sections > .section:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px; }
      .bar-indicator > .sections > .section:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px; }
  .bar-indicator > .indicator {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 13px;
    border: 3px solid white;
    left: 25%;
    top: -5px;
    background: #00BD1D; }

/******************************************************************************
 * Override Bootstrap
 *****************************************************************************/
.container {
  max-width: var(--content-max-width); }

/******************************************************************************
 * Utilities
 *****************************************************************************/
/*
.mt-1 {
    margin-top: 20px;
}

.mt-2 {
    margin-top: 40px;
}

.mb-1 {
    margin-bottom: 20px;
}

.mb-2 {
    margin-bottom: 40px;
}
*/

/*# sourceMappingURL=style.css.map */