@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-size:18px;
}

img,
iframe {
max-width: 100%;
height: auto;
/* so that aspect ratio is kept even if height is declared in markup */ 
border: 0;
/* this stops a border if the image is inside a link */
}

body {
	font-family: arial, sans-serif;
	color: #ffffff;
}



body {
      background-color: #0078D7;
     }
header {
       background-color: rgba(0,227,18,0.00);
       }
/* Note that if we want a number of different elements to have the same style, we just comma separate them. */
header, footer {
               text-align: center;
               }

/* TYPOGRAPHY*/
h1 {
    font-size:50px;
    color: #0078D7; 
    text-transform: uppercase;
   } 
h2 {
    font-size: 30px;
    font-family: 'Lato', sans-serif; 
    text-transform: uppercase;
   }
h1,h2,p,li {
            padding-bottom: 1em; 
           }

.item {
       background-color: rgba(0,100,255,0.82);
       padding:1%;
       margin:1%; 
       margin-bottom: 20px; 
       margin-top: 20px; 
       border-radius:10px;
}
/* let's bring the width in a little */
/* check it out - we're responsive without even trying! */ 
main {
/* There's rarely any time you should set an explicit width. Always use max-width wherever possible. */
     max-width: 1000px;
/* Change the above to width: 1000px and see what happens with responsive */
     margin-left: auto;
     margin-right: auto; 
      }

/* let's talk about nesting */ 
.item li {
          margin-left: 25px;
}
blockquote {
text-transform: uppercase; 
font-style: italic;
}

nav {
text-align: middle;
}
nav li {
display: inline-block;
}
/* nav li a, or nav a ?? */ 

nav a {
background: #0078D7; 
color: white;
padding: 5px; 
text-decoration: none; 
border-radius: 5px;
}
nav a:hover {
background: #003F71;
}
body {
background-color: #0078D7;
background-image: url("bgtrain.jpg"); 
background-repeat: no-repeat; 
background-size: cover;
}