a { color:#000000; } 
        a:link { color:rgb(0,0,255); }
		a:visited { color:rgb(0,0,255); } 
		a:active { color:rgb(0,0,255); } 
		a:hover { color:#504FFF; } 
		a:hover #thumbs { opacity:.7;FILTER: Alpha(Opacity=100, FinishOpacity=70, Style=2); border:0px solid #ff7800;}

html, body { min-height: 100% } 

/* Background image URL, next line is vertical repeat */
body { background-color:#FFFFFF; background-image: url("https://stickydoggy.com/mudpaw2b.gif"); background-position:left; background-attachment: fixed; padding:0; background-repeat: repeat-y; background-size: auto auto; background-size: 6% auto; margin: 0; }	


/* Set sizes for background for smaller devices so pawprints are bigger at a certain lower cutoff point */
@media screen and (max-width:800px) {
  body {
    background-size: 15%;
    background-attachment:fixed }
}

/* define server-stored font, stored in CSS directory here for simplicity but can be stored elsewhere*/

/* font 1 */
@font-face {
  font-family: comicclone;
  src: url("gosmicksansbold-2e4o.ttf");
  
/*font 2*/  
}
@font-face {
  font-family: comicclone2;
  src: url("comicgecko-goaxo.otf");
}


/* Define font type for all types of text, can be defined individually */
p,
h1,
h2,
h3,
h4,
h5,
div,
h6 {
  font-family: 'Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman';


/* Page font size - basic */
 font-size: 18px; 
	
}



/* Make anything with the id = thumb tag have a hover effect */
a:hover #thumbs { opacity:.7;FILTER: Alpha(Opacity=100, FinishOpacity=70, Style=2); border:0px solid #ff7800; border-radius: 25px;}	
.thumb
		.thumb img {}
		.thumb a:hover img {margin: 0px 0px 0px 0px;}
}




/* Navbar - menu - effcts and color and size  */
.navlink { 
font-family:comicclone !important;

}

.navbar a{
    font-family: comicclone !important; 	
	color: #43464b;
	font-size: 22px;
}

/* hover effect */
.navbar a:hover
 {
    background-color: #43464b;
	color: #ffffff !Important;
/* rounded border  for menu hover */	
	border-radius: 10px;
}


.box {
  position: relative;
  display: inline-block;
  
 
  border-radius: 0px;
  background-color: #fff;
  box-shadow: 0 0px 0px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
}

/* Create the hidden pseudo-element */
/* include the shadow for the end state */
.box::after {
  content: '';
  position: absolute;
  z-index: -1;

  opacity: 0;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease-in-out;
}

/* The fast way */

.make-it-fast {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}


/* Pre-render the bigger shadow, but hide it */

.make-it-fast::after {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}


/* Transition to showing the bigger shadow on hover */

.make-it-fast:hover::after {
  opacity: 1;
}

/* Scale up the box */
.box:hover {
  transform: scale(1.2, 1.2);
}

/* Fade in the pseudo-element with the bigger shadow */
.box:hover::after {
  opacity: 1;
}