HTML, BODY {
  height: 100%;
  width: 100%;
  height: 100vh;
  width: 100vw;
  margin:0;
  padding:0;
  overflow: hidden;
}
#wrapper {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:0;
  margin:0;
  overflow: auto;
  box-sizing:border-box;
}
/*font size*/
h1 {
  font-size: calc(16px + 3.0vmin);
}
h2 {
  font-size: calc(16px + 2.0vmin);
}
h3 {
  font-size: calc(16px + 1.0vmin);
}
h4 {
  font-size: calc(16px + 0.5vmin);
}
p {
  font-size: 16px;
}
/* Container holding the logo image*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
}
/* Container holding the search image and the text */
.container-fluid {
  width: 100%;
  inline-size: 100%;
  position: relative;
  text-align: left;
  color: black;
}
#myInput {
  box-shadow: 0 0.3vw 1.0vw rgb(0 0 0 / 0.2);
  width: 100%; /* Full-width */
  font-size: 2.0vw; /* Increase font-size */
  padding: 1.0vw 1.0vw 1.0vw 1.0vw; /* Add some padding */
  border: 0.1vw solid #ddd; /* Add a grey border */
  margin-bottom: 1.0vw; /* Add some space below the input */
}
#myUL {
  /* Remove default list styling */
  display: none;
  box-shadow: 0 0.3vw 1.0vw rgb(0 0 0 / 0.2);
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 0.1vw solid #ddd; /* Add a border to all links */
  margin-top: -1.0vw; /* Prevent double borders */
  background-color: white; /* White background color */
  padding: 1.0vw; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 2.0vw; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}
#myUL li a:hover:not(.header) {
  background-color: #04AA6D; /* Add a hover effect to all links, except for headers */
}
/* user selection data css*/
.post-container {
  text-align: justify;
  text-justify: inter-word;
  width:100%;
  inline-size: 100%;
  position: relative;
  padding: 2.0vmin 2.0vmin calc(20px + 10.0vmin) 2.0vmin;
 }
#image {
  float: left;
  display: none;
  margin: 1.0vmin 2.0vmin 0.0vmin 0.0vmin;
  -webkit-filter: drop-shadow(5px 5px 5px rgb(0 0 0 / 0.2));
  filter: drop-shadow(5px 5px 5px rgb(0 0 0 / 0.2));
}
.info {
  inline-size: 100%;
  overflow-wrap: break-word;
  font-weight: bold;
}
.more_info {
  inline-size: 100%;
  overflow-wrap: break-word;
  font-weight: bold;
}
.post-title {
  inline-size: 100%;
  overflow-wrap: break-word;
  font-weight: bold;
  text-shadow: 0.0vw 0.3vw 0.3vw rgb(0 0 0 / 0.2);
  margin-bottom: 0.0vh;
}
#THC {
  font-weight: 900;
  text-shadow: 0.0vw 0.3vw 0.3vw rgb(0 0 0 / 0.2);
}
#CBD {
  font-weight: 900;
  text-shadow: 0.0vw 0.3vw 0.3vw rgb(0 0 0 / 0.2);
}
#Sativa {
  font-weight: bold;
  text-shadow: 0.0vw 0.3vw 0.3vw rgb(0 0 0 / 0.2);
}
#Indica {
  font-weight: bold;
  text-shadow: 0.0vw 0.3vw 0.3vw rgb(0 0 0 / 0.2);
}
#Hybrid {
  font-weight: bold;
  text-shadow: 0.0vw 0.3vw 0.3vw rgb(0 0 0 / 0.2);
}
#Grow {
  font-weight: bold;
  text-shadow: 0.0vw 0.3vw 0.3vw rgb(0 0 0 / 0.2);
}
.post-IorS {
  font-weight: bold;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
  background-color: #000000;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Style the links inside the navigation bar */
.navbar a {
  float: left;
  display: block;
  color: #808080;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}
/* Navbar links on mouse-over */
.navbar a:hover {
  color: #04AA6D;
}
/* Add a green background color to the active link */
.navbar a.active {
  color: white;
}
/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
  display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}
/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}