From 95985eb92a5e3c6cf96f86d3b51714415d5669d0 Mon Sep 17 00:00:00 2001
From: Christian Klein <chris+git@yokta.de>
Date: Thu, 6 May 2021 14:51:24 +0200
Subject: [PATCH] Small changes to fix styles that were broken by refactoring

---
 out/css/pc.css | 810 +++++++++++++++++++++++++------------------------
 out/js/pc.js   |   2 +-
 2 files changed, 418 insertions(+), 394 deletions(-)

diff --git a/out/css/pc.css b/out/css/pc.css
index 2ac395e..ee230d8 100644
--- a/out/css/pc.css
+++ b/out/css/pc.css
@@ -1,88 +1,88 @@
 /* COLORS  */
 .pc .ram {
-  background-color: var(--color-ram);
-  color: var(--color-ram-text);
+    background-color: var(--color-ram);
+    color: var(--color-ram-text);
 }
 
 .pc .cu {
-  background-color: var(--color-cu);
-  color: var(--color-cu-text);
+    background-color: var(--color-cu);
+    color: var(--color-cu-text);
 }
 
 .pc .alu {
-  background-color: var(--color-alu);
-  color: var(--color-alu-text);
+    background-color: var(--color-alu);
+    color: var(--color-alu-text);
 }
 
 .pc .section h1.header {
-  background-color: var(--color-header);
-  color: var(--color-header-text);
+    background-color: var(--color-header);
+    color: var(--color-header-text);
 }
 
 
 /* TABLE COLORS */
 .pc .ram .scroller table thead.head th {
-  background-color: var(--color-table-ram-head);
-  color: var(--color-table-ram-head-text);
+    background-color: var(--color-table-ram-head);
+    color: var(--color-table-ram-head-text);
 }
 
 .pc .cu .scroller table thead.head th {
-  background-color: var(--color-table-cu-head);
-  color: var(--color-table-cu-head-text);
+    background-color: var(--color-table-cu-head);
+    color: var(--color-table-cu-head-text);
 }
 
 .pc .scroller table tr td {
-  background-color: var(--color-table-row);
-  color: var(--color-table-text);
-  border-bottom: 1px solid var(--color-table-border);
+    background-color: var(--color-table-row);
+    color: var(--color-table-text);
+    border-bottom: 1px solid var(--color-table-border);
 }
 
 .pc .scroller table tr:nth-child(even) td{
-  background-color: var(--color-table-row-alt);
+    background-color: var(--color-table-row-alt);
 }
 
 .pc .scroller table tr.empty td {
-  color: var(--color-table-text-empty);
+    color: var(--color-table-text-empty);
 }
 
 .pc .ram .scroller table tr.current td {
-  background-color: var(--color-table-ram-highlight);
-  color: var(--color-table-ram-highlight-text);
+    background-color: var(--color-table-ram-highlight);
+    color: var(--color-table-ram-highlight-text);
 }
 
 .pc .cu .scroller table tr.current td {
-  background-color: var(--color-table-cu-highlight);
-  color: var(--color-table-cu-highlight-text);
+    background-color: var(--color-table-cu-highlight);
+    color: var(--color-table-cu-highlight-text);
 }
 
 
 .pc button,
 .pc .button{
-  text-transform: none !important;
-  font-weight: 600;
-  height: 2.5em;
-  line-height: 1em;
-  margin: 0;
-  vertical-align: top;
-  padding: 0.25em 2em;
+    text-transform: none !important;
+    font-weight: 600;
+    height: 2.5em;
+    line-height: 1em;
+    margin: 0;
+    vertical-align: top;
+    padding: 0.25em 2em;
 }
 
 /* CONTROLS COLORS */
 .controls button, .controls .button {
-  /* background-color: whitesmoke; */
-  color: var(--color-controls-button-text);
-  border-color: var(--color-controls-button-border);
+    /* background-color: whitesmoke; */
+    color: var(--color-controls-button-text);
+    border-color: var(--color-controls-button-border);
 }
 .controls button:hover, .controls .button:hover{
-  color: var(--color-controls-button-text-hover);
+    color: var(--color-controls-button-text-hover);
 }
 
 .pc .controls .checker::before {
-  border: 1px solid var(--color-controls-button-border);
+    border: 1px solid var(--color-controls-button-border);
 }
 
 .pc .controls .checker.checked::before {
-  color: var(--color-controls-button-text);
+    color: var(--color-controls-button-text);
 }
 
 
