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;
}
/* 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;
}
.info {
  inline-size: 100%;
  overflow-wrap: break-word;
  font-weight: bold;
}
#more_info {
  display: none;
}
/*drop menu */
/* Dropdown Button */
.dropbtn {
  background-color: #808080;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  -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));
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #04AA6D;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #04AA6D;
}
#myDropdown {
  color: darkslategray;
}
#myDropdown a:hover {
  color: #f1f1f1;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {display:block;}
/* 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;
  }
}