/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');


body {
  background-color: #0f130b;
  background-image: url('../images/bg_grass.png');
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: fixed;
  font-size: 16px;
  font-family: "Lexend";
  margin: 0;
}

p {
  line-height: 1.5em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

a:hover { 
  background-color: #eecdc2;
}

h1, h2, h3, h4, h5 {
  color: #003300;
  font-family: "Lexend";
}

/*post dates*/
h4 {
  font-size: 0.8em;
}

h2 {
  font-size: 1em;
  padding:0px;
  margin:2px 0px;
}




/*my attempts*/

.star {
  font-size:165%;
}


.stats {
  text-indent:-20px;
  padding-left:20px;
}


/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #32a852;
  font-family: "Lexend";
  padding: 0 5%;
  border-color: #c1c0b5;
  border-style: ridge;
  border-width: 0 0 4px 0;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 19px;
  margin-right: 1.0em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}


/* The dropdown container */
.dropdown {
  display:inline-block;
  overflow: hidden;
  color: white;
  font-size:19px;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 19px;
  border: none;
  outline: none;
  color: white;
  display:inline-block;
  padding: 0 0;
  background-color: #32a851;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  text-decoration:underline;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2f9d4c;
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 0.5em 0.5em;
  font-size:0.9em;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #4eca6f;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}





/*the columns*/

#allbars {
  margin: 1em auto;
  display:flex;
}

#leftbox {
  float:left;
  width:10%;
  margin:7em auto;
  background-color: #f5f1ed;
  color: #003300;
  outline-color: #c1c0b5;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#rightbox {
  float:left;
  width:10%;
  margin:7em auto;
  background-color: #f5f1ed;
  color: #003300;
  outline-color: #c1c0b5;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#commentbox {
  margin: 3em 1em;
  margin-left:auto;
  margin-right:auto;
  width: 90%;
	max-width: 825px;
	background-color: #f5f1ed;
  color: #003300;
  outline-color: #c1c0b5;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
  padding: 10px 5% 20px 5%;
}


/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em 1em;
  width: 90%;
	max-width: 825px;
	background-color: #f5f1ed;
  color: #003300;
  outline-color: #c1c0b5;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}


/*HEADER STYLE*/
#header {
  background-color: #32a852;
  padding: 0 5%;
  border-color: #c1c0b5;
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 19px;
  display: inline-block;
  margin-right: 1.0em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.55em;
  padding: 0 5% 10px 5%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}