* 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(bkg.png);
    cursor: url(cursor.png), default;
    font-size: 15px;
    overflow: hidden;
    max-width: 100%;
    letter-spacing: 1px;
    margin-left: 0px;
    margin:auto;
    font-family: 'BalsamiqSans_Regular';
}


        .maincontainer {
          height: 100%;
          width: 100%;
          max-width:100%;
          align-items: center;
          justify-content: center;
          display:flex;
          position:fixed;
          
          
}

          
    
    @keyframes tiltAnim {
            0% {
                  transform:rotate(0deg);
              }
              50% {
                  transform:rotate(5deg);;
              }
              100% {
                  transform:rotate(10deg);
              }
    }
    
    
    .lace-top {
    background-image: url(lace_top.png);
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height: 36px;
    z-index: 2;
}

.lace-bottom {
    background-image: url(lace_bottom.png);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 36px;
    z-index: 2;
}

.divider{
  background-image: url(newdivider.png);
  background-size: 100%;
  height: 76px;
  width: 290px;
  left:10px;
  top:145px;
  position: absolute;
}


.pagedoll{
  background-image: url(pagedoll.gif);
  top:145px;
  right:0px;
  height: 298px;
  width: 333px;
  position: absolute;
  
}

.welcomebar{
  background-image: url(welcome1.gif);
  top:180px;
  left:10px;
  height: 157px;
  width: 293px;
  position: absolute;
  
  text-shadow:0px 2px #ffdeee;
  font-weight:bold;
  font-size: 60px;
  font-family: lace;
  color:#fea2c5;
}

    
    
    .header {
      background-image: url(petsized_banner.png);
      top:2px;
      height: 138px;
      width: 554px;
      position: absolute;
      
      animation: upDown 1s linear infinite;
    }
    
    @keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

    
    .window { /*551x983*/
      background-image: url(window.png);
      background-size: 100%;
      background-repeat: no-repeat;
      margin:auto;
      height: 551px; 
      width: 983px;
      /*max-width: 100%;*/
      
      display: flex;
      justify-content: center;
      align-items: center;
      position:fixed;
    }
    
    .aboutcontainer {
      background-image: url(boundbox1.png);
      background-size: 100%;

      display:flex;
      align-items: center;
      justify-content: center;

      position:relative;
      padding:10px;
      overflow:auto;
      
        max-width:inherit;
        left: 220px;
        top: 8px;
        height: 410px;
        width: 633px;
        text-align:center;
        
        animation: fadeInAnimation ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
    
    @keyframes fadeInAnimation {
              0% {
                  opacity: 0;
              }
              50% {
                  opacity: 0.5;
              }
              100% {
                  opacity: 1;
              }
          
    }
    
    .linkcontainer {
      background-image: url(boundbox1.png);
      background-size: 100%;
      
      display:flex;
      align-items: center;
      justify-content: center;
      
      position:relative;
      padding:10px;
      overflow:auto;
      
        left: -687px;
        top: 8px;
        height: 410px;
        width: 170px;
        max-width:100%;
        text-align:center;
    }
    
    .buttonabt{
      background-image: url(about_button.png);
      background-size:100%;
      top:165px;
      left:20px;
      height: 50px;
      width: 142px;
      position: absolute;
    }
    
    .buttonabt:hover{
      background-image: url(hover_about.png);
    }
    
    .buttonsoc{
      background-image: url(socials_button.png);
      background-size:100%;
      top:375px;
      left:20px;
      height: 50px;
      width: 142px;
      position: absolute;
    }
    
    .buttonsoc:hover{
      background-image: url(social_hover.png);
    }
    
    .buttontos{
      background-image: url(tos_button.png);
      background-size:100%;
      top:305px;
      left:20px;
      height: 50px;
      width: 142px;
      position: absolute;
    }
    
    .buttontos:hover{
      background-image: url(tos_hover.png);
    }
    
    .buttoncoms{
      background-image: url(commission_button.png);
      background-size:100%;
      top:235px;
      left:20px;
      height: 50px;
      width: 142px;
      position: absolute;
    }
    
    .buttoncoms:hover{
      background-image: url(commissions_hover.png);
    }
    
    
    .profile {
      background-image: url(iconn2.png);
      background-size:100%;
      top:2px;
      left:20px;
      height: 146px;
      width: 148px;
      position: absolute;
      
      transition: transform .7s ease;
      
    }
    
    .profile:hover{
      background-image: url(hovericon2.png);
      transform:rotate(2deg);
    }
    
    .textbox {
      background-image: url(boundbox1.png);
      background-size: 100%;
      padding:2px;
      overflow:auto;
        left: 0px;
          top: 220px;
          height: 200px;
          width: 310px;
          position: absolute;
          text-align: center;
          font-family:kids;
          font-size:29px;
    }
    
    .credit {
      
      background-image: url(boundbox1.png);
      border-top: dashed;
      border-color: #ffdeee;
      top: 280px;
      left: 0px;
      height:70px;
      width: 360px;
      position: relative;
      font-family:kidsplay;
      font-size:23px;
      padding:0px;
      
    }
    
    .image-center {
      object-fit: contain;
      height: 50px;
      width: 47px;
      object-position: center;
    }
    
    @font-face {
      font-family: kids;
      src: url(kidsplay.ttf);
    }
      
    p {
      
      font-family:kids;
      color: #bc9678;
     
    }
    
    /*emphasize*/
    p em {
      color:#FFDEEE;
      font-weight:bold;
      font-style:normal;
    }
    
    h2 {
  font-family:pixel;
  color: #2C2024;
  text-align:center;
    }

    
    li {
      list-style-image: url(flying-heart.gif);
    }
    
    /*about page*/
    
    .aboutbanner {
       
       background-image: url("about.png");
       background-size: 100%;
       top: 0px;
       left: 0px;
       position: absolute;

     }
    
    /* ticker stuff */
    .ticker-container .ticker-tape {
  height: 30px;
  bottom:690px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 810px;
}
        
        .ticker-container .ticker-tape:before, .ticker-container .ticker-tape:after {
  background: linear-gradient(to right, #fadce9 0%, rgba(255, 255, 255, 0) 10%);
  content: "";
  height: 100px;
  position: absolute;
  width: 810px;
  z-index: 2;
}
        
        .ticker-container .ticker-tape:after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
 
.ticker-container .ticker-tape:before {
  left: 0;
  top: 0;
}
        
        .ticker-container .slide-track {
  -webkit-animation: scroll 18s linear infinite;
          animation: scroll 18s linear infinite;
  display: flex;
  width: calc(88px * 28);
}
        
      .ticker-container .slide {
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

        /* Animation */
@-webkit-keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-98rem, 0, 0);
  }
}
@keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-98rem, 0, 0);
  }
}