body {
  background-color: black;
  font-size: 17px;
  color: black;
background: url('https://wrender.neocities.org/Backgrounds/corkboardtile.jpg') repeat;
  }

.pin {
width: 100px;
height: 100px;
border: solid 1px;
}

/* paper */
.main, .main-first {
margin: 0 auto;
  width: 850px;
min-height: 900px;
  border: 1px outset #fff;
color: #2c2725;
margin-top: 60px;
background: url('https://wrender.neocities.org/Backgrounds/paperbg.png') repeat;
  }
.main-first {
margin-top: 60px;}

.content { 
width: 800px;
padding: 15px 25px 15px 25px;
margin-left: 30px;
font-family: hoefler text;
}

a:link {
color: #000;
}
a:visited {
color: purple;
}
.sticky-note {
  position: absolute; 
  width: 250px; 
  height: 250px; 
  background-color: #f7f37a; 
  padding: 0px 10px 5px 10px; 
  font-family: noteworthy; 
  font-size: 20px;
}

.sticky-note-nav {
  position: fixed; 
  width: 250px; 
  height: 250px; 
  background-color: #f7f37a; 
  padding: 0px 10px 5px 10px; 
  font-family: noteworthy; 
  font-size: 20px;
}


.flex-container {
  display: flex;
  flex-direction: row;
  padding: 0px;
}




/*For narrow screens*/
@media (max-width: 1100px) {
    .sticky-note {
      width: 200px;
      }
    .content {
      width: 400px;
      margin-left: 0 auto;
      }
.main {
width: 500px; 
}
}

/*Mobile compatibility.*/
@media (orientation: portrait) {
  .sticky-note-nav {
position: static;
    margin: 0 auto;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 30%;
    }
    .main {
      margin: 0 auto;
      width: 80%;
      padding: 0px;
    }
    .main-first {
      width: 80%;
      padding: 0px;
    }
  .content {
    margin: 0 auto;
    margin-top: 20px;
    width: 80%;
    }

}