feat: added original code

css/main.css

@@ -0,0 +1,247 @@
+body {
+  background: #EAE5C7;
+  font-family: 'Nixie One';
+  overflow-x: hidden;
+}
+
+.container {
+  width: 60% !important;
+}
+
+.cover {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  z-index: 1000;
+  background: black;
+}
+
+.cover>p {
+  text-align: center;
+  margin-top: 10%;
+}
+
+.periodic {
+  margin-top: -1.5%;
+}
+
+.gp1 {
+  background: #FF667C;
+}
+
+.gp2 {
+  background: #F29C61;
+}
+
+.gp3 {
+  background: #EDC85F;
+}
+
+.gp41 {
+  background: #54D39C;
+}
+
+.gp42 {
+  background: #50c593;
+}
+
+.gp5 {
+  background: #4EAEC4;
+}
+
+.gp6 {
+  background: #A46BB2;
+}
+
+.gp7 {
+  background: #888888;
+}
+
+.gpkk {
+  background-color: black;
+  color: white;
+}
+
+.element {
+  border: 1px solid black;
+  margin-right: -1px;
+  margin-bottom: -1px;
+}
+
+.element:hover {
+  border: 2px solid black;
+  background: black;
+  color: white;
+  cursor: pointer;
+}
+
+.no {
+  visibility: hidden;
+}
+
+.elename, .topleft, .topright, .botleft, .botright {
+  position: absolute;
+}
+
+.topleft, .topright, .botleft, .botright {
+  font-weight: 800;
+  font-size: 0.8em;
+}
+
+.elename {
+  font-weight: 900;
+  font-size: 2em;
+  left: 20%;
+  margin-top: 15%;
+}
+
+.topleft {
+  top: 0;
+  left: 5%;
+}
+
+.topright {
+  top: 0;
+  right: 5%;
+}
+
+.botleft {
+  bottom: -15px;
+  left: 5%;
+  font-size: 2em !important;
+}
+
+.botright {
+  bottom: 0px;
+  right: 5%;
+}
+
+.title {
+  margin-top: 4%;
+  border: 2px solid black;
+  padding: 15px;
+  text-align: center;
+  font-size: 1.4em;
+  position: relative;
+  left: 25%;
+  display: inline-block;
+}
+
+.ribbon {
+  font-size: 20px !important;
+  /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
+  width: 40%;
+  position: relative;
+  font-family: 'Nixie One';
+  font-size: 6em;
+  background: #F8D22C;
+  color: #222;
+  text-align: center;
+  padding: 1em 2em;
+  /* Adjust to suit */
+  margin: 2em auto 3em;
+  /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
+}
+
+.ribbon:before, .ribbon:after {
+  content: "";
+  position: absolute;
+  display: block;
+  bottom: -1em;
+  border: 1.5em solid #D6B228;
+  z-index: -1;
+}
+
+.ribbon:before {
+  left: -2em;
+  border-right-width: 1.5em;
+  border-left-color: transparent;
+}
+
+.ribbon:after {
+  right: -2em;
+  border-left-width: 1.5em;
+  border-right-color: transparent;
+}
+
+.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
+  content: "";
+  position: absolute;
+  display: block;
+  border-style: solid;
+  border-color: #B18F2F transparent transparent transparent;
+  bottom: -1em;
+}
+
+.ribbon .ribbon-content:before {
+  left: 0;
+  border-width: 1em 0 0 1em;
+}
+
+.ribbon .ribbon-content:after {
+  right: 0;
+  border-width: 1em 1em 0 0;
+}
+
+.subdescription1 {
+  text-align: center;
+  font-size: 0.85em;
+  font-weight: 800;
+  position: absolute;
+  margin-top: -3%;
+  display: block;
+}
+
+.subdescription2 {
+  font-size: 0.7em;
+  font-weight: 800;
+  position: absolute;
+  display: block;
+  margin-left: 63%;
+  margin-top: 4%;
+  padding-bottom: 4%;
+}
+
+.subdescription3 {
+  font-size: 0.7em;
+  font-weight: 800;
+  position: absolute;
+  display: block;
+  margin-left: 8%;
+  margin-top: 2%;
+  padding-bottom: 4%;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+  background: yellow;
+  padding: 5px;
+}
+
+.tooltip {
+  font-size: 0.8em;
+
+
+}
+
+.tooltip-inner {
+  text-align: left;
+  max-width: 350px;
+  /* If max-width does not work, try using width instead */
+  width: 350px;
+  line-height: 1.6;
+}
+
+/*.tooltip-inner {
+  max-width: 400px;
+   If max-width does not work, try using width instead
+  width: 400px;
+}*/
+@media (min-width: 1024px) {
+  .cover {
+    display: none
+  }
+}