body {
  background-color: white;
  color: black;
  font-family: Arial;
}

.basicContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: lightgrey;
}

.basicContainer div {
  display: flex;
  text-align: center;
  padding: 5px;
  margin: 5px;
  background-color: white;
  box-shadow: 2px 2px 5px black;
}

/* Bar Graphs */
 
.bar-wrap{
  width: 400px;
  overflow: hidden;
}

.bar{
  display: flex;
  height: 30px;
}

.segment {
  position: relative;
  display: flex;
  height: 100%;
}

/* Banner Content  */
.sidebar {
 height: 50px;
 padding: 2px;
 background: #c90000;
 background: linear-gradient(180deg,rgba(201, 0, 0, 1) 0%, rgba(117, 18, 2, 1) 74%, rgba(82, 0, 0, 1) 100%);
 z-index: 1;
 overflow: hidden;
}

.banner {
  background-image: url("websitebanner.png");
  font-size: 42px;
  color: white;
  text-shadow: 2px 2px 7px black;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  font-family: georgia;
  overflow: hidden;
}

.bannertext {
  color: white;
  overflow: hidden;
}

/* Selection Tabs */

.tab {
  overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: white;
  float: left;
  cursor: pointer;
  border: none;
  outline: none;
  margin: 6px;
  padding: 14px;
  font-size: 20px;
  flex: 1;
  transition: 0.3s;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background: #ffffff;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(186, 186, 186, 1) 49%, rgba(110, 110, 110, 1) 100%);
}

/* Create an active/current tablink class */
.tab button.active {
  background: #ffffff;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(186, 186, 186, 1) 49%, rgba(110, 110, 110, 1) 100%);
}

/* Style the tab content */
.tabcontent {
  display: none;
  border: none;
  border-top: none;
  padding-top: 25px;
}

.displayarea {
  padding: 5px;
  background-color: black;
  overflow: hidden;
}


/* newspaper */
table {
    border-collapse: collapse;
    border: 1px dotted black;
    table-layout: fixed;
    background-color: #FAF9F6;
    font-family: "Times New Roman";
  }
  
th, td {
    padding: 20px;
    text-align: justify;
  }

  
td.middle, th.middle {
    border-left: 2px dotted black;
    border-right: 2px dotted black;
  }
  
th img {
  max-width: 200px;
  height: auto;
}

/* Clock */

.clock {
  background-color: black;
  color: white;
  align-items: center;
  text-align: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 128px;
}

/* Roster Tabs */

.roster {
  display: grid;
  padding: 10px;
  background-color:lightgrey;
  border-radius: 2px;
}

.roster div {
  padding: 10px;
  margin: 5px;
  background-color: white;
  box-shadow: 2px 2px 5px;
  
}

.roster div:hover {
  transition: ease 1.2s;
  font-size:18px;
  background-color:#EDE8D0;
  box-shadow: 15px 15px 15px;
  z-index: 100;
  cursor: pointer;
}

.rosterbody {
  display: none;
}

.roster div:hover .rosterbody {
  display: contents;
}