body {
  align: left;
  font-family: Arial, Helvetica, sans-serif;

  background-color: #801818 }

  h1,h2 {
    color: yellow;
  }

p {
  color: #ffffff;
}
/*
#popupDialog {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
    width: 90%;
	transform: translate(-50%, -50%);
	padding: 5px;
	background-color: #fff;
	border: 10px solid #d3d3d3;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	max-height: 100%;
	max-width: 100%;
	margin: auto;
	z-index: 1000;
}
*/
/* CSS for object-fit approach */
#popupDialog {
  display: none;	
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  color: #fff;
  background-color: #fff;
  border: 5px solid #d3d3d3;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  margin: auto;
  z-index: 1000;
}



/*id="myVideo" autoplay controls controlsList="nodownload" oncontextmenu="return false;"*/

#overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	z-index: 999;
}


.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  /* for edge cases: */
  width: 100%;
  max-width: 100%;
}



@media screen and (max-width: 768px) {
  .container{
    width: 350px;	
  }
  #myVideo{
    width: 350px;	
  }  
  .two {grid-area: 3 / span 1;}
  .tree {grid-area: 4 / span 1;}  
}

@media (min-width: 768px) {
  .container{
    width: 750px;	
  }
  #myVideo{
    width: 750px;	
  }	  
}

@media screen and (min-width: 1200px) {
  .container{
    width: 1000px;
  }
  #myVideo{
    width: 1000px;	
  }    
}


/*
@media (min-width: 428px) {
  .container{
    width: 375px;	
  }
  #myVideo{
    width: 350px;	
  }	  
}

@media (min-width: 768px) {
  .container{
    width: 750px;	
  }
  #myVideo{
    width: 350px;	
  }	  
}
@media (min-width: 992px) {
  .container{
    width: 960px;
  }
  #myVideo{
    width: 350px;	
  }  
}
@media (min-width: 1200px) {
  .container{
    width: 1000px;
  }
  #myVideo{
    width: 350px;	
  }  
}
*/
.button {
 margin: 0;
 position: relative;
 top: 2%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: #04AA6D;
 border-radius: 5px;
 color: white;
 padding: 2px 2px;
 text-align: center;
 display: inline-block;
 font-size: 12px;
 margin: 4px 2px;
 cursor: pointer;
}