@font-face {
  font-family: 'comic-sans';
  font-style: normal;
	font-weight: 400;
  src: url(./fonts/COMIC.woff) format('woff');

  
}

body {
  background-image:url("./bg/corkbg2.png");

  cursor:url("./graphics/cursor1.gif"),auto;
  font-family: "comic-sans";
  font-size: 22px;
  color:white;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}

.bbutton{
 position:fixed;
 transform-origin: top left;
 transform:scale(1.0);
 left:0px;
 z-index:5;
}

main{
  width:100%;
margin-top:500px;
margin-left:auto;
margin-right: auto;
background-color:red;

}

.note {
  position: absolute;
  width:400px;
  height:400px;
  transform-origin: top center;

}

.note p{
transform-origin: top center;
  width:400px;
  height:400px;
  color: black;
  overflow:scroll;
  padding-top:40px;
  border:50px solid transparent;
 border-top:20px solid transparent;
  border-image: url(./graphics/note_hd.png) 48 90 98 72 fill / 48px 90px 98px 72px;
  
}


.tack{
  position: relative;
  margin-left:50%;
 margin-right:50%;
 top:50px;
  z-index:1;
}

.note .tack{
 top:80px; 
}

.photo{
  transform-origin: top center;
 position:absolute;

  max-width:1000px;
 height:auto;
}
.pic {
transform-origin: top center;
 max-width:1000px;
 height:auto;
 border:20px solid white;
 filter: drop-shadow(5px 10px 10px black);
 z-index:-1;
}