body { display: flex; min-height: 100vh; flex-direction: column; background-image: url('../img/overlay.png'), linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-image: url('../img/overlay.png'), -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-image: url('../img/overlay.png'), -ms-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-image: url('../img/overlay.png'), -webkit-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-image: url('../img/overlay.png'), -o-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-size: cover; background-attachment: fixed; color: rgba(255,255,255,0.7); } #main { margin-top: 80px; width: 100%; } a { color: white; text-decoration: none; font-weight: 600; transition: color 0.25s ease-in-out; } a figcaption { font-size: 14pt; text-decoration: none; transition: color 0.25s ease-in-out; } a:hover, .item a:hover, .medium a:hover, a:hover figcaption { color: #d64760; text-decoration: underline; transition: color 0.25s ease-in-out; } #wrapper { flex: 1; } #message { padding: 1em 2em; background: lightyellow url('../img/overlay.png'); color: #d64760; font-size: 1.5em; position:relative; top: 80px; z-index: 5; } #header { margin: 40px 80px 40px; } #reel { list-style: none; display: block; margin: 0 80px; padding: 0; text-align: center; } .middle { position: relative; top: 50px; } .item, .medium { color: rgba(0,0,0,0.7); display: inline-block; position: relative; background: rgba(255,255,255,0.8) url('../img/overlay.png'); border: 10px solid white; } .item { height: 300px; width: 400px; margin-right: -14px; margin-bottom: -10px; } .item a { padding: 20px; display: inline-block; width: 100%; height: 100%; } .subheader { background: rgba(214, 71, 96, 0.7) url('../img/overlay.png'); } .column { margin: 0 40px 0; } .column > div { width: 100% } .medium { margin: 0px auto -10px; padding: 20px; } .image { text-align: center; padding: 5%; } .item a, .medium a { /*color: rgba(0,0,0,0.7);*/ color: black; transition: color 0.25s ease-in-out; } figure img { display: block; margin: 0 auto; } figcaption { text-align: center; font-weight: bold; } img { max-width: 100%; max-height: 100%; } nav { width: 100%; padding: 1em 2em; background: #d64760 url('../img/overlay.png'); position: fixed; z-index: 6; } nav li { display: inline-block; } footer { padding: 1em 2em; } #search { padding-top: 5px; } .left { float: left; } .right { float: right; } @media (max-width: 755px) { #main { margin-top: 120px; } #message { top: 120px; } } @media (max-width: 480px) { #main, #reel { margin-left: 0; margin-right: 0; } }