* {
 box-sizing: border-box;
}

body {
 min-height: 100vh;
 margin: 0;
 background-color: white;
 font-family: "Trebuchet MS", Helvetica, sans-serif;
 font-size: 0.9em;
}

/* Topnav */

ul.topnav {
 position: fixed;
 width: 100%;
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #222;
 opacity: 0.7;
}

ul.topnav li {float: left;}

ul.topnav li a {
 display: block;
 border-right: 1px solid #555;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #666;}
ul.topnav li a.active {background-color: #04AA6D;}


/* Sidebar */

.sidebar {
 margin: 0;
 padding-top: 0px;
 width: 200px;
 background-color: white;
 position: fixed;
 height: 100%;
 overflow: auto;
}

.sidebar a {
 display: block;
 color: black;
 padding: 16px;
 text-decoration: none;
}
 
.sidebar a.active {
 background-color: #fff8e7;
 box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.20);
 border-right: 1px solid beige;
 color: black;
}

.sidebar a:hover:not(.active) {
 background-color: #555;
 color: white;
}

#logo {
 width: 100%;
 padding: 25px;
}

#mobile-logo {
 display: none;
 width: 100%;
 padding: 25px;
}

.content-text {
 padding-left: 20px;
 padding-right: 20px;
 margin-left: 0px;
}

div.content {
 margin-left: 200px; /* Value should match that of the sidebar's width property */
 padding-top: 15px;
 min-height: 100vh;  /* Ensure content takes at least full viewport height */
 background-color: white;
}

/* Both left & right columns */
.row {
 margin-top: 0px;
}

/* Left column */
.leftcolumn {
 width: 75%;
 float: left;
}

/* Right column */
.rightcolumn {
 width: 25%;
 float: left;
 padding-left: 20px;
}

/* Add a card effect for articles */
.card {
 background-color: #fff8e7;
 margin-left: 6px;
 margin-right: 6px;
 padding: 20px;
 margin-top: 20px;
 box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.20);
}

/* Clear floats after the columns */
.row:after {
 content: "";
 display: table;
 clear: both;
}

.quarter-column {
 float: left;
 width: 25%;
 padding: 5px;
}

.third-column {
 float: left;
 width: 33.33%;
 padding: 5px;
}

.half-column {
 float: left;
 width: 50%;
 padding: 5px;
}

h1 {
 font-size: 1.5em;
}

h2 {
 font-size: 1.3em;
}

img {
 width: 100%;
 object-fit: contain;
}

.blog-date {
 font-size: 0.9em;
 font-style: italic;
}

.footer {
 margin: 200px auto auto 0px;
 background-color: #222;
 color: white;
 padding-top: 20px;
 font-size: 0.9em;
 text-align: center;
}

.link-button {
 background-color: beige;
 padding: 1px;
}

@media screen and (max-width: 600px) {
.topnav {display: none;}
}
  
/* Switch visibility on screens 600px or smaller */
@media (max-width: 600px) {
#logo {
 display: none;
}

#mobile-logo {
 display: block;
 }
}


/* Sidebar and content adjustments for screens less than 600px wide */
@media screen and (max-width: 600px) {
 .sidebar {
  width: 100%;
  height: auto;
  position: relative;
 }
 .sidebar a {
  text-align: center;
  float: none;
  border-bottom-style: solid;
  border-width: 1px;
 }
 div.content {margin-left: 0px;}
 div#logo {max-height: 50%;}
}

/* Adjust columns when the screen is less than 1000px wide (make them stack on top of each other) */
@media screen and (max-width: 1000px) {
 .leftcolumn, .rightcolumn {   
  width: 100%;
  padding: 0;
 }
}

/* Adjust columns when the screen is less than 800px wide (make them stack on top of each other) */
@media screen and (max-width: 500px) {
 .half-column {
  width: 100%;
 }
 .third-column {
  width: 100%;
 }
 .quarter-column {
  width: 100%;
 }
}