@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100;0,500;1,400&display=swap');

*
{
  background-color: #011c20;
  color:            white;
  width:            auto;
  margin:           0;
  padding:          0;
  font-family:      'Azeret Mono', monospace;
  font-size:        14px;
  border-width:     0px;
  border-style:     none;
  border-color:     black;
  border-image:     none;
}

iframe
{
  background-color: inherit;
}

header
{
  left:             0;
  top:              0;
  background-color: #08a4bf;
  height:           64px;
  box-shadow:       -8px 8px 2px #001113;
}

header #icon 
{
  background-color: inherit;
  position:         relative;
  padding:          8px;
  margin:           8px;
  float:            left;
  width:            32px;
  height:           32px;
}

header #name
{
  background-color: inherit;
  height:           100%;
  display :         flex;
  align-items :     center;
  font-size:        24px;
}

header #frame 
{
  background-color: red;
}

header #spinner
{
  background-color: inherit;
  position:         absolute;
  top:              16px;
  right:            16px;
  width:            32px;
  height:           32px;
  font-size:        24px;
}

.panel
{
  background-color: #08a4bf;
  padding:          16px;
  margin:           16px;
  border-radius:    8px;
  box-shadow:       -8px 8px 2px #001113;
}

.centered
{
  position:         fixed;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%); 
}

.centered2 
{
  position:         relative;
  display:          flex;
  align-items:      center;
}

footer
{
  position:         fixed;
  width:            100%;
  left:             0;
  bottom:           0;
  background-color: #08a4bf;
  color:            inherit;
  display :         flex;
  align-items :     center;
  height:           32px;
}

footer #date
{
  background-color:inherit;
  position:relative;
  float:left;
  margin:8px;
}