/* Sticker Sheet Club Styling
    http://www.stickersheetclub.neocities.org 
    */
    
    /* Table Styling */
    table {
      background-color: #fdc2ce; 
      border: 1px solid #fdc2ce;
      width: 250px;
      justify-content: center
    }
		/* Space between the stickers */
		td img {
      padding:2px 5px;
      vertical-align:middle;
		}
	
    /* Black shadow around stickers
    You can change or remove this if you want */
    .mystickersimg img {
      filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
    }
    
    .stickersimgcollec img {
      filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
    }
    
    .stickersimgcollec img:hover { 
      transform: translate(2px,2px)
    }

  #tables {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2%;
    margin: auto;
  }
  
  #MyStickers1, #MyStickers2 {
    display: flex;
    flex-direction: column;
  }
			
    /* To customize mulitple sets of tables:
    Each sticker sheet has 3 tables: ssclubheader_#, ssclubstickers_#, and #ssclubfooter_#. 
    Give each set of tables a different number.
    */
	    
    #ssclubheader_1 {
      /* You can use the background header image code here and remove it from the HTML.*/
      background-image:url('/cliques/stickers/stickersheetheader.png'); 
      background-repeat: no-repeat; 
      background-position: top center;
    }
			
  	#ssclubstickers_1 {
      /* You can add a different background color or image here too! */
    }
			
    #ssclubfooter_1 {
      /* Here too! */
    }
      
/***
For really narrow screens which cause the title text to wrap. 
You may need to adjust the width at which this kicks in to fit 
your own title.
***/
  @media(max-width: 500px) {
    #tables {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 2%;
    }
  }
  
      /*Mobile layout.*/
      
  @media(orientation: portrait) {  
    #tables {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    #MyStickers1 {
      display: flex;
      flex-direction: column;
      margin-bottom: 5px;
    }
  
    #MyStickers2 {
      display: flex;
      flex-direction: column;
    }
  }