@@ -90,204 +90,224 @@
 /* FORMATTING STUFF */
 
 .pc {
-  /*height: 400px;
-  height: 99vh;*/
+    /*height: 400px;
+    height: 99vh;*/
 
-  box-sizing: border-box;
+    box-sizing: border-box;
 
-  padding: 1em;
+    padding: 1em;
 
-  display: grid;
-  grid-template-columns: auto auto auto;
-  /* grid-template-columns: max-content auto max-content; */
-  gap: 9px;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    /* grid-template-columns: max-content auto max-content; */
+    gap: 9px;
 }
 
 .pc .grid-fullwidth{
-  grid-column: 1 / span 3;
+    grid-column: 1 / span 3;
+}
+
+.pc .pc-main {
+    width: 100%;
+    grid-column: 1 / span 3;
+}
+
+.pc .pc-main > div {
+    /*height: 400px;
+    height: 99vh;*/
+    width: 100%;
+
+    box-sizing: border-box;
+
+    padding: 1em;
+
+    display: grid;
+    grid-template-columns: auto auto auto;
+    /* grid-template-columns: max-content auto max-content; */
+    gap: 9px;
 }
 
 .pc .section {
-  min-height: 25em;
-  max-height: calc(80vh - 8em);
-  min-width: 20%;
+    min-height: 25em;
+    max-height: calc(80vh - 8em);
+    min-width: 20%;
 
-  box-sizing: border-box;
-  padding: 2.5em 1em 1em 1em;
+    box-sizing: border-box;
+    padding: 2.5em 1em 1em 1em;
 
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 
-  position: relative;
-  /*top: 0;
-  left: 0;*/
+    position: relative;
+    /*top: 0;
+    left: 0;*/
 }
 
 .pc .section h1.header {
-  font-size: 1.2em;
-  position: absolute;
-  top: 3px;
-  left: 4px;
-  padding: 3px;
+    font-size: 1.2em;
+    position: absolute;
+    top: 3px;
+    left: 4px;
+    padding: 3px;
 }
 
 .pc .row {
-  display: flex;
-  justify-content: space-evenly;
+    display: flex;
+    justify-content: space-evenly;
 }
 
 .pc .scroller {
-  overflow-x: auto;
-  overflow-y: scroll;
+    overflow-x: auto;
+    overflow-y: scroll;
 
-  /*position: relative;*/
+    /*position: relative;*/
 
-  /* max-height: 60%; */
-  padding: 0;
-  box-sizing: border-box;
+    /* max-height: 60%; */
+    padding: 0;
+    box-sizing: border-box;
 
-  width: 100%;
-  margin: 1em 0 0 0;
+    width: 100%;
+    margin: 1em 0 0 0;
 }
 
 .pc .scroller:last-child {
-  margin-bottom: -1em;
+    margin-bottom: -1em;
 }
 
 .pc .scroller table {
-  margin: 0;
+    margin: 0;
 }
 
 .pc .scroller table thead.head {
-  position: sticky;
-  top: -2px;
-  left: 0;
-  height: 1em;
-  padding: 1em;
+    position: sticky;
+    top: -2px;
+    left: 0;
+    height: 1em;
+    padding: 1em;
 
-  transition: 0.2s;
+    transition: 0.2s;
 }
 
 .pc .scroller table thead th {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
 }
 
 .pc .scroller table thead.head.shrunk {
-  height: .5rem;
-  font-size: .8em;
+    height: .5rem;
+    font-size: .8em;
 }
 
 .pc .scroller table thead.head th {
-  padding: 12px 4px 12px 15px;
-  transition: 0.2s;
+    padding: 12px 4px 12px 15px;
+    transition: 0.2s;
 }
 
 .pc .scroller table thead.head.shrunk th {
-  padding-top: .2em;
-  padding-bottom: .2em;
+    padding-top: .2em;
+    padding-bottom: .2em;
 }
 
 .pc .scroller table .num {
-  text-align: right;
-  white-space: nowrap;
+    text-align: right;
+    white-space: nowrap;
 }
 
 .pc .scroller table td:first-child,
 .pc .scroller table td:last-child {
-  padding: 12px 15px;
+    padding: 12px 15px;
 }
 
 .pc .scroller table tr.empty td {
-  padding: 3px 15px;
+    padding: 3px 15px;
 }
 
 .pc .scroller table tbody button:last-child {
-  text-decoration: none;
-  text-transform: none;
-  height: max-content;
-  line-height: 2em;
-  font-weight: normal;
-  font-size: inherit;
-  padding: 0px 10px;
+    text-decoration: none;
+    text-transform: none;
+    height: max-content;
+    line-height: 2em;
+    font-weight: normal;
+    font-size: inherit;
+    padding: 0px 10px;
 }
 
 .pc .scroller tr:first-child td{
-  padding-top: 1.5rem !important;
+    padding-top: 1.5rem !important;
 }
 
 th.address {
-  width: 5rem;
-  padding-left: 8px;
-  text-align: right;
+    width: 5rem;
+    padding-left: 8px;
+    text-align: right;
 }
 
 .pc input[type=number] {
-  margin: 0 .5em 0 0;
-  padding: 0 .25em;
-  height: 2.5rem;
-  line-height: 1em;
+    margin: 0 .5em 0 0;
+    padding: 0 .25em;
+    height: 2.5rem;
+    line-height: 1em;
 }
 
 .pc input[type=number].instruction {
-  width: 4em !important;
+    width: 4em !important;
 }
 
 .pc input[type=number].address {
-  width: 5em !important;
+    width: 5em !important;
 }
 
 
 /* CONTROLS */
 .pc .controls > :not(:last-child) {
-  margin-right: 0.75em;
+    margin-right: 0.75em;
 }
 
 .pc .controls .checker {
-  display: inline-flex;
-  align-items: center;
-  padding-left: 3em;
+    display: inline-flex;
+    align-items: center;
+    padding-left: 3em;
 }
 
 .pc .controls .checker label {
-  display: inline;
-  /*font-size: 0.8em;*/
-  white-space: initial;
-  white-space: break-spaces;
-  text-transform: none;
-  width: 6em;
-  width: min-content;
-  vertical-align: middle;
-  line-height: .9em;
+    display: inline;
+    /*font-size: 0.8em;*/
+    white-space: initial;
+    white-space: break-spaces;
+    text-transform: none;
+    width: 6em;
+    width: min-content;
+    vertical-align: middle;
+    line-height: .9em;
 
-  margin: 0;
+    margin: 0;
 
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .pc .controls input[type=checkbox]{
-  display: none;
-  margin-left: -1em;
-  margin-right: 1em;
-  opacity: 0;
-  z-index: 0;
+    display: none;
+    margin-left: -1em;
+    margin-right: 1em;
+    opacity: 0;
+    z-index: 0;
 }
 
 .pc .controls .checker::before{
-  content: "✔";
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0,0,0,0);
-  border-radius: 4px;
-  vertical-align: middle;
-  margin: 0 .5em 0 -1em;
+    content: "✔";
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0,0,0,0);
+    border-radius: 4px;
+    vertical-align: middle;
+    margin: 0 .5em 0 -1em;
 
