/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
    background-image: url("background2.png");
 background-color: #cccccc;
    overflow-x: hidden !important;
}
a {
  color: transparent;
}
.first {
  width: 200px;
  height: auto;
  background-color: white;
  overflow: auto;
  border-color: #b9fffc;
  border-style: groove;
  margin: auto;
  text-align: center;
}
.heart {
  display: block;
  margin: auto;
  text-align: center;
}
@font-face {
 font-family: "Hachi Maru Pop", cursive;
 }
 * {
   font-family: "Hachi Maru Pop", cursive;
   font-size: 12px;
 }
.background {
  width:900px;
  height:1200px;
  border: 8px double #b9fffc;
  background-color: white;
  margin: auto;
  border-radius: 10px;
}
.banner {
  width:850px;
  height: 108px;
  background-image: url("banner.png");
        background-repeat: no-repeat;
        background-position: center; 
          background-color: white;
         border: 8px double #b9fffc;
           border-radius: 10px;
             background-size: 105% 105%;
             margin: auto;
}
.wrapper {
  /* Clips the overflowing text outside this container */
  max-width: 850px;
  overflow: hidden;
  margin: auto;
}

.marquee {
  /* Prevents text from wrapping to the next line */
  white-space: nowrap;
  /* Ensures the paragraphs are inline */
  display: inline-block;
  /* Applies the animation */
  animation: marquee 15s linear infinite;
}

.marquee p {
  /* Keeps the text elements inline */
  display: inline-block;
}

/* Defines the animation */
@keyframes marquee {
  0% {
    /* Starts the text at the initial position (0) */
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* Moves the text 50% of its width to the left to create the loop */
    transform: translate3d(-50%, 0, 0);
  }
}
.navi {
  width:200px;
  height:400px;
  border: 8px double #b9fffc;
  background-image: url("context.png");
  background-size: 200px 200px;
  border-radius: 10px;
  position: absolute;
  left:220px;
}
.aboutbutton {
    width:120px;
  height: 50px;
  background-image: url("aboutme.png");
        background-repeat: no-repeat;
        background-position: center; 
             background-size: 105% 105%;
             margin: auto;
}
.diarybutton {
    width:120px;
  height: 50px;
  background-image: url("diary.png");
        background-repeat: no-repeat;
        background-position: center; 
             background-size: 105% 105%;
             margin: auto;
}
.shrinesbutton {
    width:120px;
  height: 50px;
  background-image: url("shrines.png");
        background-repeat: no-repeat;
        background-position: center; 
             background-size: 105% 105%;
             margin: auto;
}
.info {
    width:330px;
  height:400px;
  border: 8px double #b9fffc;
  background-image: url("context.png");
  background-size: 200px 200px;
  border-radius: 10px;
  position: absolute;
  left:450px;
  bottom: 113px;
}
.mood {
    width:330px;
  height:330px;
  border: 8px double #b9fffc;
  background-image: url("context.png");
  background-size: 200px 200px;
  border-radius: 10px;
  position: absolute;
  left:450px;
  top: 630px;
}
.moodbox {
    width:230px;
  height:230px;
  background-color: white;
  border: 5px dotted #b9fffc;
  background-size: 200px 200px;
  margin: auto;
  position: absolute;
  top: 30px;
  left: 45px;
    text-align: center !important;
}
.kafka {
    width:200px;
  height:200px;
  background-image: url("kafka.png");
  border: 5px dotted #b9fffc;
  background-size: 200px 200px;
  position: absolute;
  top: 650px;
  left: 850px;
}
.lauma {
    width:200px;
  height:200px;
  background-image: url("lauma.png");
  border: 5px dotted #b9fffc;
  background-size: 200px 200px;
  position: absolute;
  top: 870px;
  left: 850px;
}
.pagedoll {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  height: 350px;
  width: auto;
  
}