body {
  background: #F7E5D8;
  color: #33293d;
}

a {
  color: #AC1B47;
}

a:hover {
  color: #F09942;
}

#hero {
  width: 100%;
  align-items: center;
  justify-content: space-between;
	border-bottom: 1px solid #333;
  z-index: 999;
}
#hero #sitetitle img {
  width: 150%;
  padding: 0;
}
#hero #mname img {
  width: 150px;
  padding: 0;
  margin-bottom:-105px;
}

#badge {
  max-width:100%;
  grid-area: badge;
}

#text {
  text-align:justify;
  grid-area: text;
}

#social {
  grid-area: social;
}

#stuff {
  grid-area: stuff;
}

#selfie img {
  image-rendering: pixelated;
}

#sungrid {
display: grid;
column-gap: 15px;
grid-template-columns: 200px 4fr;
grid-template-areas:
  "badge text"
  "badge social"
  "stuff stuff";
margin-bottom: 1em;
}

@media screen and (max-width: 666px) {
  #sungrid {
    grid-template-areas:
      "badge text"
      "social social"
      "stuff stuff";
  }
}
@media screen and (max-width: 560px) {
  #sungrid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "social"
      "stuff"
      "badge";
  }

  #badge {
    width:33%;
    justify-self:center;
  }

  #selfie img {
    width: 100%;
  }
}


#stuff {
  columns: 2;
  column-gap: 27px;
  margin-bottom: 21px;
  margin-top: 2em;
}
#stuff h2 {
  margin-top: 0;
}
#stuff > div {
  display: inline-block;
}

@media screen and (max-width: 930px) {
  #stuff {
    columns: 1;
    text-align: center;
  }
}

a:active {
  background-color: #fff;
}

.posterboard
{
  flex-grow:2;
  max-width:66%;
}

.postit {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.paper {
  max-width:33%;
  flex-shrink:1;
}

.paper img {
    border: 1px solid #d3d3d3;
    transform: rotate(0.01turn);
    margin-left:-20px;
}

#twide {
  columns:2;
}

#twide ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#twide ul li {
  border: 1px solid #d3d3d3;
  background-color: white;
  padding: 15px;
  margin: 0 9px;
}

#twide ul li:nth-child(even) {
  transform: rotate(-0.003turn) translateX(6px);
}
#twide ul li:nth-child(odd) {
  transform: rotate(0.003turn);
}
#twide ul li:nth-child(6n-3) {
  transform: rotate(0.003turn) translateX(-6px) translateY(4px);
}
#twide ul li:nth-child(6n) {
  transform: rotate(-0.003turn) translateX(-6px);
}

@media screen and (max-width: 930px) {
  #twide {
    columns: 1;
  }
}

.entry {
  transform: rotate(0.005turn);
  padding: 1.5em;
  background-color: #fff;
  border: 1px solid #d3d3d3;
}