@charset "utf-8";

/*
   Author: Jim Crawford
   Date:   5/3/2023
   
   Filename: finallayout_jc.css

*/

video {
    width: 100%;
    min-height: 480px;
    height: calc((9 / 16) * 100vw);
    max-height: calc(100vh - 169px);
}



form#survey {
	display: flex;
	flex-flow: row wrap;
}

div#buttons {
	text-align: center;
	width: 100%;
}



div.formRow {
	display: flex;
	flex-flow: row wrap;
	margin: 7px 0px;
}

div.formRow > * {
	flex: 1 1 150px;
}


body {
   background: rgba(24,217,223,0.8);
   font-family: "sans-serif", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
   text-align: center;
}

ul {
   font-family: Jenson, "Century Schoolbook L", "Times New Roman", "serif";
   text-decoration: bold;
   height: 60px;
   text-align: center;
   width: auto;
   border-radius: 5%;
   margin: 15px 5px;
   background-color:rgba(156,167,242,0.8);
   padding: 5px;
}

a {
	color: red;
	text-align: center;
}

section p {
   line-height: 1.4em;
   padding: 10px;
   font-size: 1.2em;
}




nav.horizontal {
	text-shadow: 1px 1px black;
   text-align: center;
   height: 100px;
   border-radius: 5%;
   background-color:rgba(1,32,235,0.8);
   width: auto;
   box-shadow: 10px 5px 5px black;
}

nav.horizontal li {
   color: white;
   display: block;
   line-height: 2em;
   text-transform: uppercase;
}

nav.horizontal ul li a:visited, nav.horizontal ul li a:link {
   color: rgb(231, 231, 231);
}

nav.horizontal a {
  float: center;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
}

nav.horizontal ul li a:hover, nav.horizontal ul li a:active {
   background-color: rgb(31, 73, 125);
   color: rgb(231, 231, 231);
}

nav.horizontal a.active {
  background-color: #04AA6D;
  color: white;
}
nav.vertical ul {
   line-height: 2em;
   
}

article p {
   font-size: 1.6em;
   font-family: Palatino, "Century Schoolbook L", "Times New Roman", "serif";
   color: black;
   text-shadow: 1px 1px grey;
}


body aside {
	margin-top: 50px;
	text-decoration: none;
	color: black;
}

a {
   text-decoration: none;
 
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
p img {
	width: 80%;
}
footer {
	text-shadow: 1px 1px black;
   border-radius: 5%;
   text-align: center;
   color: white;
   font-size: 1em;
   height: 100px;
   line-height: 30px;
   text-decoration: none;
   background-color:rgba(1,32,235,0.8);   
   opacity: 98%
}

h1 {
	text-align: center;
	background-color: rgba(156,167,242,0.8);
	border-style: solid;
	text-shadow: 1px 1px white;
	box-shadow: 10px 5px 5px black;
}

table {
	text-align: center;
	border: 1px solid;
}

video {
	position: relative;
	padding-top: 5px; height: 0;
	overflow: hidden;
}

embed {
	font-size: 1em;
	width: 100%;
	padding-bottom: 5px;
	border-style: inset;
}

.grades {
	background-color: grey;
	text-shadow: 1px 1px black;
	font-weight: bold;
	color: white;