/* Style the video: 100% width and height to cover the entire window */


#myVideo {
    position: fixed;
    right: -165px;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }

body {
    overflow: auto;
    row-gap: 1%;
    position-area: center;
    display: grid;
    /* position: fixed; */
    /* max-width: 900px; */
	grid-template-columns: 100%;
    grid-template-rows: 12%; 
	grid-template-areas:
		"head"
		"navi"
		"sec"
        "sec1"
        "sec2"
		"foot"; 
    font-family: "Sancreek", serif;
	width: 95%;
    height: 95%;
	margin: .625rem auto; /*10px auto;*/
	border: 3px solid black;
	box-shadow: 10px 6px 5px 5px gray;
	background-color: white;
}

header { 
    height: 87%;
    align-content: center;
    z-index: 1;
    padding: 11px 40px 0px 40px;
    border: 3px solid black;
    border-radius: 10px;
    border-style: dotted;
    justify-self: center;
    font-family: Sancreek, serif;
    grid-area: head; 
    background-image: linear-gradient(to right top, rgb(95, 45, 1), rgb(255, 221, 191) 75%);
}

header h2{
	font-size: 300%;
	margin-bottom: 0.925rem; /* 10px */
	margin-top: -0.5625rem; /* -9px */
	justify-self: center;
}

header h3{
    margin-bottom: 11px;
    font-family: "Maiden Orange", serif;
    margin-top: -0.3875rem;
	justify-self: center;
}

header p{
	margin: 0;
	font-size: 115%;
	justify-self: center;
}

header img{
	max-width: 13.22%; /* 119px*/
}

nav { 
    z-index: 1;
    display: grid;
    grid-area: navi; 
}

nav ul{
    padding-right: 25%;
    padding-left: 25%;
    margin: 0;
    width: 50%;
}

nav ul li {
	font-family: Sancreek, serif;
	text-shadow: 1px 1px 2px black;
	border: 3px solid black;
	border-radius: 10px;
	border-style: dotted;
	width: 16.4%;
	float: left;
	/* background-color: sandybrown;rgb(255, 221, 191) rgb(96, 52, 14) */
	background-image: linear-gradient(to right top, rgb(95, 45, 1), rgb(255, 221, 191) 75%);
	text-align: center;
	list-style-type: none;
	margin: 0.65rem 1.3%; /* 12px */
	a{
		padding: 1.875rem 8%; /*30px 10px*/
		color: white;
		text-decoration: none;
		display: block;
	}
	a:hover, a:focus{
		padding: 2rem 5%;
	}
	#current {
		color: black;
		text-shadow: 1px 1px 2px white;
	}
}

section{
    display: grid;
    grid-area: sec;
}

.def{
    font-family: "Maiden Orange", serif;
    font-size: 125%;
}


table{
    z-index: 2;
    background-color: #F5DEB3;
    border: 3px solid black;
	border-radius: 10px;
    box-shadow: 5px 6px 10px 5px black;
    max-width: 75%;
    justify-self: center;
    caption {
        font-size: 150%;
        text-align: center;
        margin: .5em 0 .5em 0;
        font-weight: bold;
        text-shadow: -3px 0px 4px black;
        color: white;
        }
    thead {
        text-align: left;
        font-weight: bold;
        color: white;
        text-shadow: -2px 2px 3px black;
        text-align: top;
        padding-bottom: 0.5em;
        }
    th:first-child {
        font-size: 120%;
        width: 1%;
        align-content: center;
        text-align: left;
        padding-right: 40px;
        padding-left: 10px;
        }
    tbody th:last-child {
        font-family: "Maiden Orange", serif;
        width: 8%;
        padding-bottom: 2%;
        padding-top: 1%;
        }

    th:nth-last-child(2) {
        padding-right: 40px;
        text-align: center;
        }
    }

.sec1{
    display: grid;
    grid-area: sec1; 
}

.sec1 tbody th:last-child {
    text-align: left;
}

.sec1 table{
    max-width: 75%;
}

.sec2{
    display: grid;
    grid-area: sec2;
}

.sec2 tbody th:last-child {
    text-align: left;
}

.sec2 table{
    max-width: 65%;
}


footer { 
    grid-area: foot; 
}