/* Display CSS*/ 
        body {
                background-color:black;
            }
            
            header {
                width: 60%;
                height: 150px;
                margin-left:5% ;
                text-align: center;
                line-height: 170px;
                color: greenyellow;
                font-family: monospace;
                font-size: 2.8em;
            }
            
            .wrap {
                background-color: white;
                padding: 2%;
                width: 80%;
                height: auto;
                margin-left: 8%;  
                box-shadow: 5px 5px 10px 10px black inset;
            } 
            @media only screen and (min-width: 800px) {
                header {
                    font-size: 7em;
                    margin-left: 7%;
                }
            }
           
/* Cheese Joke CSS*/
            #joke {
                font-size: 2em;
                padding:5px ;
                
            }
            #punchline {
                font-size: 1.5em;
                margin-top: 15px;
                margin-bottom: 25px;
                padding: 5px;
                font-style: italic;
            }
            #cheese {
                height: 240px;
            }
            .cheese {
                background-image:url("ched1.jpg");
                border-bottom-right-radius: 250px;
                box-shadow: 5px 5px 5px;
            
            }
            #jokeButton {
                margin-left: 70%;
                margin-bottom: 10px;
                background-image:url("ched1.jpg");
                background-size: contain;
                font-size: 1em;
                font-weight: 600;
                box-shadow: 5px 5px 5px;
                padding: 4px;
                
            }
            #ched {
                text-align: center;
                margin: 10px;
                padding: 3px;
                color: red;
                -webkit-text-stroke: 1px black;
            }
/* Cheese Joke responsive CSS*/        
            @media only screen and (min-width: 800px) {
                #cheese {
                    height: 180px;
                }
            }
            @media only screen and (min-width: 800px) {
                div.cheese {
                    width: 84%;
                    margin-left: 8%;
                    height: 450px;  
                }
                #joke {
                    font-size: 2.5em;
                }
                #punchline {
                    font-size: 2.5em;
                }
                div.chedJoke {
                    width: 45%;
                    margin-left: 25%
                }
                #jokeButton {
                    font-size: 2.5em;
                }
                #ched {
                    font-size: 2.7em;
                }
            }
/* END of Cheese Joke CSS*/

/* flashing _ in Header */
		#flash {
			animation: myFlash 4s infinite;
			-webkit-animation: myFlash 2s infinite;
			-ms-animation: myFlash 4s infinite;
			}
		
		@keyframes myFlash {
			0% {color: black;}
			50% {color: #29f612;}
			100% {color: black;}
			}
			
		@-webkit-keyframes myFlash {
			0% {color: black;}
			50% {color: #29f612;}
			100% {color: black;}
			}
			
		@-ms-keyframes myFlash {
			0% {color: black;}
			50% {color: #29f612;}
			100% {color: black;}
			}
/* END of Flashing in Header CSS*/

/* Content  CSS*/
            .content {
                width: 80%;
                margin-left: 10%;
            }
             .content1 {
                width: 80%;
                margin-left: 10%;
            }
            .box {
                width: 100%;
            }
            .siteTitle {
                text-align: center;
            }
            .pagePic {
                width: 100%;
                height: 250px;
                border: 1px solid;
                padding: 10px;
                box-shadow: 5px 5px 5px
            }
            a {
                color: black;
            }
            h1 {
                text-align: center;
            }
/* responsive Content  CSS*/
            @media only screen and (min-width: 800px) {
                .pagePic{
                    width: 80%;
                    height: 300px;
                    margin-left: 10%;  
                }
                .content {
                    font-size: 1.5em;
                }
            }
            @media only screen and (min-width: 950px) {
                .pagePic{
                    width: 80%;
                    height: 400px;
                    margin-left: 10%;  
                }
                .content {
                    font-size: 1.8em;
                }
            }
/* END of Content  CSS*/