body {
    text-align:center;
    font-family:'MS UI Gothic',sans-serif;
    margin:0;
    color:#fff;
    background-color: #101010;
    background-image: url(/images/greygrid.png);
    background-repeat: repeat;
}
    main{
    background-color: #101010;
    max-width: 1000px;
    padding: 20px;
    vertical-align: baseline
}
  #container {
    margin:50px auto;
    padding:20px;
    background-color:transparent;
    max-width:1440px;
}
  #container a {
    color:#ED64F5;
    font-weight:700;
    text-decoration:none 
}
  #container a:hover {
    color:#a010a0;
}
#header {
  text-align: center;
  background-color: transparent;
}
#header h1 {
  padding: 20px 0;
  margin: 0;
  font-family: "MS Gothic";
}
#navbar {
  height: 24px;
  background-color: #000;
  margin: auto;
  display: flex;
  justify-content: center;
  font-family: "MS Gothic";
}
#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
}
#footer #navbar ul {
  margin: -8px 0 24px 0;
}
#navbar li::marker {
  content: "";
}
#navbar li {
  margin-left: 0;
}
#navbar li a {
  color: #ed64f5;
  font-weight: 400;
  font-size: 14px;
  text-decoration: underline;
}
#navbar li a:hover, #footer li a:hover {
  color: #a010a0;
  text-decoration: underline;
}
#footer {
  width: 100%;
  height: 40px;
  text-align: center;
  margin: 0 auto;
}
#footer img {
  width:88px;
  height:31px
}
  header {
    font-size:24px;
    font-weight:bold;
    margin-top:48px
}
  a img {
    max-width:330px;
    max-height:275px
}
  audio {
    float:right;
    margin-top:0;
}
  table {
    margin-top:48px;
    background-color:#000
}
  td {
    font-size:20px;
    text-align:center;
    max-height:720px;
    overflow-y:scroll
}
  th {
    font-weight:bold;
    font-size:20px
}
  #title {
    width:250px;
}
  #artist {
    width:200px
}
  #date {
    width:180px
}
  #genre {
    width:120px
}
  #rating {
    width:120px
}
  #favorite {
    width:175px
}
  #notes {
    width:275px
}
  .row {
  display: flex;
  margin-left:-16px;
  margin-right:-16px;
}

  .column {
  flex: 50%;
  padding: 0px 16px 0px 16px;
}
  .inactive {
   pointer-events: none;
   cursor: default;
}
  .scrollable {
    max-height:680px;
    overflow-y:auto;
    padding:0 16px 0 16px;
    text-align:left
}
  #main {
    background-color:#00000080;
    width:1000px;
    padding:16px;
}
  #leftSidebar { 
      width:160px;
      max-height:720px;
      vertical-align:baseline;
}
  #rightSidebar { 
      width:160px;
      max-height:720px;
      vertical-align:baseline
}
  summary {
    list-style:none;
    font-weight:bold;
    font-size:20px
}
  summary::-webkit-details-marker {
    display: none;
}
  summary:hover {
    cursor:pointer;
    color:#7f7f7f
}
  details[open] summary:hover {
    cursor:pointer;
    color:#7f7f7f
}
  footer {
      background-color:#020202;
      border:2px solid #723D76;
      width:100%;
      height:40px;
      padding:10px;
      text-align:center;
      margin-top:8px 
}
/* defaults: h1=32px, h2=24px, h3=18.72px, h4=16px, h5=13.28px, h6=10.72px */
  h1,h2,h3 {
      color:#fff 
}
  h3 {
      font-size:20px;
      margin:0
}
  .shrinetable {
      margin-left:auto;
      margin-right:auto;
      border:solid #7f7f7f 1px
}
  .shrinetable th {
    border:solid #7f7f7f 1px
    }
  .shrinetable td {
    border:solid #7f7f7f 1px;
    padding:4px 8px 4px 8px
  }
  .musictable {
      margin:24px auto 0 auto;
      border:solid #7f7f7f 1px
}
  .musictable th {
      border:solid #7f7f7f 1px
}
  .musictable td {
      border:solid #7f7f7f 1px
}
  .musictable img {
    max-width:240px;
    max-height:240px
}   
  .center {
      display: block;
      margin-left:auto;
      margin-right:auto;
}
  button {
      text-align:center;
      color:white;
      font-size:20px;
      background-color:#000;
      font-weight:bold;
      font-family:'MS UI Gothic',sans-serif;
      position:relative;
      border:1px solid #ED64F5
}
  button:hover {
      background-color:#202020;
      border:1px solid #a010a0;
      color:lightgray;
}