* {
  box-sizing: border-box;
}

body {
  font-family:'Times New Roman' serif;
  background-image:url('/img/pasteltyebg.jpg');
}

h2 {
  text-align:center;
  margin:auto;
  font-size:24px;
  font-family:'Times New Roman', serif;
  color: violet;
  font-weight:bold;
  }

h4 {
  text-decoration:underline;
  font-size:18px;
  font-weight:bold;
  margin:auto;
  font-family:'Times New Roman' serif;
  }

h5 {
  font-size:27px;
  font-weight: bold;
  letter-spacing: .7px;
  color: violet;
  font-family:'Times New Roman' serif;
  }
  
.whole {
  position:fixed;
  margin-top:50px;
  margin-left:auto;
  margin-right:auto;
  }

a {
  font-weight:bold;
  margin:5px;
  font-size:20px;
  text-decoration:none;
  font-family:'Times', serif;
  }
  

/* Style the header */
.header {
  text-align: center;
  font-size: 25px;
  position: fixed;
  background-color:lightblue;
  width: 100%;
  
  top: 0px;
}

/* Container for flexboxes */
.row {
  display: -webkit-flex;
  display: flex;
  text-align:center;
}

.column {
  padding: 0px;
  overflow:auto;
}

.column.side {
 -webkit-flex: 1;
 -ms-flex: 1;
  flex: 1;
}

/* Middle column */
.column.middle {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  
}

#left {
  max-height:800px;
}

#mid {
  max-height:800px;
  padding:10px;
  text-align:center;
  color:black;
  border-left:2px solid black;
  border-right:2px solid black;
}

#right {
  max-height:800px;
  text-align:center;
  padding:10px;
  font-size:16px;
  overflow:auto;
  background-color:#e1eafa;}

#colhead {
  width:100%;
  position: sticky;
  top:0px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  }

#sitetext {
  font-family:'Times New Roman', serif;
  color:black;
  font-size:14px;
  letter-spacing:.8px;
  padding:10px;
}

#divider {
  margin-top:10px;
  margin-bottom:10px;
  width:100%;
  }

#coltxt {
  color: white;
  font-size:20px;
  text-shadow: 2px 2px #000000;
  }

#lilmarq {
  background-color:gray;
  border:2px solid black;
  font-size:15px;
  letter-spacing:1px;
  color:violet;
  font-weight:normal;
  padding:2px;
  margin:0px;}

.footer {
  bottom:0px;
  height:10%;
  position:fixed;
  margin:0px;
  z-index:99;
  width:100%;
  text-align: center;
}
.rainbow-lr {
  background: linear-gradient(to right, red, orange , yellow, green, cyan, blue, violet);
  color:transparent;
  background-clip: text;
}

.rainbow-td {
  background: linear-gradient(to bottom, red, orange , yellow, green, cyan, blue, violet);
  color:transparent;
  background-clip: text;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: blue;
  padding: 10px;
  width: 90%;
  height: auto;
  margin:auto;

}
.grid-item {
  background-color: #dfecfa;
  border: 1px solid black;
  color: black;
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}


#used {text-decoration: line-through;background-color: BLUE;
  color: white;}
  
#expired {text-decoration: line-through;background-color: BLack;
  color: white;}
  
.grid-item:visited {
  text-decoration: line-through;
  background-color: BLUE;font-size: 20px;
  color: white;
  }
  
.grid-item:hover {text-decoration: line-through;
  background-color: BLUE;font-size: 20px;
  color: white;}

.grid-item:active {
  text-decoration: line-through;font-size: 20px;
  background-color: BLUE;
  color: white;}