@charset "UTF-8";
/* CSS Document */
/* Element Selectors */
	body {
    		background-color:#FFF6E7;
    		font-family: "Raleway", sans-serif;
    		font-size: 1.2em;
    		width: 75%;
    		margin: auto;
    		padding-bottom: 5%;
		}

	h1{
			color: #5F0809
	  }

	p{
			text-align: justify;
			color: #5F0809
	 }
/* Attribute Selectors */
		input[type="text"],textarea[name="recipes"]{
    		padding: 10px;
    		margin: 10px;
    		width: 220px;
    		display: block;
    		background-color: #F4DEDE;
    		border: 1px solid #160E62;
		}
		
		input[type="reset"] {
    		padding: 10px;
    		border-radius: 20px;
    		width: 120px;
    		background-color: #EFDAE8;
    		border: 1px solid #160E62;
		}

		input[type="submit"] {
    		padding: 10px;
    		border-radius: 20px;
    		width: 120px;
    		background-color: #FF9798;
    		border: 1px solid #160E62;
		}
		
		input[type="reset"]:hover{
			background-color:blanchedalmond;
			color:brown;
			cursor: pointer;
		}
		input[type="submit"]:hover{
			background-color:aliceblue;
			color: brown;
			cursor: pointer;
		}
			
		
		input:focus, textarea:focus {
    		background: #FDFFE4;
		}

			
	img[alt="Recipe Card"]{
			border:20px solid#5F0809;
			margin-bottom:1%
	}
	
	img[alt="img left"]{
			border:5px solid#5F0809;
			float:left;
			margin-right:2%;
			margin-bottom:2%
		}
	img[alt="img right"]{
			border:5px solid#5F0809;
			float:right;
			margin-left:2%;
			margin-bottom:2%
		}
/* Class Selectors */
	.firstpara:first-letter{
			font-size:1.5em;
		}
	div.Ingrediants{
			text-align:left;
		}
	div.notes{
			
			background:#F8E2D8;
			padding:1%;
			text-align:center;
			width: 100%;
			margin:auto;
			border-radius: 50px;
			border:2px solid #6B4F45;
			clear:both;
			float:center;
		}
/* ID Selectors */
	#Variations{
			background:#F2D1D1;
			padding:3%;
			text-align:left;
			width: 60%;
			margin:auto;
			margin-top: 20px;
			margin-bottom: 20px;
			border-radius:15px;
			border:2px solid #6B4F45;
			clear:both;
			float:center;
		}
	#pic {
    	background: #5F0809;
    	padding: 3%;
    	width: 100%;
    	margin: auto;
    	border-radius: 10px;
    	border: 2px solid #6B4F45;
    	clear: both;
		}
	#pic pic{
		display: inline-block;
    	margin: 10px;
		}
	#pic p {
    	color: #FFF6E7;
		text-align:justify;
    	font-size: 0.8em;
    	margin-bottom: 20px;
		}
	
	.option>li:nth-child(even){
			color:darkred
		}
	.option>li:nth-child(odd){
			color:indianred
		}