LunamareStartium/LunamareStartium.min.css

@charset "UTF-8";
/* 
sass LunamareStartium.scss LunamareStartium.min.css
*/
.invisible {
  opacity: 0 !important;
}

/* Color Scheme */
html {
  height: 100%;
  width: 100%;
}
html body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #000214;
}
html body #main {
  display: inline-flex;
  width: 900px;
  height: 900px;
  position: relative;
  /* mark as anchor for absolute children */
  /*background-color: green; /* transparent once done debugging */
}

#main #album-cover {
  pointer-events: none;
  background-image: url("./albumcover-1.png");
  background-position: center;
  background-size: cover;
  background-color: #8637c7;
  border-radius: 5px;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  -webkit-transition: transform 300ms;
  -moz-transition: transform 300ms;
  -o-transition: transform 300ms;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -o-transform-origin: center left;
}
#main:hover #album-cover {
  transition: opacity 0.6s;
  opacity: 0;
}

#table-of-contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 1;
}
#table-of-contents #priority {
  height: 100%;
  width: 230px;
  position: absolute;
  top: 0px;
  right: -50px;
  z-index: 1;
}
#table-of-contents #priority > div {
  display: inline-block;
  height: 200px;
  width: 200px;
  margin: 15px;
  padding: 15px;
  background-color: #242a6d;
  border-radius: 5px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
}
#table-of-contents #priority > div header {
  color: #ff618f;
  font-family: Impact, Charcoal, sans-serif;
  font-size: 17pt;
  -webkit-transform: scale(1.3, 1);
  -moz-transform: scale(1.3, 1);
  -o-transform: scale(1.3, 1);
  text-align: center;
}
#table-of-contents #misc {
  align-self: flex-end;
  height: 100%;
  width: 870px;
  position: relative;
  background-color: #fba2c2;
  z-index: 2;
  border-radius: 5px;
  padding: 15px;
}
#table-of-contents .group {
  /*background-color: gray;*/
}
#table-of-contents .group header {
  text-align: center;
  font-size: 17pt;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: 600;
  color: #462ea7;
}
#table-of-contents .group ul {
  text-align: center;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style: none;
  margin-top: 4px;
}
#table-of-contents .group ul li {
  font-size: 12pt;
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #ff2a5e;
  text-decoration: underline;
  text-decoration-color: #b98afd;
}
#table-of-contents .group ul li::before {
  content: "•";
  /* \2022 is the CSS Code/unicode for a bullet */
  color: #b98afd;
  font-weight: bold;
  /* If you want it to be bold */
  display: inline-block;
  /* Needed to add space between the bullet and the text */
  width: 1em;
  /* Also needed for space (tweak if needed) */
  margin-left: -1em;
  /* Also needed for space (tweak if needed) */
}

/*# sourceMappingURL=LunamareStartium.min.css.map */