body {
  
  background-image: url("/bckg.jpg");
  color: purple;
  font-family: Verdana;
  font-family: "Sofia", sans-serif;
  
}
.special {
  background-color: #fcd7f6;
  padding: 5px;
  font-family: "pixelcastle", sans-serif;
  }
  
.special1 {
  background-color: #fcd7f6;
  padding: 5px;
  text-align: center;
  }
  
.containe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px;
}

nav{
  grid-column:1;
  grid-row:1;
  }

form {
  grid-column: 6;
  grid-row: 2;
  }

header {
  grid-column: 1 / 6;
  grid-row: 1;
  text-align: center;
}
main {
  grid-column: 2/3;
  grid-row: 3/5;
}
footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

aside {
  grid-column: 5;
  grid-row: 3/4;
  border-radius: 15px;
  padding: 5px;
  background-color: #fcd7f6;
  color: purple;
  width: 80%;
  height: 100%;
  text-align: center;
  position: sticky;
  top: 0;
  font-family: "pixelcastle";
}

ul li a {
  text-decoration: none;
  }

.box1 {
   grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  }
  
.nbar{
 list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fcd7f6;
  grid-column-start:1;
  grid-column-end:6;
  grid-row:2;
   text-align: center;
   justify-content: center;
   position: sticky;
  top: 0;
  font-family: "pixelcastle";
  
}

.nbar ul li {
  float: left;
   text-align: center;
  list-style-type: none;
}

.nbar ul li a {
  display: block;
  color: #e302ba;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}


ul li a:hover {
  background-color: #834794;
  
}

.box2 {
  grid-column: 6;
  grid-row: 2;
  }
  
.posts {
  border-radius: 15px;
  border-color: #ffbff4;
  padding: 5px;
  background-color: #fcd7f6;
  color: purple;
  width: 100%;
  height: 100%;
  text-decoration: none;
  }
  a {
     text-decoration: none;
    }
  a:hover {
    background-color: #834794;
    }

.page {
  position: relative;   /* important so stickers position relative to the page */
}

.sticker {
  position: absolute;
  width: 120px;
  pointer-events: none; /* optional: makes them not block clicks */
  filter: drop-shadow(3px 4px 3px rgba(0,0,0,0.3));
}

.sticker1:hover {
  transform: scale(1.5) rotate(5deg);
}


.sticker1 {
  transform: translateY(-15px) translateX(60px) rotate(-10deg);
  z-index: 3;
  align-self: flex-end;
}

.sticker1-here {
  display: flex;
  flex-direction: column;
  z-index: 3;
  justify-content: space-between;
}