* {
   box-sizing: border-box;
}

body {
   margin: 0;
   font-family: Montserrat;
   background-color: #eeeeff; 
   color: #5a5961;
}

article-title {
   font-family: "Montserrat";
   font-size: 36px;
   font-style: thin;
   font-variant: thin;
   font-weight: 450;
   line-height: 40px;
}

h1 {
   font-family: "Montserrat";
   font-size: 36px;
   font-style: thin;
   font-variant: thin;
   font-weight: 450;
   line-height: 40px;
}

h2 {
   font-family: "Montserrat";
   font-size: 24px;
   font-style: thin;
   font-variant: thin;
   font-weight: 450;
   line-height: 26px;
}

h3 {
   font-family: "Montserrat";
   font-size: 20px;
   font-style: thin;
   font-variant: thin;
   font-weight: 450;
   line-height: 22px;
}

p {
   font-family: "Montserrat";
   font-size: 18px;
   font-style: thin;
   font-variant: thin;
   font-weight: 400;
   line-height: 20px;
}

/* Style the header */
.header {
   padding: 20px;
   text-align: center;
   font-size: 36px;
}

.row {
   display: -ms-flexbox;
   /* IE10 */
   display: flex;
   -ms-flex-wrap: wrap;
   /* IE10 */
   flex-wrap: wrap;
   padding: 0 4px;
}

/* Create three unequal columns that floats next to each other */
.column {
   float: left;
   padding: 5px;
   /*height: 3000px; /* Should be removed. Only for demonstration */
}

/* Left and right column */
.column.side {
   width: 15%;
}

/* Middle column */
.column.middle {
   width: 70%;
}

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

/* Style the footer */
.footer {
   padding: 20px;
   text-align: center;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
   .column {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
   }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
   .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
   }
}

a:link {
   color: #aebb8f;
   background-color: transparent;
   text-decoration: none;
}

a:visited {
   color: #9da195;
   background-color: transparent;
   text-decoration: none;
}

a:hover {
   color: #686e5a;
   background-color: transparent;
   text-decoration: underline;
}

a:active {
   color: #6d9c00;
   background-color: transparent;
   text-decoration: underline;
}

button {
   background-color: #fff7ee;
   border: 1px solid #615e59;
   border-radius: 4px;
   opacity: 0.8;
   color: #615e59;
   padding: 2px 4px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-family: "Montserrat";
   font-size: 18px;
   font-style: thin;
   font-variant: thin;
   font-weight: 400;
   line-height: 20px;
}

.disabled {
   opacity: 0.6;
}

button:hover {
   opacity: 1
}

.collapsible {
   background-color: #fff7ee;
   color: #615e59;
   cursor: pointer;
   padding: 18px;
   width: 80%;
   border: none;
   text-align: left;
   outline: none;
   /* font-size: 15px; */
}

.active,
.collapsible:hover {
   opacity: 0.8;
}

.content {
   padding: 0 18px;
   display: none;
   overflow: hidden;
   background-color: #fff7ee;
}