.category {
  text-transform : uppercase ;
  display: inline ;
  font-weight: bold ;
color: var(--text-color) ;
}
time {
color: gray ;
}
.category::after {
content: " | ";
color: var(--text-color)
}
.tag {
  border-radius: 5px ;
  height: 20px ;
width: auto ;
display: inline ;
  padding: 5px ; 
  margin-right: 5px;
color: black;
background-color: white ;
  }
.cat { background-color:cyan ; }
.tech { background-color : navy; color: cyan }
.easy { background-color: chartreuse ; }
.free { background-color: blue ; color: white  }
.hard { background-color: red ; color: white }
.program { background-color: black ; color: yellow }
.medium { background-color: orange ; color: white }
.earth { background-color: blue ; color: chartreuse }
.land { background-color: brown ; color: white }
.easy { background-color: green ; color: white }
.air { background-color: #e8e8e8 }
.body { background-color: #ffe0a1 }
.wild { background-color: green ; color: chartreuse }
.space { background-color: black ; color: cyan }
.tag-con {
  margin: 0px 10px 20px 1px ;
display: inline ;
}
  .q {
display: inline ;
color: var(--text-color)
}
.q::after {
content: " | ";
color: var(--text-color) 
}
a {
text-decoration: none ;
}
.sidenav {
height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background: #4fb9ff;
  overflow-x: hidden; /* Disable horizontal scroll */
 padding-top: 60px; /* Place content 60px from the top */
 }
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: black;
  display: block;
  transition: 0.3s;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
hr {
border: 1px solid black;
}

.ham {
  width: 35px;
  height: 5px;
  background-color: var(--text-color) ;
  margin: 6px 0;
}
@media only screen and (min-width: 600px) {
  #side {
display: none  ;
}
.sidenav {
height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: #4fb9ff;
  overflow-x: hidden;
  overflow-y
  : hidden ;
padding-top: 20px;
}
.main , main {
margin-left: 200px ;
}
.sidenav .closebtn {
display: none ;
}
}