/*
#EDEDED (cool gray)
#777798 (lavender)
#383880 (dark lavender)
#383860 (a little darker lav)
#06385F (aqua blue)
#0E0E67 (royal blue)
#000046 (deep deep deep blue)
#58271a (maroon brown)
#1a8773 (sea teal)
#0e4056 (dark aqua)
*/

/* all */
	@font-face {font-family: berosefont; src: url(styles/berosefont.ttf);}
	@font-face {font-family: mont_heavy; src: url(styles/mont_heavy.otf);}
	@font-face {font-family: mont_extralight; src: url(styles/mont_extralight.otf);}
	@font-face {font-family: tommy_soft_light; src: url(styles/tommy_soft_light.otf);}
	@font-face {font-family: tommy_soft_regular; src: url(styles/tommy_soft_regular.otf);}
	@font-face {font-family: tommy_soft_medium; src: url(styles/tommy_soft_medium.otf);}
	@font-face {font-family: tropikana; src: url(styles/tropikana.ttf);}
	@font-face {font-family: bigwhale; src: url(styles/bigwhale.otf);}
	@font-face {font-family: digital; src: url(styles/digital-7.ttf);}
	@font-face {font-family: clockradio; src: url(styles/clockradio.TTF);}
	@font-face {font-family: noclocks; src: url(styles/noclocks.otf);}

    body {
		font-size: 1em;
		color: #0E0E67;
		background-color: #EDEDED;
        margin: 0;
		}

	a {
		font-size: 1em;
		color: #000046;
		}

	a:hover, a:focus {
		color: #383880;
		}

	h1 {
		font-size: 5em;
		text-align: center;
		color: #000040;
		font-family: berosefont;
		}

	h2 {
		color: #000040;
		text-align: center;
		font-size: 3em;
		font-family: berosefont;
		font-weight: 500;
		}
	
	h3 {
		color:#000040;
		font-size: 2em;
		font-family: tommy_soft_medium;
		text-align: center;
		}
		
	p.bold {
		color:#000040;
		font-size: 1.5em;
		font-family: tommy_soft_medium;
		font-weight: bold;
		}
		
	.videos {
		padding: 6px;
		border: 9px outset #383880;
		width: 90%;
		}
			
	div.anycenter {
		text-align: center;
		}
			
    /*footer styles*/
        footer {
            color: #383880;
            font-size: 1em;
            font-family: tommy_soft_regular;
            text-align: center;
            text-decoration: none;
            }

        footer p {
            font-size: 1em;
            }
        
        .home_icons {
            width: 30px;
            height: 30px;
            }

        #fourcons {
            margin: 10px;
            }


	/*p styles*/
		p {
			color: #383880;
			font-size: 1.5em;
			font-family: tommy_soft_regular;
			}
			
	
	/*nav styles*/
		nav {
			font-size: 1.5em;
			text-align: center;
			font-family: tommy_soft_medium;
			}
			
        
        .topnav {
            background-color: #777798;
            overflow: hidden;
            }
        
        .topnav a {
            padding: 14px 15px;
            float: left;
            text-decoration: none;
            }

        .topnav a:hover {
            color: #383860;
            }
            
        .topnav a.active {
        	background-color: #383860;
            color: #EDEDED;
        	}
            

 /* home */
	.home_center {
		margin: auto;
		width: 90%;
		border: 2px dotted #777798;
		padding: 20px;
		text-align: center;
		max-width: 1000px;
		min-width: 450px;
		}
		
	div.center_icon {
		text-align: center;
		margin: 20px;
		}
		
	ol {
		font-family: tommy_soft_regular;
		color: #383880;
		font-size: 1.5em;
		list-style-type: none;
		}
			
	/*skip nav
		div#skipnav {
			color:#000040;
			font-size: 2em;
			font-family: berosefont;
			text-align: center;
			}
		*/

 /* about me */
 	.icons {
		width: 80px;
		}
			
	.flex-container {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
		padding: 5px;
		border: 2px dotted #777798;
		max-width: 950px;
		min-width: 450px;
		margin: auto;
		}
		
	.p {
		padding: 8px;
		border: 9px outset #383880;
		max-width: 950px;
		min-width: 450px;
		margin: auto;
		}
		
	.spacing_about {
		margin: 10px;
		}

	.resume {
        max-width: 450px;
        min-width: 450px;
        height: 600px;
        }
 
 /* accessibility */
	table {
		margin: auto;
		border-collapse: collapse; 
		max-width: 1000px;
		min-width: 450px;
		border: 2px solid black;
		height: 30px;
		color: #383880;
		font-family: tommy_soft_regular;
		}
		
	th {
		font-weight: bold;
		padding: 0.5em;
		border: 2px solid black;
		font-size: 20px;
		}
		
	td {
		text-align: center;
		padding: 0.5em;
		border: 2px solid black;
		}
		
	.fruits {
		width: 40px;
		height: 40px;
		}
		
	.access_center {
		max-width: 80%;
        min-width: 80%;
		border: 2px dotted #777798;
		padding: 20px;
		margin: auto;
		}
		
	.access {
		font-family: tommy_soft_regular;
		color: #383880;
		font-size: 1.5em;
		list-style-type: disc;
		}
	
 /* graphics */
	.graphics_center {
		max-width: 80%;
        min-width: 80%;
		border: 2px dotted #777798;
		padding: 20px;
		margin: auto;
		text-align: center;
		}
		
	.image-flex-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 10px;
		border: 2px dotted #777798;
		max-width: 300px;
		min-width: 100px;
		margin: auto;
		}
	
	.spacing_images {
		margin: 10px;
		}
		
	.make_bigger:hover {
		transform: scale(1.1);
		}

 /* javascript */
    button {
        max-width: 600px;
        min-width: 200px;
        height: 30%;
        color: #000046;
        font-size: 3em;
        font-family: tommy_soft_regular;
        border: 2px solid #777798;
        border-top-left-radius: .4em;
        border-top-right-radius: .4em;
        border-bottom-left-radius: .4em;
        border-bottom-right-radius: .4em;
        background-color: #EDEDED;
        }
        
    button:hover  {
    	box-shadow: 8px 10px 30px;
    	}
    
    div#clock {
        display: none;
        color: #000046;
        font-size: 4em;
        font-family: digital;
        width: 40%;
        margin: auto;
        border: 6px solid #777798;
        border-top-left-radius: .4em;
        border-top-right-radius: .4em;
        border-bottom-left-radius: .4em;
        border-bottom-right-radius: .4em;
        padding: 0.3em;
    	}

 /* tools */

 /* usability */
 	.usability_center {
		max-width: 80%;
        min-width: 80%;
		border: 2px dotted #777798;
		padding: 20px;
		margin: auto;
		text-align: center;
        }
        

 /* video */
	 .video_center {
	 	margin: auto;
		max-width: 1000px;
		min-width: 450px;
		text-align: center;
		}
		
	.videobutton {
        max-width: 300px;
        min-width: 100px;
        height: 30%;
        color: #000046;
        font-size: 1em;
        font-family: tommy_soft_regular;
        border: 2px solid #777798;
        border-top-left-radius: .4em;
        border-top-right-radius: .4em;
        border-bottom-left-radius: .4em;
        border-bottom-right-radius: .4em;
        background-color: #EDEDED;
        }