html, body {
font-family: sans-serif;
margin: 0;
width: 100%;
height: 100%;
}
h1 {
font-family: 'Oswald',Arial,serif;
font-size: 48px;
}
p {
font-family: 'Roboto',Arial,serif;
max-width: 65%;
min-width: 500px;
}
h2 {
font-family: 'Open+Sans',Arial,serif;
text-align: center;
font-size: 2.6rem;
}
foooter{
background-color:blue;
}
div {
}
video {
background-color: #000000;
border: 2px solid black;
}
ul {
list-style-type:none;
margin:0;
margin-bottom: 20px;
padding:0;
display:flex;
flex-direction: row;
}
li { flex-grow: 1; }
a {
display:block;
padding:1em;
background-color:LightGray ;
text-align:center;
margin-right:0.2em;
text-decoration:none;
color:#000000;
border-radius: 24px;
}
.container {
display: flex;
}
.main {
background:linear-gradient(30deg, navy, royalblue, gold, royalblue, navy );
padding-left: 30px;
min-width: 75%;
}
.nav {
font-family: 'Oswald',Arial,serif;
color:orangered;
overflow:hidden;
padding:10px;
width:950px;
}
nav ul li a:hover {
color:#000;
}
.video-container {
position:relative;
padding-bottom: 56.25%;
}
.video-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}