/* COLORS: */
:root {
  --color-zero: darkkhaki;
  --color-one: maroon;
  --color-two: cornsilk;
  --color-three: crimson;
  --color-four: red;
  --color-five: black;
}

/* ELEMENTS: */
body {
  background-color: var(--color-zero);
  font-family: 'Trebuchet MS', sans-serif;
}

p,h1,h2,h3,h4,li {
  color: var(--color-one);
}

h1,h2,h3,h4 {
  font-size: 30px;
}

p,li,a {
  font-size: 18px;
}

p.title {
  font-size: 23px;
  color: var(--color---one);
}

a#linktitle {
  font-size: 23px;
  color: var(--color---one);
}

li.li2 {
  list-style-type: none;
}

a {color: var(--color-three);}

a:hover {color: var(--color-four);}

a:active {color: var(--color-one);}

button#load1,button#load2 {
  cursor: pointer;
  background-color: var(--color-three);
  color: var(--color-two);
  border: 2px solid var(--color-one);
  padding: 5px;
  margin: 5px;
}

button#load2 {display: none;}

button#load1:hover,button#load2:hover {
  background-color: var(--color-four);
  color: hotpink;
}

button#load2:hover {display: none;}

/* MOBILE ADJUSTMENTS: */
@media (max-width: 600px) {
  .wrapper {flex-direction: column!important;}
  div#title {height: 100px !important;}
  div#nav {order: 2!important;}
  div#home {order: 1!important;}
  h1,h2,h3,h4 {font-size: 20px!important;}
  p,li,a {font-size: 15px!important;}
  p.title,a#linktitle {font-size: 18px!important;}
  div.post, div.mcarticle {width: 100%!important;}
  .staff {width: 33%!important;}
}

/* CLASSES: */
.wrapper {
  display: flex;
  flex-direction: row;
}

.mustardwrapper {
  display: flex;
  flex-direction: row;
}

.candy {
  border: 2px dotted var(--color-five);
  margin: 5px;
}

.staff {
  width: 15%;
  padding: 5px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  overflow-wrap: break-word;
}

.staffimg {
  border: 2px dotted var(--color-five);
  width: 100%;
}

/* DIVS: */
div#wholepage {
  width: 100%;
}

div#title {
  margin: 5px;
  flex-grow: 1;
  background-image: url("mc/logo.png");
  background-size: 100%;
  background-position: center;
  height: 300px;
  background-color: var(--color-two);
  cursor: pointer;
}
/* https://unsplash.com/photos/a-field-full-of-white-flowers-and-green-leaves-5auG1D6dePY */

div#nav {
  order: 1;
  flex-grow: 1;
  padding: 20px;
  background-color: var(--color-two);
}

div#home {
  order: 2;
  flex-grow: 16;
  padding: 20px;
  background-color: var(--color-two);
}

div#footer {
  flex-grow: 1;
  padding: 5px;
  text-align: center;
  background-color: var(--color-two);
}

div.post {
  padding: 0px;
  margin: 5px;
  width: 25%;
  height: 200px;
  overflow: auto;
  resize: both;
  border: 2px dotted var(--color-five);
}

div.post img {
  width: 100%;
}

div.mcarticle {
  padding: 0px;
  margin: 5px;
  width: 33%;
  height: 200px;
  overflow: scroll;
  border: 2px solid var(--color-five);
  text-align: center;
  background-color: var(--color-one);
  color: var(--color-two);
}

div.mcarticle div.tumblr-post {
  width: 100%;
}