@charset "UTF-8";

/* dark grey #6D6573 .. wrapper bck
   bright lavender #C88EF4 ... accen t
   light lavender #E5D4F2  ... content bck
   dark purple #5E4373 ... accent / shadow
   med light purple #B5A8BF
*/
/* lesson 8 styles -- baker park
   dark green #529400 ... 
   bright blue #2B56E0
   light green #85E014
   orange/rust #E0502B
   reddish brown #942306 
   */
   
 /* newest lesson 8 styles 
   dark green #2B6606     ... body
   minty green #8DEA54    ... header/footer
   bright green #60E60E   ... hover
   grey #687063           ... box/vbox
   medium green  #4CB30A  ... borders
   
 */
 /* 
:root {
  --mainBKG: #529400;  /* dark green 
  --accent2: #2B56E0;  /* bright blue 
  --headBKG: #85E014;  /* light green 
  --accent: #E0502B;  /* orange rust 
  --boxBKG: #942306; /* box background / borders 
}*/
   
/*body *{border:1px solid blue;}*/

body {
	background:black;
	font-family:Verdana, Geneva, Arial, sans-serif;
	margin:0;
	padding:0;
	text-align:center;
}

#wrapper {
	width:960px;
	height:720px;
	margin-left:auto;
	margin-right:auto;
	background: #2B6606;  /* dark green */
	margin-top:0;
	margin-bottom:0;
}
#showPic {
    background:#2B6606;
    width:960px;
    height:720px;
    margin:auto;
    color:#8DEA54;
    font-size:24px;
    	
}
#showPic img {
    width:850px;
    border:5px solid #8DEA54;
}
#leftCol {
    float:left;
	background:#2B6606; /*dark green*/
    width:320px;
    height:720px;
	margin:auto;
	margin-top:15px;
}

nav {
    margin:10px;
}
#rightCol {
    float:right;
	background: #2B6606;  /*dark green */
	width:640px;
	height:720px;
	margin:auto;
	margin-top:15px;
	font-size:12px;   
	font-weight:bold; /* fix accessibility */
	color:black;      /* fix accessibility */
}

h1,h2,h3,h4,h5,h6 {
	/*margin-left:15px;*/
	font-family: 'Courgette', cursive;
	margin:0;
}
img {
    width:250px;
    margin-top:5px;
}

header {
	height:120px;
	background: #8DEA54 ; /* light green */
	font-family: 'Courgette', cursive;
	
	margin: auto;
	margin-bottom:0;
	font-size:62px;
	color: black; /*#7B83DB ;*/
}
nav {
    text-align:right;
   background:#8DEA54 ; /* light green */
    font-size:18px;
}


.vTitle {
	margin:auto;
}

.box {
    /*float:left;*/
    margin:auto;
    margin-top:10px;
	width: 280px; /*425px;*/
	/*background:  #687063 ;  /* reddish brown*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8dea54+0,687063+100 */
    background: #8dea54; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #8dea54 0%, #687063 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #8dea54 0%,#687063 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #8dea54 0%,#687063 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dea54', endColorstr='#687063',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	/*opacity:.5;*/

	border:3px inset #4CB30A; /* reddish brown*/
	box-shadow: 2px 2px;
}

.box:hover {
	/*background:white;*/
	/*opacity:1;*/
	background:#8DEA54;  /* orange-rust */
	/*color:white;*/
	font-weight:bold;
}

video {
    width: 520px;
    margin-top:5px;
}
.vBox {
	width: 540px;
	background:  #687063 ;
	margin:auto;
	border:3px inset #4CB30A;
	box-shadow: 2px 2px;
	margin-bottom: 40px;

}

.vBox:hover {
	/*background:white;*/
	background:#8DEA54; /* orange-rust */
	/*color:white;*/
	font-weight:bold;
	margin:auto;
	margin-bottom: 40px;
	/*opacity:1;*/
}

.clear {
	clear:both;
}


#validIMG {
	margin:5px;
}

footer {
	font-size:18px;
	color:black;
	height: 40px; /* was 80px;*/

	background:#8DEA54 ;
	border-top:2px solid #60E60E;
	/*position:absolute; 
	bottom:0px;*/

}

.vid {
	position: relative; /*absolute; */
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    /*width: auto; 
    height: auto; */
	width:100%;
	height:auto;
    /*z-index: -1;*/
    background-size: cover;
    overflow: hidden;
	margin-top:-20px;
}
#intro {
    /*background: #8DEA54;*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8dea54+0,2b6606+100 */
background: #8dea54; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #8dea54 0%, #2b6606 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #8dea54 0%,#2b6606 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #8dea54 0%,#2b6606 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dea54', endColorstr='#2b6606',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

        
    padding: 3px 10px;
    border-top:2px solid #60E60E;
    font-size:18px;
}

#copy {
	padding:15px;
	margin-top: -10px;
}
#rad {
	font-size:32px;
	padding-top:10px;
	margin-left:100px;
	margin-right:100px;
	height:60px;
	border: 2px solid #4CB30A;
	border-radius:80px;
	text-align:center;
			/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5d4f2+66,b5a8bf+86 */
    background: #e5d4f2; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #e5d4f2 66%, #b5a8bf 86%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #e5d4f2 66%,#b5a8bf 86%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #e5d4f2 66%,#b5a8bf 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5d4f2', endColorstr='#b5a8bf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
figure {
    padding:5px;
}

h1 {
	font-size:72px;

}



#main {
	    border: 3px solid #C88EF4;
    border-radius:5px;
}

.BCK {
	font-size:18px;
	background:black;
	color:white;
	padding:5px;
	border: 1px solid #4CB30A;
	border-radius: 5px;
	box-shadow: 2px 2px #C88EF4;
	text-decoration: none;


}
a:hover {
	background:#C88EF4;
	color:#5E4373;
}

form {
	font-size:18px;
	position: relative;
    background-color:#6D6573;
	color:white;
	border: 2px white solid;
	box-shadow: 5px 5px black;

	width: 600px;
padding: 15px;
margin: auto;
	margin-top:50px;
    margin-bottom:100px;
	/*text-align:left;
/*box-shadow: 10px 10px 5px black;*/
}
input {
	padding:2px;
	margin: 0 15px 0 0;
	/*margin:5px;*/
}
.fT {
	font-size:24px;
}
.fBtn {
	background-color: black;/*#6D6573;*/
	color:white;
	padding:5px;
	border: 1px solid #60E60E;
	border-radius: 5px;
	box-shadow: 1px 1px #60E60E;
	margin:20px;
	font-size:18px;
	text-decoration:none;
}
.fBtn:hover {
    background:#60E60E ;
}

.pBtn {
	background-color:#6D6573;
	color:white;
	padding:5px;
	border: 1px solid #C88EF4;
	border-radius: 5px;
	box-shadow: 1px 1px #C88EF4;
	/*margin:2px;*/
	position:-15px;
}

#tswfbform {
	text-align:left;
	margin: auto;/* 200px; */
	padding-left:40px;
	margin-top:50px;
	font-size: 14px;
}