body{
 margin:0px;
 padding:0px;
 background-color:OldLace;
 font-family:courier, monospace;
}

#header {
 background-image:url(images/paperHeader.png);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size:contain;
 padding-top:50px;
 padding-left:0px;
 padding-bottom:0px;
 margin-top:0px;
 text-shadow:0px 0px 1px #000000;
 display:flex;
}

h1{
  background-image:url(/images/maskingtape.png);
  display:inline-block;
  background-size:contain;
  background-repeat:no-repeat;
  height:50px;
  width:275px;
  text-align:center;
  align-content:center;
  margin:30px;
}
  
h2 {
  margin:auto;
  background-image:url(/images/maskingtape.png);
  background-size:contain;
  background-repeat:no-repeat;
  height:50px;
  width:300px;
  text-align:center;
  vertical-align:middle;
  padding:17px 10px;
  grid-column:1 / span 3;
}


nav{
  display:flex;
  flex-direction:column;
  flex:10%;
  float:left;
  padding:20px;
  align-content:center;
}

button{
  background-image:url(/images/blacktape.png);
  background-size:contain;
  background-repeat:no-repeat;
  height:50px;
  width:150px;
  text-align:center;
  align-content:center;
  color:#ffffff;
  vertical-align:middle;
  font-family:"Courier New", monospace;
  font-weight:bold;
  font-size:20px;
  margin:0;
  background-position:center;
  border:none;
  background-color:transparent;
}

button:hover {
  transform:rotate(-5deg);
}

.button2{
  background-image:url(/images/blacktape_flipped.png);
  background-size:contain;
  background-repeat:no-repeat;
  height:50px;
  width:150px;
  text-align:center;
  align-content:center;
  color:#ffffff;
  vertical-align:middle;
  font-family:"Courier New", monospace;
  font-weight:bold;
  font-size:20px;
  margin:5px 0px 5px 0px;
  background-position:center;
}

.button2:hover {
  transform:rotate(5deg);
}

.bodycontainer {
  display:flex;
}

main{
  flex:80%;
  padding:10px 10px 10px 0;
}

.corkboard{
  border-image-repeat: stretch;
  border-image-slice: 30 30 30 30 fill;
  border-image-source: url('images/corkboard.jpeg');
  border-image-width: 20px;
  padding:30px;
  margin:0 20px 0 0;
  display:grid;
  grid-template-columns:auto auto auto;
  width:80%;
}

.postit{
  background-color:#ffe378;
  padding:2vw;
  height:200px;
  overflow:scroll;
  margin:0.5vw;
  width:200px;
  box-shadow:0px 2px 5px;
}

.graphpaper {
  background-image:url(/images/graphpaper_bg.jpeg);
  background-repeat:no-repeat;
  background-size:cover;
  overflow:auto;
  padding:30px;
  width:960px;
  height:500px;
}

.polaroidContainer{
  background-image:url(/images/perforatedpaper.png);
  background-repeat:no-repeat;
  padding:10px 10px 10px 40px;
  margin:0px 40px 0px 0px;
  height:75%;
  display:inline-block;
}

.polaroid{
  background:OldLace;
  padding:10px;
  margin:10px;
  border-radius:5px;
  text-align:center;
  box-shadow:2px 2px 5px;
  font-weight:normal;
  float:left;
}

.pagedoll {
  float:right;
}

@media (max-width:600px) {
  nav {
    flex-direction:row;
    padding:0px 5px 0 5px;
    flex-wrap:wrap;
    justify-content:space-evenly;
  }
  button {
  height:50px;
  width:150px;
  }
  .corkboard {
    display:grid;
  margin:0px 10px 0px 10px;
  grid-template-columns: 50% 50%;
  grid-template-rows:auto auto auto auto;
  width:300px;
  padding:30px;
  overflow:auto;
  }
  h2{
    grid-column-end: span 2;
  }
  .button2 {
    height:50px;
    width:150px;
  }
  .postit {
    width:180px;
    grid-row-start:3;
  }
  .pagedoll img{
    width:75px;
    grid-row-start:4;
  }
  .polaroidContainer {
    width:220px;
    margin:0px;
    grid-row-start:2;
    grid-column-end:span 2;
    overflow:auto;
    border:solid;
    height:300px;
  }
  
  .polaroid {
    display:inline;}
  
  .polaroid img {
    width:75px;
    height:75px;
  }
}