.lyphe-says { text-align: left; min-width: 20%; max-height: 128px; border: 3px inset black; padding: 10px; background-image: url("/static/snow.gif"); } .lyphe-says > img { height: 100px; float: left; margin-right: 10px; } .lyphe-says > h5, p { color: black; word-break: break-word; } .lyphe-says > h5 { padding: 0; margin: 0; line-height: 2em; } .ask { text-align: left; width: 85%; } .lyphe { display: flex; flex-direction: row; width: 85%; color: white; text-decoration: none; } .lyphe > * { margin-top: auto; margin-bottom: 1rem; } .lyphe-text { vertical-align: bottom; display: inline; } .lyphe-text > h2 { display: inline; } .lyphe-icon { height: 120px; margin-right: 20px; } .settings-area { background-image: url("/static/img/darkened_paper.jpg"); width: 100%; } .pagegradient { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 50px), linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 30px), linear-gradient(to left, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 30px); margin: 0; min-height: 100vh; width: 100%; display: flex; flex-direction: column; } .settings-row { display: flex; flex-direction: row; } @media screen and (max-width: 800px) { .settings-row { flex-direction: column; } } .settings-section { width: 10%; min-height: 120px; background-image: url("/static/img/paper.jpg"); margin: 50px 90px 30px 90px; padding: 20px; text-align: left; box-shadow: rgba(0,0,0,0.3) 0 0 10px; color: black; } @media screen and (max-width: 800px) { .settings-section { width: 79%; margin: 20px auto; } } .pagecontent { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 50px); margin: 0; min-height: 100vh; width: 100%; } #email { flex-grow: 1; } #theme { flex-basis: 45%; } form { display: flex; flex-direction: column; } #theme-submit { font-size: 1em; }