* {
  box-sizing: border-box;
}

/* Add a gray background color with some padding */
body {
  font-family: Arial;
  padding: 20px;
  background: #0000a0;
  margin-left: 50px;
  margin-right: 50px;
}

h1,h2{color:#000000;font-family: 'Georgia', ariel, sans-serif; font-weight:strong; margin-bottom:0px;}
h1{font-size:32px;}
h2{font-size:24px;}
h3{font-size:18px;} 
h4{font-size:16px;}  
h5{font-size:13px;}
h6{font-size:12px;}


/* Header/Blog Title */
.header {
  overflow: hidden;
  background-color: #0000a0;
  padding: 0px 0px;
}

/* For width smaller than 400px: */
.banner {
   background-color: #0000a0;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px; 
}


/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
  font-size: 12px;
}


/* Add a card effect for articles */
.card {
   background-color: #cecece;
   padding: 20px;
   margin-top: 20px;
   border: 3px solid #676767;
   border-radius: 5px;
   box-shadow: 5px 5px #000000;
}

.card-2 {
   background-color: #0000a0;
   padding: 20px;
   margin-top: 20px;
   border: 0px solid #676767;
   border-radius: 0px;
   box-shadow: 0px 0px #000000;
}

.content {
   background-color: #cecece;
   padding: 10px;
   margin: 0px 50px 0px 50px;
}

.content-2 {
   background-color: #0000a0;
   padding: 10px;
   margin: 0px 50px 0px 50px;
}

.container {
   background-color: #151515;
   max-width: 500px;
   height: auto;
   
}

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

a:link {
  color: #000000;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #000000;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #0000a0;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: #ff0000;
  background-color: transparent;
  text-decoration: underline;
}

a.button {
  background-color: #909090;
  border: 2px solid #676767;
  border-radius: 5px;
  box-shadow: 5px 5px #000000;
  color: black;
  padding: 10px 29px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  margin: 4px 2px;
  cursor: pointer;

}

a.button:hover {
  transition-duration: 0.4s;
  background-color: #0000a0;
  border: 2px solid #676767;
  border-radius: 5px;
  box-shadow: 5px 5px #cecece;
  color: white;
  
}


img {
        max-width: 100%;
        height: auto;
		
}

video{
     max-width: 100%;
     height: auto;
     max-height: 100%;
}

iframe {
         position: relative;
         overflow: hidden;
         width: 80%;
 		
}


/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #cecece;
  margin-top: 20px;
  border: 3px solid #909090;
  border: 3px solid #676767;
  border-radius: 5px;
  box-shadow: 5px 5px #000000;
}

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