/*@import url("images.css");*/

/* Generic Elements */

html {
  background-color: #000000;
  color: #ffffff;
  cursor: default;
  font-family: sans-serif;
  font: "droid sans";
  font-size: 8.42mm;
  overflow: hidden;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer and Edge */
            user-select: none; /* Chrome and Opera */
}

a {
  text-decoration: none;
  color: inherit;
}

.BigText {
    font-size: 1.5rem;
}
.SmallText {
    font-size: 0.9rem;
}
.SmallerText {
    font-size: 0.6rem;
}
.TinyText {
    font-size: 16px;
}
.TopicText {
    font-size: 38px;
}

/* Common Page Layout */

#Page {
  position: absolute;
  width: 25rem;
  height: 15rem;
  top: 50%;
  left: 50%;
  margin-top: -7.5rem;
  margin-left: -12.5rem;
  overflow: hidden;
  border: 0.03rem solid var(--light-color);
  box-sizing: border-box;
  background: #212121;
  text-align: center;
}

#Header
{
  position: absolute;
  width: 100%;
  height: 2.5rem;
  background: var(--light-color);
  color: var(--darktext-color);
  overflow: hidden;
}
#Body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 2.5rem;
  margin-left: -0.03rem;
  background: var(--dark-color);
  overflow: hidden;
}

/* Common Elements */

.BreadCrumb, .BreadCrumb-Active, .IconButton, .IconButton-Active, .IconButton-Right {
  position: relative;
  height: 2.25rem;
  min-width: 2.25rem;
  border: 0.1rem solid var(--dark-color);
  border-radius: 0.25rem;
  box-sizing: border-box;
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  margin-right: 0.31rem;
  float: left;
  font-size: 1rem;
  font-weight: bold;
  color: var(--dark-color);
  align-items: center;
  justify-content: center;
}

.BreadCrumb, .BreadCrumb-Active {
  padding: 0.375rem;
}

.BreadCrumb-Active, .IconButton-Active {
  border: 0.1rem solid var(--lighttext-color);
}

.IconButton-Right {
  float: right;
  margin-right: 0.125rem;
  margin-left: 0.31rem;
}

.Icon, .Icon-Red {
  height: 1.9rem;
  width: 1.9rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.08rem;
  margin-left: 0.03rem;
}

.Icon-Red {
  background: url(./svg/flame.svg) no-repeat top left;
  /*filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);*/
}
#HeatingButton {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

/*
.Clock {
  margin:0 right-floated-width 0 left-floated-width;
  width: 1rem;
  height: 2.5rem;
  text-align: center;
  font-size: 1.5rem;
}
*/

/* Media Queries */

@media only screen and (max-width: 22cm)
{
  html {
    font-size: 3.8vw;
  }
}

@media only screen and (max-height: 14cm)
{
  html {
    font-size: 6vh;
  }
}

@media only screen and (orientation: portrait) and (max-width: 15cm)
{
  html {
    font-size: 5.5vmin;
  }
  #Page {
    position: absolute;
    width: 12.5rem;
    height: 27.5rem;
    top: 50%;
    left: 50%;
    margin-left: -6.25rem;
    margin-top: -13.75rem;
  }
}

@media (device-width: 800px) and (device-height: 480px) {
  html {
    cursor: none;
    font-size: 8.465mm;
  }
  #Page {
    width: 800px;
    height: 480px;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-left: 0px;
  }
}