/* Set variables */
:root {
  --green-color:#BCED09;
  --white-color:#FFFFFF;
  --midnight-color:#07393C;
  --pink-color:#F90093;
  --black-color:#000000;
  --periwinklelight:#c6c8ee;
  --periwinkledark:#bbb6df;
  --raisin:#2d2327;
  --rose:#bd6b73;
  --amaranth:#a30b37;
  --offwhite:#fcfcff;
}
html {
  background:#bbb6df;
}
/*
@font-face {
  font-family: 'yolk_font';
  src: url('https://marykahani.neocities.org/yolk_font.ttf?#iefix') format('truetype');
}
body, h1, h2, h3, a {
  font-family:yolk_font;
}
*/
body {
  height:100%;
  background-position: center; 
  background-size: cover; 
  cursor: url('images/witchfinger_pointer.png'), auto;
}

* {
  box-sizing:border-box;
  font-family: 'Trebuchet MS', sans-serif;
  border: 1px dotted #2d2327;
  border-radius:0.5rem;
}
.layout {
  display:grid;
  grid-template-areas:
    "header  header   header  header"
    "nav     main     main    aside2"
    "aside1  main     main    aside2"
    "aside1  main     main    aside2"
    "aside1  main     main    aside2"
    "aside1  main     main    aside2"
    "aside1  main     main    aside2"
    "footer  footer   footer  footer";
  grid-template-columns:200px 1fr 1fr 150px;
  gap:1rem;
  place-content:center;
  max-width:70%;
  margin-left:auto;
  margin-right:auto;
  margin-top:20px;
  padding:5px;
}
#content {
  background:rgb(252 252 255/ 0.3);
  /*background:#fcfcff;
  opacity:0.4;*/
 /* border: 4px solid #2d2327;*/
  border-radius:0.5rem;
}
p {
  color: #2d2327;
}
h1, h2 {
  color:#a30b37;
}
header {
  min-height: 10rem;
  position:relative;
  background-image:url("headerpic.png");
  background-size:contain;
}
header h1 {
  position:absolute;
  bottom:-40px;
  left:-10px;
  font-size:3rem;
  transform:rotate(-5deg);
  border-radius:0;
  padding:0.5rem;
  background:#bbb6df;
  border: 3px solid #2d2327;
}
.navitem:hover {
  background:#fcfcff;
}
nav li {
  list-style-type: none;
}
.placeholder {
  background:#bd6b73;
  min-height:10rem;
  transform:rotate(4deg);
  border-radius:0;
  padding:0.5rem;
  margin-right:-0.6rem;
  justify-content:center;
  margin-bottom:2rem;
}
.placeholder p {
  text-align:center;
}
.pic {
  background: #fcfcff;
  border-radius:0;
  min-height:7rem;
}
.codebox {
  font-family: monospace;
  padding-left:5px;
}
.blogpost {
  display:grid;
  grid-template-areas:
    "blogdate"
    "blogcontent";
  grid-row-gap:0;
  max-width:100%;
  margin-left:0;
  margin-right:auto;
  margin-top:0;
  padding:1px;
  background:rgb(189 107 115/ 0.3);
  border:none;
}
.blogdate {
  color: #2d2327;
  margin:0px;
  border:none;
}
.blogcontent {
  border:none;
}
.urgentmarquee {
  background:#2d2327;
  color: #fcfcff;
}
#mediashare {
  background:#2d2327;
}
.collapsible {
  background:rgb(189 107 115/ 0.5);
  color: #fcfcff;
  cursor: pointer;
  width: 50%;pic
  border: none;
  text-align: left;
  outline: none;
  font-size:1rem;
  padding:0.25rem;
}

.active, .collapsible:hover {
  background-color: #fcfcff;
  color: #2d2327;
}

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

#statuscafe {
    margin-top:1rem; 
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}