/*
div, header, main, footer, aside, nav {
  border: solid 1px blue !important; 
}
*/

* {
  box-sizing: border-box;
}

p, h1, h2, h3, h4, li {
  margin: 0px;
}

@font-face {
  font-family: FreePixel;
  src: url(assets/font/FreePixel.ttf);
  font-weight: normal;
}

@font-face {
  font-family: FreePixel;
  src: url(assets/font/PixelOperator-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: Bangalor;
  src: url(assets/font/Bangalor.ttf);
  font-weight: bold;
}

h1 {
  font-size: 16px;
  color: #666666;
  text-transform: uppercase;
  font-size: 12px;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px #fff;
}

ul {
  list-style: square inside url("assets/index-assets/blue-bullet.png");
  margin: 0;
  padding: 5px;
}

li {
  margin-bottom: 5px;
}

html {
  font-family: ms ui gothic, FreePixel;
  font-size: 12pt;
  color: #666666;
  text-align: justify;
}

a {
  color: #2323d8;
}

a:hover {
  text-decoration: underline dotted 1px;
}

html, body {
  height: 99%;
  overflow: hidden;
}

body {
  background-color: #f0f0f0;
  background: url(assets/cliques-and-fanlistings/background.png);
  background-size: cover;
  background-attachment: fixed;
  background-position-y: top;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

main {
  width: 400px;
  gap: 5px;
  display: flex;
  flex-direction: column;
}

.back-deco {
  padding: 5px;
  background: #f0f0f0;
  border-bottom: solid 1px #cecece;
  border-left: solid 1px #cecece;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  outline: solid 1px #999999;
  margin-bottom: 5px;
}

.button {
  padding: 5px;
  background: #f0f0f0;
  border-bottom: solid 1px #cecece;
  border-left: solid 1px #cecece;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  margin-bottom: 10px;
}

.main-content {
  height: 400px;
  overflow-y: auto;
  background: #f9f9f9;
  border-bottom: solid 1px #cecece;
  border-left: solid 1px #cecece;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  padding: 10px;
}

main > div > p {
  text-align: center;
  font-size: 12px;
}

main > div > p a {
  text-decoration: none;
}

a.button {
  display: block;
}

a.button {
  text-decoration: none;

}

* + h1 {
  margin-top: 10px;
}

h1 + p {
  margin-bottom: 10px;
}

.header {
  height: 100px;
  outline: solid 1px #cecece;
  background: url(assets/cliques-and-fanlistings/beach3.gif);
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.header h1 {
  font-family: Bangalor;
  text-transform: lowercase;
  font-size: 16px;
  padding: 5px 10px 5px 10px;
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 2px #666666;
}

/* 
========================================
  SCROLLBAR 
========================================
*/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-left: solid 1px #cecece;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f0f0f0;
  border-bottom: solid 1px #cecece;
  border-left: solid 1px #cecece;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  outline: solid 1px #999999;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f0f0f0;
  border-top: solid 1px #cecece;
  border-right: solid 1px #cecece;
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  outline: solid 1px #999999;
}

::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #2323d8;
}

::selection {
  color: #fff;
  background: #2323d8;
}


    /* Sticker Sheet Club Styling
    http://www.stickersheetclub.neocities.org 
    */
    
    /* Table Styling */
    table {
      background-color: #fdc2ce; 
      border: 1px solid #fdc2ce;
      width: 100%;
    }
		/* Space between the stickers */
		td img {
      padding:0px 15px;
		}
	
    /* Black shadow around stickers
    You can change or remove this if you want */
		.stickersimg img {
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
		}
			
    /* 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-color: #f0f0f0;
     background-image: url('https://stickersheetclub.neocities.org/images/stickersheetheader.png'); 
    background-repeat: repeat-x; 
    background-position: top center;
    height: 80px;
    border: solid 1px #cecece;
    border-bottom: none;
   
    }
			
  	#ssclubstickers_1 {
    /* You can add a different background color or image here too! */
    background: #f0f0f0;
    border: solid 1px #cecece;
    border-top: none;
    border-bottom: none;
    }
			
    #ssclubfooter_1 {
    /* Here too! */
    border: solid 1px #cecece;
    
    }