/* Trying out a font! */
@font-face {
  font-family: "crayon-font";
  src: url("resources/crayon.ttf") format("truetype");
}

/* Default styling */
body {
  background-color: white;
  color: black;
  font-family: Verdana;
  font-size: 16px;
}

/* Display side-by-side */
.flexbox {
  display: flex;
}
.flexbox > p {
  padding: 0 1em;
}

/* Navigation */
nav {
  background-color: rgb(135, 206, 250, 0.75);
  border: 2px solid skyblue;
  padding: 1em;
  max-width: 10em;
}
nav > img {
  object-fit: scale-down;
}
nav > menu {
  padding: 0;
  min-width: fit-content;
}
nav > menu > li {
  list-style: none;
}
nav > menu > li::before {
  content: "\273F\0020";
}

/* Main */
main {
  border: 2px solid pink;
  padding: 1em;
  width: 100%;
}
img {
  /* fluid images */
  max-width: 100%;
}

/* Articles */
article > img {
  max-width: 33.33%;
  height: auto;
}

/* Headers */
h1 {
  color: hotpink;
  font-family: crayon-font;
}
h2,
h3 {
  font-weight: normal;
}

/* Footer */
footer {
  font-size: 0.75em;
}

.two-column {
  columns: 2;
}
.strawberry-li {
  /*list-style:none;*/
  list-style: url("images/inline/strawberry_1.gif");
  line-height: 150%;
}

/* Status Cafe */
#statuscafe {
  padding: 0.5em;
  border: 1px solid darkviolet;
  width: fit-content;
}
#statuscafe-username {
  margin-bottom: 0.5em;
}

.funfact {
  padding: 0.5em;
  border: 1px solid darkviolet;
  width: fit-content;
}
.funfact-content {
  margin-top: 0;
  margin-bottom: 0;
}

/* grid for MASH */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;

  grid-gap: 5px;
  box-sizing: border-box;
  /* background-color: #8cffa0; */
  padding: 5px;
}
.grid > div {
  background-color: rgb(195, 177, 225, 0.4);
  padding: 20px;
}
.grid > div > h2 {
  margin: 5px;
}
.grid > div > ul {
  /* list-style: inside; */
  padding-left: 0;
}