/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img {
   /*width: 100%;*/
   display: block;
}

body {
   background-color: white;
   color: black;
   font-family: 'Montserrat', sans-serif;
   margin: auto;
   min-width:300px;
   height:100vh;
}

th{
   font-weight:normal;
   font-size:0.9em;
}

.data{
   font-size:0.9em;
}


.attr{
   text-align:right;
   font-size:0.8em;
}

#chart .bar td {
  transition-duration: 0.3s;
}
#chart .bar td:hover {
  background-color: rgba(255, 75, 75, 0.8);
}
/*#chart .bar #masondata:hover {
  background-color: rgba(255, 225, 225, 1);
}*/

.data{
   margin-right:10px;
}

h2{
/*   text-align:center;*/
   margin:auto;
   margin-bottom:20px;
}

.navbox{
   display: grid;
   grid-template-columns: 1fr 1fr;
   width:95%;
   margin:auto;
}

.nav{
   min-height:50px;
   text-align:center;
   font-size:1em;
   padding:20px;
   margin-bottom:20px;
   border:none;
}

.studentnav{
   background-color:#DEB172;
}

.studentnav:hover{
   background-color:#803111;
   color:white;
   cursor:pointer;
}

.universitynav{
   background-color: #DEEDCF;
}

.universitynav:hover{
   background-color:#188977;
   color:white;
   cursor:pointer;
}

.chart{
   width:100%;
   margin:auto;
   height:500px;
   overflow: scroll
}

/*media query for responsive design */

@media only screen and (max-width: 640px) {
   .chart{
      height:400px;
   }

}