:root { --text-color: white; --inverted-text-color: rgba(0,0,0,0.7); --theme-color: #d64760; --inverted-theme-color: white; --message-background-color: lightyellow; } 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); } a { color: var(--text-color); 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, .loginDiv a:hover { color: var(--theme-color); text-decoration: underline; transition: color 0.25s ease-in-out; } #wrapper { flex: 1; } #message { padding: 1em 2em; background: var(--message-background-color) url('../img/overlay.png'); color: var(--theme-color); font-size: 1.5em; position:relative; top: 80px; z-index: 5; } #header { margin: 40px 80px 40px; } .reel { list-style: none; display: block; margin: 80px 80px 0; padding: 4em 0 4em; text-align: center; } .item, .medium, .loginDiv, .newaccount, .reactivate, .password { color: var(--inverted-text-color); display: inline-block; position: relative; background: rgba(255,255,255,0.8) url('../img/overlay.png'); border: 10px solid var(--inverted-theme-color); padding-top: 0; padding-left: 0; vertical-align: middle; } .loginDiv a { color: var(--inverted-text-color); } .item { height: 300px; width: 400px; margin-right: -14px; margin-bottom: -10px; } .item a { padding: 20px; display: inline-block; width: 100%; height: 100%; } .subheader { background: var(--theme-color) url('../img/overlay.png'); display: inline-flex; flex-direction: column; } .subheader > h1 { flex: 1; top: 50%; margin: 0; display: block; width: 100%; } .subheader > * { padding: 20px; } .subheader a { flex: 1; display: inline; padding: 0; line-height: 50px; } .subheader a:hover { color: var(--text-color); } .subheader p { font-size: 14pt; display: block; height: 150px; } .pagin { line-height: 260px !important; font-size: 14pt; } .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: black; transition: color 0.25s ease-in-out; } .item img { max-height: 230px; } figure { position: relative; top: 50%; transform: translateY(-50%); } 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: var(--theme-color) 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; } ul, ol { text-align: left; } .tags { margin: 0 auto; display: table; } .tags ul { padding: 0; } .tags li { display: inline; } .tags li:before { display: inline-block; background-image: url(../img/tags.svg); width: 1.8ex; height: 1.5ex; background-size: contain; background-repeat: no-repeat; content: ""; } .comment { text-align: left; } .reply { padding-left: 50px; } .js-hidden { display: none; } .redbox { padding: 1em; border-radius: 5px; background-color: red; } @media (max-width: 755px) { #main { margin-top: 120px; } #message { top: 120px; } } @media (max-width: 480px) { .reel { margin: 80px 0 0; } .item, .medium { border: 1px solid var(--inverted-theme-color); } .item { margin-bottom: -1px; margin-right: 0; width: auto; max-width: 400px; min-width: 100%; } } #user-nav { list-style: none; font-weight: bold; position: relative; padding: 0; } #user-nav ul { display: none; position: absolute; } #user-nav li { margin: 0 0 0 0; } #user-nav > li { margin-right: 20px; } #user-nav li a { padding: 10px 20px 10px; border-radius: 5px; background: white url('../img/overlay.png'); } #user-nav li ul { padding: 0; } #user-nav li ul li { display: inline; } #user-nav input[type="checkbox"]:checked + ul { display: block; background-color: white; border-radius: 5px; z-index: 99; } #user-nav a { display: block; text-decoration: none; color: var(--theme-color); } #user-nav a:hover { color: black; transition-timing-function: linear transition-duration: 0.25s; } #user-nav label { margin: 0; } .vanish { /*position: absolute; left: -9999px;*/ display: none; } .red { background: rgba(255,0,0,0.2) url('../img/overlay.png') !important; }