body{
  background-image: url(linedpaper.jpg);
  background-size: 542px
  
}
.main{
  width:75%;
  margin:auto;
  align-content: center;
  border-left-width: 30px;
  border-left-style: solid;
  border-image: url('edge.png') 0 0 0 200 repeat;
  background-color: #ededed;
  box-shadow: 20px 12px 218px #929292;
}

.header{
  width:100%;
  height:100px;
  background-image: url(paper.gif);
  filter: brightness(149%);
  color: #434343;
  text-align: center;
  font-size:50px;
  line-height: 100px;
  font-family:"Lucida Handwriting", cursive;
  white-space: nowrap
}
.scrolling-box {
      top: 0;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      background: #cecece;
      color: #6c6c6c;
      z-index: 1000;
      background-image: url(paper.jpg);
      background-size:379px;
    }

    .scrolling-text {
      display: inline-block;
      animation: scroll-left 5s linear infinite;
      font-family:"Lucida Handwriting", cursive
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }

.topbar ul{
  text-align: center;
  margin:auto;
  padding: 12px
}

.topbar li{
  list-style-type: none;
  display: inline
}

.topbar a{
  text-decoration: underline dashed blue;
  padding: 5px;
  color: black;
  font-family:"Lucida Handwriting", cursive;
  font-size: 20px
}
.topbar a:hover{
  background-image:url(paper.jpg);
  background-size: 200px
}

.topbar a.active{
  background-color: yellow;
  color: #383b00;
  text-decoration: underline red;
}

.topbar a.active:hover{
  background-image:url(yellowpaper.jpg);
  background-size: 200px
}

.text{
  font-family:"Lucida Handwriting", cursive;
  font-size: 15px;
  display:inline-block;
}

.separator{
  width: 50%
}

.text p a{
  background-color: yellow;
  color: #383b00;
  text-decoration: underline dashed blue;
}

.text p a:hover{
  background-image:url(yellowpaper.jpg);
  background-size: 200px
}


.greeting {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  width: 95%;
  height: 150px;
  position: relative;
  background-image:url(grid.jpg);
  background-size:630px;
  overflow: hidden;
  text-align: center
}

.animated-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: black;
  stroke-width: 4;
  stroke-dasharray: 10 10;
  animation: dashLoop 2s linear infinite;
  pointer-events: none;
}


@keyframes dashLoop {
  to {
    stroke-dashoffset: -40;
  }
}



.mesticker{
  position: absolute; 
  top: 95px; 
  left: 80%; 
  width:400px;
}


.blinkies img{
  width: 200px
}