-  line-height: 1.8rem;
-  font-size: 1.4em;
+    line-height: 1.8rem;
+    font-size: 1.4em;
 
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 /* END CONTROLS */
@@ -295,458 +315,462 @@ th.address {
 /* RAM */
 
 .pc .ram .scroller {
-  /* height: 100%; */
-  /* padding: 0.2em; */
-  box-sizing: border-box;
+    /* height: 100%; */
+    /* padding: 0.2em; */
+    box-sizing: border-box;
 }
 
 .pc .ram .scroller table {
-  width: 100%;
+    width: 100%;
 }
 
 .pc .ram input {
-  background-color: var(--color-table-ram-select);
-  color: var(--color-table-ram-select-text);
-  border-color: var(--color-table-ram-select-border);
+    background-color: var(--color-table-ram-select);
+    color: var(--color-table-ram-select-text);
+    border-color: var(--color-table-ram-select-border);
 }
 
 .pc .ram table tr td:nth-child(2){
-  text-align: left;
+    text-align: left;
 }
 
 .pc .ram .scroller table tbody button:last-child{
-  background-color: var(--color-table-ram-select);
-  color: var(--color-table-ram-select-text);
-  border-color: var(--color-table-ram-select-border);
+    background-color: var(--color-table-ram-select);
+    color: var(--color-table-ram-select-text);
+    border-color: var(--color-table-ram-select-border);
 }
 
 .pc .ram .ram-entry:last-child {
-  margin-right: 0 !important;
+    margin-right: 0 !important;
 }
 
 .pc .ram .comment {
-  padding: 12px 5px;
+    padding: 12px 5px;
 }
 
 .pc .ram .comment input{
-  border: none;
-  margin: 0;
-  font-size: .8em;
-  width: 100%;
+    border: none;
+    margin: 0;
+    font-size: .8em;
+    width: 100%;
 }
 
 
 /* CONTROL UNIT */
 
 .pc .cu p {
-  margin: 0 0 .2em 0;
+    margin: 0 0 .2em 0;
 }
 
 .pc .cu .scroller table {
-  width: 100%;
+    width: 100%;
 }
 
 .pc .cu .input-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0 0 .5em 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 .5em 0;
 }
 
 .pc .cu .input-row:last-child {
-  margin: 0;
+    margin: 0;
 }
 
 .pc .cu input {
-  color: var(--color-cu-text);
-  border-color: var(--color-cu-text);
-  background-color: transparent;
+    color: var(--color-cu-text);
+    border-color: var(--color-cu-text);
+    background-color: transparent;
 }
 
 .pc .cu input[type=number] {
-  width: 12.5em;
+    width: 12.5em;
 }
 
 .pc .cu label {
-  display: inline;
-  margin-bottom: 0;
+    display: inline;
+    margin-bottom: 0;
 }
 
 .pc .cu select{
-  margin: 0;
-  width: 100%;
+    margin: 0;
+    width: 100%;
 
-  background-color: var(--color-table-cu-select);
-  color: var(--color-table-cu-select-text);
-  border: 1px solid var(--color-table-cu-select-border);
+    background-color: var(--color-table-cu-select);
+    color: var(--color-table-cu-select-text);
+    border: 1px solid var(--color-table-cu-select-border);
 }
 
 .pc .cu .scroller table tbody button:last-child {
-  background-color: var(--color-table-cu-select);
-  color: var(--color-table-cu-select-text);
-  border: 1px solid var(--color-table-cu-select-border);
+    background-color: var(--color-table-cu-select);
+    color: var(--color-table-cu-select-text);
+    border: 1px solid var(--color-table-cu-select-border);
 }
 
 .pc .cu button,
 .pc .cu .button {
-  height: 2.5rem;
-  box-sizing: border-box;
+    height: 2.5rem;
+    box-sizing: border-box;
 
-  color: var(--color-cu-text);
-  border-color: var(--color-cu-text);
-  background-color: transparent;
+    color: var(--color-cu-text);
+    border-color: var(--color-cu-text);
+    background-color: transparent;
 }
 
 /* ALU */
 .pc .alu input, .pc .alu .button, .pc .alu button{
-  color: var(--color-alu-text);
-  border-color: var(--color-alu-text);
-  background-color: transparent;
+    color: var(--color-alu-text);
+    border-color: var(--color-alu-text);
+    background-color: transparent;
 }
 
 .pc .alu button {
-  margin-right: 1em;
+    margin-right: 1em;
 }
 
 .pc .alu button:last-child {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 /* BUSSES */
 
 .pc .databus,
 .pc .addressbus{
-  /*position: relative;*/
-  text-align: left;
+    /*position: relative;*/
+    text-align: left;
 
-  margin: 0;
-  padding: .75em .5em;
+    margin: 0;
+    padding: .75em .5em;
 }
 .pc .databus .label,
 .pc .addressbus .label {
-  /* position: absolute; */
-  /* left: .5em; */
-  margin-right: 1em;
+    /* position: absolute; */
+    /* left: .5em; */
+    margin-right: 1em;
 }
 
 .pc .addressbus input {
-  color: var(--color-addressbus-text);
-  border-color: var(--color-addressbus-text);
-  background-color: var(--color-addressbus);
+    color: var(--color-addressbus-text);
+    border-color: var(--color-addressbus-text);
+    background-color: var(--color-addressbus);
 }
 
 .pc .databus input {
-  color: var(--color-databus-text);
-  border-color: var(--color-databus-text);
-  background-color: var(--color-databus);
+    color: var(--color-databus-text);
+    border-color: var(--color-databus-text);
+    background-color: var(--color-databus);
 }
 
 .pc .addressbus {
-  margin-bottom: 1em;
+    margin-bottom: 1em;
 
-  background-color: var(--color-addressbus);
-  color: var(--color-addressbus-text);
+    background-color: var(--color-addressbus);
+    color: var(--color-addressbus-text);
 }
 
 .pc .databus {
-  margin-top: 2em;
+    margin-top: 2em;
 
-  background-color: var(--color-databus);
-  color: var(--color-databus-text);
+    background-color: var(--color-databus);
+    color: var(--color-databus-text);
 }
 
 /* ARROWS */
 .pc .arrow {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  width: 3rem;
-  height: 5rem;
+    width: 3rem;
+    height: 5rem;
 
-  /* transform: rotate(90deg) translate(1.5rem, 2.5rem) ; */
-  --transformation: translate(0, 3rem);
-  transform: var(--transformation);
-  -moz-transform: var(--transformation);
-  -webkit-transform: var(--transformation);
-  -o-transform: var(--transformation);
+    /* transform: rotate(90deg) translate(1.5rem, 2.5rem) ; */
+    --transformation: translate(0, 3rem);
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
 
-  z-index: 100;
+    z-index: 100;
 
-  font-size: 0.5em;
-  color: var(--color-arrow-text);
-  background-color: var(--color-arrow);
+    font-size: 0.5em;
+    color: var(--color-arrow-text);
+    background-color: var(--color-arrow);
 }
 
 .pc .arrow.down {
-  left: 25%;
+    left: 25%;
 }
 
 .pc .arrow.up {
-  left: 75%;
-  --transformation: rotate(180deg) translate(0, -4.5rem);
-  transform: var(--transformation);
-  -moz-transform: var(--transformation);
-  -webkit-transform: var(--transformation);
-  -o-transform: var(--transformation);
+    left: 75%;
+    --transformation: rotate(180deg) translate(0, -4.5rem);
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
 }
 .pc .arrow.up > :nth-child(1){
-  /* transform: rotate(90deg) translate(0rem, 2rem); */
-  --transformation: rotate(180deg);
+    /* transform: rotate(90deg) translate(0rem, 2rem); */
+    --transformation: rotate(180deg);
 
-  transform: var(--transformation);
-  -moz-transform: var(--transformation);
-  -webkit-transform: var(--transformation);
-  -o-transform: var(--transformation);
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
 }
 
-.pc .arrow.up.arrow2 {
-  left: 50%;
+.pc .arrow.up ~ .arrow.up {
+    left: 25%;
+}
+
+.pc .arrow.up ~ .arrow.up ~ .arrow.up {
+    left: 50%;
 }
 
 .pc .arrow.top {
-  bottom: auto;
-  top: -6rem;
+    bottom: auto;
+    top: -6rem;
 }
 
 
 .pc .arrow > :nth-child(1) {
-  font-size: 1.2em;
-  line-height: 1.1em;
-  font-weight: 600;
-  color: var(--color-arrow-text) !important;
-  background-color: var(--color-arrow) !important;
-  border-color: var(--color-arrow-text) !important;
-  text-transform: none;
-  padding: 2px 10px;
-  margin: 0;
-  /* transform: rotate(-90deg) translate(0rem, -2rem); */
+    font-size: 1.2em;
+    line-height: 1.1em;
+    font-weight: 600;
+    color: var(--color-arrow-text) !important;
+    background-color: var(--color-arrow) !important;
+    border-color: var(--color-arrow-text) !important;
+    text-transform: none;
+    padding: 2px 10px;
+    margin: 0;
+    /* transform: rotate(-90deg) translate(0rem, -2rem); */
 
-  white-space: normal;
-  height: min-content;
+    white-space: normal;
+    height: min-content;
 
-  z-index: 10;
+    z-index: 10;
 }
 
 .pc .arrow > :nth-child(1) *{
-  color: var(--color-arrow-text);
-  display: block;
-  white-space: break-spaces;
+    color: var(--color-arrow-text);
+    display: block;
+    white-space: break-spaces;
 }
 
 .pc .arrow > :nth-child(1):hover, .pc .arrow > :nth-child(1) *:hover {
-  color: var(--color-arrow-text-hover);
+    color: var(--color-arrow-text-hover);
 }
 
 .pc .arrow > :nth-child(2) {
-  width: 0;
-  height: 0;
+    width: 0;
+    height: 0;
 
-  border-left:    2.5rem solid transparent;
-  border-right:   2.5rem solid transparent;
-  border-top:     2rem solid var(--color-arrow);
-  border-bottom:  0rem solid transparent;
+    border-left:    2.5rem solid transparent;
+    border-right:   2.5rem solid transparent;
+    border-top:     2rem solid var(--color-arrow);
+    border-bottom:  0rem solid transparent;
 
-  position: absolute;
-  left: -1rem;
-  bottom: -2rem;
+    position: absolute;
+    left: -1rem;
+    bottom: -2rem;
 
 }
 
 
 /* MODALS */
 .modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
 
-  box-sizing: border-box;
-  width: 100vw;
-  height: 100vh;
+    box-sizing: border-box;
+    width: 100vw;
+    height: 100vh;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 .modal.hidden {
-  display: none;
+    display: none;
 }
 
 .modal-card {
-  z-index: 1500;
-  display: block;
-  width: 40em;
-  min-width: 45vw;
-  min-height: 5em;
-  position: relative;
-  box-sizing: border-box;
+    z-index: 1500;
+    display: block;
+    width: 40em;
+    min-width: 45vw;
+    min-height: 5em;
+    position: relative;
+    box-sizing: border-box;
 
-  padding: 2.5em 2em 1em 2em;
+    padding: 2.5em 2em 1em 2em;
 
-  background-color: var(--color-modal);
-  color: var(--color-modal-text);
+    background-color: var(--color-modal);
+    color: var(--color-modal-text);
 }
 
 .modal > :first-child {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 
-  background-color: var(--color-modal-shadow);
+    background-color: var(--color-modal-shadow);
 }
 
 .modal .modal-close {
-  position: absolute;
-  top: .5em;
-  right: .5em;
+    position: absolute;
+    top: .5em;
+    right: .5em;
 
 }
 
 .modal .modal-close::before {
-  content: "❌";
-  cursor: pointer;
+    content: "❌";
+    cursor: pointer;
 }
 
 .modal .scroller table {
-  width: 100%;
+    width: 100%;
 }
 
 
 
 @media(max-width: 1000px){
-  .pc{
-    grid-template-rows: auto max-content auto;
-    justify-items: center;
-    overflow-x: hidden;
-  }
+    .pc{
+        grid-template-rows: auto max-content auto;
+        justify-items: center;
+        overflow-x: hidden;
+    }
 
-  .pc .section {
-    grid-column: 2;
-    width: 100%;
+    .pc .section {
+        grid-column: 2;
+        width: 100%;
 
-    min-height: 25rem;
-    max-height: 50rem;
-  }
+        min-height: 25rem;
+        max-height: 50rem;
+    }
 
-  .pc .grid-fullwidth.grid-addressbus,
-  .pc .grid-fullwidth.grid-databus {
-    --width: 5rem;
-    --text-height: 35rem;
-    --margin-side: 2rem;
+    .pc .grid-fullwidth.grid-addressbus,
+    .pc .grid-fullwidth.grid-databus {
+        --width: 5rem;
+        --text-height: 35rem;
+        --margin-side: 2rem;
 
-    width: var(--width);
-    box-sizing: border-box;
-    grid-row: 2 / span 3;
+        width: var(--width);
+        box-sizing: border-box;
+        grid-row: 2 / span 3;
 
-    position: relative;
-    padding-bottom: var(--text-height);
-  }
+        position: relative;
+        padding-bottom: var(--text-height);
+    }
 
-  .pc .grid-fullwidth.grid-addressbus {
-    grid-column: 1;
+    .pc .grid-fullwidth.grid-addressbus {
+        grid-column: 1;
 
-    background-color: var(--color-addressbus);
-    color: var(--color-addressbus-text);
+        background-color: var(--color-addressbus);
+        color: var(--color-addressbus-text);
 
-    justify-self: flex-end;
-    margin-right: var(--margin-side);
-  }
-  .pc .grid-fullwidth.grid-databus {
-    grid-column: 3;
+        justify-self: flex-end;
+        margin-right: var(--margin-side);
+    }
+    .pc .grid-fullwidth.grid-databus {
+        grid-column: 3;
 
-    background-color: var(--color-databus);
-    color: var(--color-databus-text);
+        background-color: var(--color-databus);
+        color: var(--color-databus-text);
 
-    justify-self: flex-start;
-    margin-left: var(--margin-side);
-  }
+        justify-self: flex-start;
+        margin-left: var(--margin-side);
+    }
 
 
 
-  .pc .grid-fullwidth.grid-addressbus > *,
-  .pc .grid-fullwidth.grid-databus > * {
-    position: sticky;
-    top: 0;
-    left: 0;
-    margin: 0;
-    box-sizing: border-box;
+    .pc .grid-fullwidth.grid-addressbus > *,
+    .pc .grid-fullwidth.grid-databus > * {
+        position: sticky;
+        top: 0;
+        left: 0;
+        margin: 0;
+        box-sizing: border-box;
 
-    height: var(--width);
-    width: var(--text-height);
+        height: var(--width);
+        width: var(--text-height);
 
-    --transformation: rotate(-90deg) translate( calc(var(--width) / 2 - 50%), calc( 50% - var(--text-height) / 2));
-    transform: var(--transformation);
-    -moz-transform: var(--transformation);
-    -webkit-transform: var(--transformation);
-    -o-transform: var(--transformation);
+        --transformation: rotate(-90deg) translate( calc(var(--width) / 2 - 50%), calc( 50% - var(--text-height) / 2));
+        transform: var(--transformation);
+        -moz-transform: var(--transformation);
+        -webkit-transform: var(--transformation);
+        -o-transform: var(--transformation);
 
-    background-color: transparent;
-  }
+        background-color: transparent;
+    }
 
-  .pc .controls.grid-fullwidth {
-    grid-column: 1 / span 3;
-  }
+    .pc .controls.grid-fullwidth {
+        grid-column: 1 / span 3;
+    }
 
 
-  .pc .arrow.down{
-    left: inherit;
-    right: 0;
-    bottom: 25%;
-    --transformation: rotate(-90deg) translate(0, 1rem);
-  }
-  .pc .arrow.down > :nth-child(1) {
-    --transformation: rotate(90deg);
+    .pc .arrow.down{
+        left: inherit;
+        right: 0;
+        bottom: 25%;
+        --transformation: rotate(-90deg) translate(0, 1rem);
+    }
+    .pc .arrow.down > :nth-child(1) {
+        --transformation: rotate(90deg);
 
-    transform: var(--transformation);
-    -moz-transform: var(--transformation);
-    -webkit-transform: var(--transformation);
-    -o-transform: var(--transformation);
-  }
+        transform: var(--transformation);
+        -moz-transform: var(--transformation);
+        -webkit-transform: var(--transformation);
+        -o-transform: var(--transformation);
+    }
 
-  .pc .arrow.up{
-    left: inherit;
-    right: 0;
-    top: 25%;
-    --transformation: rotate(90deg) translate(0, -2.5rem);
-  }
-  .pc .arrow.up > :nth-child(1) {
-    --transformation: rotate(-90deg);
-  }
+    .pc .arrow.up{
+        left: inherit;
+        right: 0;
+        top: 25%;
+        --transformation: rotate(90deg) translate(0, -2.5rem);
+    }
+    .pc .arrow.up > :nth-child(1) {
+        --transformation: rotate(-90deg);
+    }
 
-  .pc .arrow.top {
-    right: inherit;
-    left: -4.5rem !important;
-    top: 25%;
-  }
+    .pc .arrow.top {
+        right: inherit;
+        left: -4.5rem !important;
+        top: 25%;
+    }
 
-  .pc .arrow.arrow2{
-    top: 75%;
-  }
+    .pc .arrow.arrow2{
+        top: 75%;
+    }
 
 
 
 
-  .pc .alu {
-    text-align: center;
-  }
+    .pc .alu {
+        text-align: center;
+    }
 
 }
 
 
 @media(max-width: 800px){
-  .pc .cu .input-row {
-    display: block;
-    padding-left: 2rem;
-  }
+    .pc .cu .input-row {
+        display: block;
+        padding-left: 2rem;
+    }
 
-  .pc .cu .input-row label {
-    display: block;
-  }
+    .pc .cu .input-row label {
+        display: block;
+    }
 }
\ No newline at end of file
diff --git a/out/js/pc.js b/out/js/pc.js
index b1119db..b74a04c 100644
--- a/out/js/pc.js
+++ b/out/js/pc.js
@@ -66,7 +66,7 @@ function loadStorage() {
 
 
 // Load last state of pc
-loadStorage();
+//loadStorage();
 
 // EVENT LISTENERS
 pc_ram_scroller.addEventListener("scroll", shrinkTableHead);