body{
	background-image: url("Background.png");
	background-attachment: fixed;
  margin: 0;
}

.container{
	width: 100%;
	margin: auto;
  padding: 1%;
}


video, canvas{
	width: 100%    !important;
	height: auto   !important;
  margin: auto;
}
  
video{
 	border-radius: 10px;
}
  nav{
      flex-grow:1;
      padding: 3px;
      background-color: purple;
      font-size: 30px;
    }
*{
  box-sizing:border-box;
  padding:0;
  margin:0;
}

.header{
    background-color: white;
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
    padding:1.5rem 7%;
    top:0; left: 0; right: 0;
    height: 100px;
    border-radius: 0px 0px 10px 10px;
}

.header .logo img{
    height: 6rem;
    background: transparent;
}

#name{
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: #F0A910;
  font-size: 4em;
  background: transparent;
}


/*BUTTON STYLING*/
button {
  margin: 5px 5px;
  padding: 10px 30px;
  background: #1e4f2a;
  border: 1px solid #1e4f2a;
  border-radius: 8px;
  outline: 0;
  color: white;
}


button:hover {
  color: #1e4f2a;
  background: #ffffff;
  border: 2px solid #1e4f2a;
  font-weight: bold;
}

#btnRevert{
  background-color: #d72e3c;
}

#btnRevert:hover{
  color: #d72e3c;
  background: #ffffff;
  border: 2px solid #d72e3c;
  font-weight: bold;
}


/* RESPONSIVENESS */
@media (max-width: 500px){
  
  /* Header */
  .header {height: 75px}
  .header .logo img {height: 4rem;}
  #name{font-size: 1.5em;}
}
h4{
  
}