@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

.ibm-plex-sans-regular {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-regular-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ibm-plex-sans-bold {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ibm-plex-mono-regular {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

* {color: black; }
* { font-family: 'IBM Plex Sans', sans-serif; line-height: 1.25;}
code {font-family: 'IBM plex Mono';}
h1{margin: 0; padding: 3rem 1rem 0rem 0rem; border-bottom: 3px solid #ddd; font-size: 1.5rem;}
h2{font-size: default;}
html{margin:0; padding: 0;}
body{margin:0; padding: 0;}
table{line-height: 1.5; width: 100%; text-align: left;}
nav{font-size: 1.25rem; background-color:#ddd; box-shadow: 0px,0px,5px,gray; padding: .5rem 1rem; max-width: 50rem;}
nav a {color: #444; text-decoration: none;}
nav a:hover{text-decoration: underline;}

.navSet{display: flex; justify-content: space-between; max-width: default};
.colorHead{background-color: #ddd; max-width: default;}
#log-form{font-size: 1.25rem;}
#user{display:flex; flex-direction: row; justify-content:space-between;  padding: .5rem;}
#pass{display:flex; flex-direction: row; justify-content:space-between;  padding: .5rem;}
#log-button{display: flex; flex-direction:row ; justify-content: center;  padding: .5rem;}
.login{width: 50%;}
#logout{ }
#username{width: 50%; font-size: 1.25rem}
#password{width: 50%; font-size: 1.25rem}
#parent{display:flex; flex-direction:column; }
#assignment-act{display: flex; flex-direction: column;  background-color: #b1c3de; outline: solid #204a87; padding: 1rem; max-width: 50rem;}
.assignment-act{display: flex; flex-direction: column;  background-color: #b1c3de; outline: solid #204a87; padding: 1rem; max-width: 50rem;}
#assignment-act1{display: flex; flex-direction: row; height: .5rem;}
#assignment-act2{display: flex; flex-direction: row; justify-content:space-between; height: 1.5rem;}
#left-nav{display: flex; flex-direction: row; gap: 1rem;}
#right-nav{display: flex; flex-direction: row; align-items: end; justify-content: end;}
#table-num{text-align: right;}
#profile-box{display: flex; flex-direction: row; background-color: #b1c3de; justify-content: space-between; padding: 1rem; outline: solid #204a87;}
main{padding: 1rem 1rem; display:flex; flex-direction: column; max-width: 50rem;}

@media (min-width: 52rem)
{
  .navSet, main
  {
      max-width: 50rem;
      margin: 0 auto;
  }
}

/* HW4 */
.error-type {border: 2px solid red;}
output{font-weight: bold; color: red;}
#upload-act{display: flex; flex-direction: column; background-color: #b1c3de; outline: solid #204a87; padding: 1rem; max-width: 50rem; margin-bottom: 3rem;}
.upload-act{display: flex; flex-direction: column; background-color: #b1c3de; outline: solid #204a87; padding: 1rem; max-width: 50rem; margin-bottom: 3rem;}
.empty-display {display: none}

/* HW5 */
th.colSort {cursor: pointer;}
th.sort-asc::after {content: " \25b2";}
th.sort-desc::after {content: " \25bc";}