/* Stern interface */

html.stern-ui {
   .interface {
      --topLight: var(--t);
      box-shadow: 0 0 6em 8em var(--bl);
   }

   .interface::before {
      background-color: var(--lg);

      box-shadow: 0 0 .5em var(--bl) inset;
      border: 0;
   }
}


#stern-interface {
   position: absolute;
   place-self: center;
   border-color: var(--t);

   &::before {
      display: none;
   }

   &::after {
      background-color: var(--lg);
      box-shadow: none;
      box-shadow: 0 0 .5em var(--bl) inset;
      border: 0;
   }

   #sys-info {
      color: var(--bl);
      font-weight: bold;
      opacity: .55;
      padding-left: 1em;
   }

   .inner {
      box-shadow: var(--shd), 0 0 2em var(--t) inset;
   }

   #right-menu {
      min-width: 10vw;

      p {
         padding: .5em !important;
      }
   }

   .bg-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      font-size: 10em;
      opacity: .1;
      pointer-events: none;
      margin: auto;
      --col: var(--t);
      filter: blur(4px);
   }

   .tip::before {
      content: none;
   }

   button {
      background-color: var(--t);
      border: .2em solid var(--lt);
      padding: .3em;
   }

}

#stern-date {
   background-color: var(--bl);
   grid-column: span 2;
   text-align: center;
   border-radius: .5em;
   padding: .25em;
   box-shadow: 0 0 .5em .25em var(--t) inset;
}

#stern-title {
   font-size: 2em;
   text-align: center;

   i {
      vertical-align: text-bottom;
   }

   &::after {
      content: '';
      display: block;
      height: 2px;
      border-radius: 1em;
      background-color: var(--w);
      width: 2em;
      margin: auto;
   }

}

.office-alert {
   font-size: 1.1rem;
   border: var(--brd);
   border-radius: .5em;
   padding: .25em;
   margin-top: .5em;
   text-align: center;
   transition: .3s;

   i {
      position: absolute;
      left: .5em;
      top: 0;
   }

   &:hover {
      box-shadow: 0 0 .5em var(--t) inset;
   }
}

.inner.end-view {
   text-align: center;
}

.end-metrics {
   position: absolute;
   width: 100%;
   text-align: center;
   right: 0;
   bottom: 0;

   padding-bottom: 1em;

   h4 {
      font-size: 1.2rem;
      text-decoration: underline;
   }
}

#end {
   position: absolute;
   place-self: center;
}

i.star {
   --c: rgb(255, 153, 0);

   height: 1px;
   width: 1px;
   background-color: var(--w);
   border-radius: 100%;
   box-shadow: 0 0 .5em var(--c);
   
      animation: appear 2s ease;
}

i.star.col1 {
   --c: rgb(104, 164, 255);
}

i.star.col2 {
   --c: rgb(255, 93, 64);
}

i.star.col3 {
   --c: rgb(186, 241, 255);
}