html {
  min-height:       100%;
  min-width:        100%;

  margin:           0;

  color:            var(--RwText);
  background-color: var(--RwBackground0);
  background-image: radial-gradient(at 100% 100%, var(--RwBackground0), var(--RwBackground1));

  font-family:      "Montserrat", sans-serif;
  font-size:        90%;
}

h1, h2, h3, h4, th {
  font-family:      "Ubuntu", sans-serif;
  white-space:      nowrap;
}

a {
  color:            var(--RwLink);
}

a:hover,
a:active {
  color:            var(--RwLinkHover);
}

th {
  vertical-align:   baseline;
  text-align:       left;
}

.strong {
  font-weight:      500;
}

#content {
  position:         absolute;
  top:              50%;
  left:             50%;
  translate:        -50% -50%;
}

#logo {
  position:         absolute;
  top:              50%;
  left:             50%;
  width:            25%;
  height:           25%;
  z-index:          -100;
  translate:        -50% -50%;
}

.subject {
  position:         absolute;
  width:            30%;
  height:           30%;
  z-index:          0;
  translate:        -50% -50%;

  background:       var(--RwPaper);
  border:           1px solid var(--RwEdge);
  border-radius:    50%;
  padding:          0em 0.1em 0.1em;

  overflow:         hidden;
  cursor:           zoom-in;

  transition:       top 0.5s,
                    left 0.5s,
                    width 0.5s,
                    height 0.5s,
                    z-index 0.5s,
                    border-radius 0.5s,
                    padding 0.5s;
}

.subject h2 {
  margin:           0.125em 0 0.1875em;

  text-align:       center;

  transition:       margin 0.5s;
}

.subjImage {
  position:         relative;
  left:             0;
  height:           40%;
  max-width:        100%;
  translate:        0 0;

  border-bottom:    1px solid var(--RwEdge);
  border-radius:    0;

  transition:       left 0.5s,
                    translate 0.5s,
                    border-radius 0.5s;
}

.subjSummary {
  position:         fixed;
  left:             50%;
  width:            7em;
  translate:        -50% 0%;

  margin:           0;

  text-align:       center;

  transition:       opacity 0.5s;

}

.subjDetail {
  display:          none;
  position:         relative;
  width:            100%;
  height:           53%;
  overflow-y:       auto;

  opacity:          0%;

  transition:       opacity 0.5s;
}

.subject:hover {
  border:           3px solid var(--RwEdge);
}

.subject.focused {
  width:            80%;
  height:           80%;
  z-index:          100;

  border-radius:    5%;
  padding:          1em;

  cursor:           zoom-out;
}

.subject.focused:hover {
  border:           1px solid var(--RwEdge);
}

.subject.focused .subjImage {
  left:             50%;

  translate:        -50% 0%;

  border:           0;
  border-radius:    1em;
}

.subject.focused h2 {
  margin:           0.125em 0 0.25em;
}

.hoverOver {
  color:            var(--RwLink);

  cursor:           text;
}

.hoverOver:hover {
  color:            var(--RwLinkHover);
}

.hoverPopup {
  display:          none;
  position:         fixed;
  left:             7em;

  background:       var(--RwPaper);
  border:           1px solid var(--RwEdge);
  border-radius:    0.5em;
  padding:          0.25em;
  margin-top:       -0.01em;

  cursor:           default;
}

.hoverOver:hover + .hoverPopup,
.hoverPopup:hover {
  display:          block;
}

.actionImage {
  width:            1.8em;
}

#copyright {
  position:         absolute;
  left:             0;
  bottom:           0;

  padding:          0.5em;

  font-size:        70%;
}

#debug {
  position:         absolute;
  right:            0;
  bottom:           0;

  padding:          0.5em;

  font-size:        25%;
}

#debug:hover {
  color:            black;
  background:       white;
  border:           1px solid black;
  padding:          1em;

  font-size:        100%;
}