.container {
    position: relative;
}
.image2 {
    position: absolute;
    left: -100px;
}


#statuscafe {
    padding: .4em;
    background-color: 
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 2em 0.5em 1em;
}

  
.floral {
  border: 30px solid transparent;
  padding: 10px;
  border-image: url(https://dollarchive.neocities.org/css/borders/floral1v2.png) 30 30 round;
  overflow: auto;
  margin: 5px;
  }
  
  
  #rainborder {
border: 3px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
height: 10em;
width: 15em;
padding: .5em;
}


#marquee {
        width:100%; /* probably be best at 100% within a containing element like a sidebar or header */
        margin:auto; /* keeps it centered lol */
        overflow: hidden;
        white-space: nowrap;
        padding: .5em;
      }
      
      #marquee:hover #stamps {
        animation-play-state: paused; /* remove this line if you'd rather the stamps not pause when the visitor hovers over them */
      }
      
      #stamps {
        display: inline-block;
        will-change: transform;
        animation: marquee 200s linear infinite; /* here, 100s denotes 100 seconds, so change it to the speed you'd like your marquee to flow. slower is better imho */
      }
      
    
    
      #stamps img {
        width: 99px;
        height:56px; /* since most stamps are 56px tall and 99 px wide, i've set the defaults to this */
      
        transition: all 0.2s;
          position: relative; 
      z-index: 1; 
    
      }
      
      #stamps img:hover {
        transform: scale(1.2); /* remove this if you'd rather they not explode on hover  */
        opacity:1;
          z-index: 100;
      }
      
      @keyframes marquee {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
          
        }
      }

.container {
  display:flex;
}



#marquee2 {
        width:100%; /* probably be best at 100% within a containing element like a sidebar or header */
        margin:auto; /* keeps it centered lol */
        overflow: hidden;
        white-space: nowrap;
        padding: .5em;
      }
      
      #marquee2:hover #stamps2 {
        animation-play-state: paused; /* remove this line if you'd rather the stamps not pause when the visitor hovers over them */
      }
      
      #stamps2 {
        display: inline-block;
        will-change: transform;
        animation: marquee 200s linear infinite; /* here, 100s denotes 100 seconds, so change it to the speed you'd like your marquee to flow. slower is better imho */
      }
      
    
    
      #stamps2 img {
        width: 115px;
        height:35px; /* since most stamps are 56px tall and 99 px wide, i've set the defaults to this */
      
        transition: all 0.2s;
          position: relative; 
      z-index: 1; 
    
      }
      
      #stamps2 img:hover {
        transform: scale(1.2); /* remove this if you'd rather they not explode on hover  */
        opacity:1;
          z-index: 100;
      }
      
      @keyframes marquee {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
          
        }
      }


