html {
    scroll-behavior: smooth;
}
body {
  font-family: ui-rounded,  
                   -apple-system,
                   BlinkMacSystemFont, 
                   'Segoe UI', 
                   Roboto, 
                   Oxygen, 
                   Ubuntu, 
                   Cantarell, 
                   'Open Sans', 
                   'Helvetica Neue', 
                   sans-serif;
}

/* a, a:link, a:visited {} */
a {
  color: #393938;
  text-decoration: none;
  background-color: transparent; 
  }
a:hover {
  color:#0056b3; 
  text-decoration:underline
}
a:not([href]):not([tabindex]) {
  color:inherit; 
  text-decoration:none
}
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
  color:inherit; 
  text-decoration:none
}
a:not([href]):not([tabindex]):focus {
  outline:0
}


h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
  padding-left: 0.75em;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

.signin-button {
    width: 210px;
    height: 40px;
}
 
  .sidebar {
      height: 100%;
      width: 0;
      position: fixed; 
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      /* padding-top: 0.2em; */
}
.sidebar a {
  padding: 0.2em 0.2em 0.2em 0.5em;
  text-decoration: none;
  font-size: 1.5em;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

#era {
  display: none;
  padding: 0em 0em 0em 1em;
  font-size: 0.8em; 
}
#listen {
  display: none;
  padding: 0em 0em 0em 1em;
  font-size: 0.8em; 
}
#piano {
  display: none;
  padding: 0em 0em 0em 1em;
  font-size: 0.8em; 
}
#symphonic {
  display: none;
  padding: 0em 0em 0em 1em;
  font-size: 0.8em; 
}

#main {
  transition: margin-left .5s; 
    margin-left .5s;
    padding: 16px;  
  /* padding: 16px; */ 
}
main {
    border-style: solid; 
    margin-left .5s;
    padding: 16px;  
  }

div {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
#brand {
  /* border-style: solid; */
  border-radius: 10px;
}

#screenSize {
  /* border-style: solid; */
  border-radius: 10px;
}
  
#content {
 /* border-style: solid; */
  border-radius: 10px; 
}

#login {
  /* border-style: solid; text-align:center; */
  border-radius: 10px;
}

#title {
  text-align:left;
  display: inline-block;
  font-size: 2.5em;
}
#icon {
  display: inline-block;
  font-size: 2.5em;
  text-align:right;
  cursor:pointer;
  /*  padding: 0.1em; */ 
}
.line {
  display: flex;
  justify-content: space-between;
}