@charset "utf-8";

/*   
   Filename: summer_designs.css
*/


/* =============================================
	Styles used by Summer Page
   =============================================
*/

img.right {
   float: right;
   width: 40%;
   margin: 20px 20px 20px 20px;
   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
}

img.right2 {
   float: right;
   height:35%;
   margin: 20px 20px 20px 20px;
   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
}

img.left {
   float: left;
   width: 35%;
   margin: 10px 40px 20px 10px;
   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
}

img.left2 {
   float: left;
   margin: 10px 50px 20px 10px;
   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
}


section#topics article {
   border: 1px solid rgb(31, 73, 135);
   border-radius: 20px;
   margin: 10px;
}

p#summer_link a {
   font-size:1.4em;
   font-style:italic;
   font-weight: bold;
   color:pink;
   text-decoration: none;
   text-shadow:2px 2px black;
}

p#summer_link2 a {
   font-size:1.4em;
   font-style:italic;
   font-weight: bold;
   color:darkgreen;
   text-decoration: none;
   text-shadow:2px 2px white;
}

.button {
   background-color: pink;
   border: 1px black solid;
   color: black;
   padding: 5px 20px 5px 10px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 1em;
   font-style:italic;
   font-weight: bold;
   border-radius: 20px;
   box-shadow: rgba(70,36,37,1.00) 7px -7px 20px;   
 }

 .button2 {
   background-color: darkgreen;
   border: 1px black solid;
   color: white;
   padding: 5px 20px 5px 10px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 1em;
   font-style:italic;
   font-weight: bold;
   border-radius: 20px;
   box-shadow: rgb(1, 35, 1) 7px -7px 20px;   
 }

section#topics article p {
	text-align:left;
	padding-left:20px;
}

section#topics article:nth-of-type(even) {
   background-color: rgb(207, 222, 172);
}

section#topics article:nth-of-type(odd) {
   background-color: rgb(99, 143, 199);
}


h1.class_princess {
   color:pink;
   display: block;
   font-size: 1.6em;
   font-style:italic;
   font-weight:bold;
   text-align: left;
   padding-left:40px;
   padding-top:20px;	
   text-shadow:3px 3px black;
}

h1.class_dance {
   color:darkgreen;
   display: block;
   font-size: 1.6em;
   font-style:italic;
   font-weight:bold;
   text-align: left;
   padding-left:40px;
   padding-top:20px;
   line-height:1.2em;
   text-shadow:3px 3px white;
}


@media only screen and  (max-width: 480px) {
	
	img.right {
	   clear:both;
	   float: right;
	   width: 50%;
	   margin: 20px 20px 20px 20px;
	   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
	}
	
	img.right2 {
	   clear:both;
	   float: right;
	   height:35%;
	   margin: 20px 20px 20px 20px;
	   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
	}
	
	img.left {
	   float: left;
	   width: 40%;
	   margin: 20px 40px 20px 10px;
	   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
	}
	

	img.left2 {
	   float: left;
	   margin: 30px 50px 20px 10px;
	   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
	}
	
}