body { background: #234647; font-family: "Candara", "Open Sans", sans-serif; font-size:16px; color: white; } a { color: #0783b9; } .tiny { font-size: 9px; margin: 0 auto; text-align: center; } /*Everything in the main box goes in this*/ .wrapper { width: 750px; border: 3px solid black; margin: 0 auto; top: 0px; } .header { background: black; height: 300px; border-bottom: 3px solid black; margin: 0 auto; overflow: hidden; background: linear-gradient(rgb(0,0,0,0.7),rgb(0,0,0,0.7)), url("pond.gif"); /*Header image -- replace with your own!*/ background-size:cover; } /*This and the header-title class are deprecated now that this style uses a background image for the header div.*/ /*.header img { display: block; opacity: 0.35; width: 100%; height: 100%; overflow: hidden; } */ /*If you want to use a smaller title or normal text, add .header p or .header h4 or whatever to the list*/ .header h2, .header h3, .header h1 { font-weight: bold; color: white; text-align: center; border: 0px solid green; margin: 18% auto; /*approx centered*/ opacity: 0.999999; } .links { background: black; padding: 10px; border-bottom: 3px solid black; } .links a { color: white; padding: 3px; margin-left: 5px; margin-right:5px; text-decoration: none; font-size:17px; } .main { padding: 15px; margin: 0 auto; background: #222222; } /*Prevent overflow of large images in main text areas.*/ .main img { max-width: 100%; height: auto; } .footer { background: black; padding: 20px; padding-top:5px; padding-bottom:5px; border-top: 3px solid black; font-size:14px; } /*For narrow screens*/ @media(max-width: 790px) { .wrapper { width: 95%; } .header h1, .header h2, .header h3 { /*Vertical centering gets wonky when the box is variable width*/ margin: 20% 5% auto; } } /*Mobile compatibility*/ @media(orientation: portrait) { .wrapper { width: 95%;} .header { height:230px; } .header h1, .header h2, .header h3 { margin: 20% 3% auto; } }