/*
                                                     
#####   ####  #####  ##### #####    ##   # #####  ####  
#    # #    # #    #   #   #    #  #  #  #   #   #      
#    # #    # #    #   #   #    # #    # #   #    ####  
#####  #    # #####    #   #####  ###### #   #        # 
#      #    # #   #    #   #   #  #    # #   #   #    # 
#       ####  #    #   #   #    # #    # #   #    ####  
  
*/	
	
	* {
		box-sizing: border-box;
		}

	.header {
		grid-area: header;
		background-color: none;
		padding: 15px;
		text-align: center;
		}

	.grid-container {
		display: grid;
		grid-template-areas: 
		 'header header header header header header' 
		 'left right right right right right' 
		 'footer footer footer footer footer footer';
		} 

	.left,
	.right {
		padding: 10px;
		}

	.left {
		grid-area: left;
		text-align: left;
		padding: 10px;
		padding-right: 25px;
		border: 3px dashed white;
		}

	.right {
		grid-area: right;
		text-align: right;
		padding: 20px;
		}

	.footer {
		grid-area: footer;
		background-color: none;
		padding: 30px;
		padding-top: 80px;
		text-align: center;
		color: yellow;
		text-shadow: 2px 2px 2px black;
		}

	@media (max-width: 600px) {
		.grid-container  {
    	 grid-template-areas: 
     	 'header header header header header header' 
		 'left left left left left left' 
	 	 'right right right right right right' 
     	 'footer footer footer footer footer footer';
  		 }
		}

	body {
		font-family: sans-serif;
		background-image: radial-gradient(yellow, green, blue);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		}
		
					
	h1 {
		color: orange;	
		text-shadow: 2px 2px 2px red;
		font-family: sans-serif;
		font-size: 85px;
  		margin-top: .5em;
 		margin-bottom: .4em;			
		}
		
	h2 {
		color: black;
		text-shadow: 3px 3px #39FF14;
		font-family: sans-serif;
		font-size: 8vw;
  		margin-top: 0em;
 		margin-bottom: 0em;	
		}
	
	h3 {
		color: white;
		text-shadow: 1px 1px 1px black, 3px 3px 3px magenta;
		}
	
	p {
		margin-top: 0em;
 		margin-bottom: 0em;
		}	

	a {
		color: black;
		text-shadow: 0px 0px 10px red;
		font-family: sans-serif;
		font-size: 20px;
		letter-spacing: 1px;
		padding: 10px;
		}
				
	a:hover {
		color: blue;
		}
	
	a:active {
 		background-color: hotpink;
		}
		
	ul {
		list-style-type: none;
		padding: 0;
		}

	.popover {
  		border: 3px solid white;
  		border-radius: 5px;
  		padding: 0px;
  		padding-top: 10px;
  		padding-bottom: 10px;
  		background-color: lightblue;
  		width: 100px;
		}

	.popover-content {
		color: blue;
  		font-weight: bold;
  		text-shadow: 1px 1px 1px white;
		padding: 5px;
		text-align: center;
		text-weight: 90px;
		}
		
		
/*  

.       .                                      .                  
|-. . ,-| . ,-. ,-. ," ,-. ,-. ,-,-. ,-. ,-. ,-|    ,-. ,-. ,-,-. 
| | | | | | | | | | |- |   | | | | | | | | | | |    |   | | | | | 
' ' ' `-^ ' ' ' `-| |  '   `-' ' ' ' `-| `-' `-^ :; `-' `-' ' ' ' 
                 ,| '                 ,|                          
                 `'                   `'                                                                                
*/