@charset "utf-8";
/* CSS Document */
body, html{
    background-color:antiquewhite;
    color: black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    text-align: center;
    height: 100%;
    width: 100%;
    margin:0%;
    padding: 0%;
}
nav{
    color: black;
    background-color: bisque;
    width: 100%;
}
nav ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0ch;
    padding: 0px;
}
li{
    padding: 25px;
    border: 1px;
}
a{
    color: black;
    text-decoration: none;
    font-size: 1em;
}
li:hover{
    background-color: lightcoral;
}

article{
    display: grid;
    justify-content:space-between;
    text-align: center;
    grid-gap: 1rem;
	padding:2rem;
    margin: 5%;
}
video{
    box-shadow: 3px 5px 28px 0px rgba(0,0,0,0.75);
}

#i1 {
    box-shadow: 3px 5px 28px 0px rgba(0,0,0,0.75);
}
#i2{
    box-shadow: 3px 5px 28px 0px rgba(0,0,0,0.75);
}
footer {
	font-family: 'Lato', sans-serif;
	font-size: 0.8em;
	color: #FFFFFF;
	background-color: #666;
	
    position: absolute;
    bottom: 0ch;
    height: 4%;
    width: 100%;
    
}

@media (orientation: landscape) {
    article {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
    }
    nav ul {
        flex-direction: row;
    }
    a {
        margin-right:0.2em;
    }
    }
    @media (orientation: portrait) {
    article {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        justify-content: center;
    }
    nav ul {
        flex-direction: column;
        text-align: center;
    }
    nav a {
        margin-bottom:0.2em;
    }
    }