* {box-sizing: border-box;}

body
{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #000033;
  background-image: url("https://www.mmau.com/graphics/background.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-size: 16px;
  color: #ffffff;
}

a:link {color: #62b1ff; text-decoration: none}
a:visited {color: #62b1ff; text-decoration: none}
a:hover {color: #62b1ff; text-decoration: underline}

p
{
  margin-left: 20px;
  margin-right: 20px;
  line-height: 1.6;
  font-size: 16px;
}

li
{
  margin-left: 40px;
  margin-right: 40px;
  line-height: 1.6;
  font-size: 16px;
}

h1
{
  margin-left: 20px;
  margin-right: 20px;
  font-size: 24pt;
}

h2
{
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 40px;
  font-size: 14pt;
}

.videodetails { 
   position: relative; 
   width: 100%;
}

h3 { 
   position: absolute; 
   bottom: 10px; 
   left: 0; 
   width: 100%; 
}

h3 span { 
   color: white; 
   font: 12pt Century Gothic, Arial,Verdana,Helvetica,sans-serif; 
   line-height: 190%; 
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 5px; 
}

.css-input { padding: 8px; border: 2px solid rgb(128, 128, 128); border-image: none; font-size: 16px; background-color: rgb(255, 255, 255); color:#000000;  } 
		 .css-input:focus { outline:none; } 

.signupbutton {
  background: #cc3300;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn {
  background: #33cc00;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btnlogin {
  background: #3399ff;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btnplay {
  background: #33cc00;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btncancel {
  background: #999999;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btnmylist {
  background: #ff9900;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.navigationbackbutton {
    color: #ffffff;
    font-weight: bold;
    border-radius: 6px;
    background: #59aafc;
    padding: 15px;
    font-size: 14pt;
}

.navigationsignupbutton {
    color: #ffffff;
    font-weight: bold;
    border-radius: 6px;
    background: #59aafc;
    padding: 15px;
    font-size: 14pt;
}

.pagination {
    text-align: center;
}

.pagination a {
    color: #ffffff;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    text-align: center;
    transition: background-color .3s;
}

.pagination a.active {
    background-color: #8f99f7;
    color: white;
}

.pagination a:hover:not(.active) {background-color: #dddddd;} 

.navigationselector a {
    color: #ffffff;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.navigationselector a.active {
    background-color: #8f99f7;
    color: white;
}
.navigationselector a:hover:not(.active) {background-color: #dddddd;} 




.column {
  float: left;
  padding: 20px;
  width: 500px;
  text-align: left;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 1500px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1500px) {
  .column {
    width: 100%;
  }
}