#HDSVG {
    margin: 3px;
}
#PFSVG {
    width: 500px;
}
form {
    display: flex;
    flex-direction: column;
    width: 160px;
}
.form-section {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 160px;
}
#form-submit {
    width: 160px;
}
html, input, select {
    font-family: 'Courier New', Courier, monospace;
    color: var(--maincolor);
    background-color: var(--secondcolor);
    font-weight: bold;
    font-size: 18px;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 95vh;
}
a {
    color: var(--maincolor);
    text-decoration: none;
}
.fa-square-arrow-up-right {
    color: var(--highlightcolor);
    margin-left: 3px;
}
#container {
    width: 85vw;
    height: 85vh;
}
main {
    padding: 10px;
    border: solid 3px;
    width: 85vw;
    height: 85vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#top-bar {
    display: flex;
    justify-content: space-between;
}
select, input {
    height: 30px;
    border-radius: 0;
    border: solid 3px;
    background-color: var(--secondcolor);
    color: var(--maincolor);
    margin-bottom: 3px;
}
#blue-select {
    background-color: #0077ff;
    color: var(--secondcolor);
}
#green-select {
    background-color: #4bff20;
    color: var(--secondcolor);
}
#red-select {
    background-color: #ff142b;
    color: var(--secondcolor);
}
#yellow-select {
    background-color: #fcf510;
    color: var(--secondcolor);
}
#dark-mode {
    background-color: black;
}
#light-mode {
    background-color: #d3d3d3;
}
select:hover, input:hover {
    cursor: pointer;
}
.color-selector {
    width: 30px;
    height: 30px;
    background-color: white;
}
.color-selector:hover {
    cursor: pointer;
}
#main-nav {
    border: solid 3px var(--maincolor);
}
#main-nav, #sub-nav {
    display: flex;
    gap: 5px;
    padding: 5px;
    margin: 0;
    margin-bottom: 5px;
}
#sub-nav {
    padding: 0;
}
.selected, #selected {
    color: white;
    border-color: white;
}
#nav-header {
    background-color: var(--maincolor);
    color: var(--secondcolor);
    padding: 5px;
    margin: 0;
    margin-bottom: 3px;
    width: 120px;
}
.nav-section {
    border: solid 3px var(--maincolor);
    border-top: solid 10px var(--maincolor);
    padding: 5px;
    width: 97%;
}
#main-section {
    border: solid 3px var(--maincolor);
    /* height: 100%; */
    padding: 5px;
    height: inherit;
    overflow: auto;
    scrollbar-color: var(--maincolor) var(--secondcolor);
}
#browsertag {
    margin: 0;
    color: var(--secondcolor);
    background-color: var(--maincolor);
    padding: 3px;
    padding-bottom: 0;
    padding-left: 5px;
}
.small-text {
    font-size: 16px;
    margin: 0;
}
h1 {
    font-size: 40px;
}
h3 {
    font-size: 25px;
    text-decoration: underline;
}
.inline-link {
    color: white;
}
ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "- ";
}