:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 1em; --main-1: rgb(13, 12, 17); --main-2: rgb(47, 40, 53); --main-3: rgb(223, 176, 219); --main-4: rgb(248, 224, 245); --main-5: rgb(69, 56, 90); --main-6: rgb(28, 26, 31); color: var(--main-3); } body { background-color: var(--main-1); padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; } .main { background-color: var(--main-2); margin: auto; border-radius: 20px; } .header, .header-big { color: var(--main-4); } .header-big { width: 800px; margin: -5px; padding: 5px; background: var(--main-5); border-top-left-radius: 10px; border-top-right-radius: 10px; max-width: calc(100vw - 40px); margin-bottom: 10px; display: flex; align-items: center; } .scroller { display: flex; justify-content: start; width: 100%; overflow-x: scroll; } .item-desc { position: relative; top: -200px; color: var(--main-4); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.75)); font-size: 0.8em; } .item-img, .item-desc, .item { width: 200px; height: 200px; object-fit: cover; overflow: hidden; display: block; object-position: center; } .item { margin: 5px; flex-shrink: 0; } .item-a, .item-desc p { margin-left: 5px; } .item-a { font-weight: bold; text-decoration: underline; color: inherit; margin-top: 5px; display: block; font-size: 1.5em; } .item-ico { object-fit: contain; } .art { max-height: 50vh; max-width: min(400px, 50vw); margin: 5px; } .nav { z-index: 5; position: sticky; top: 0; display: flex; background: var(--main-5); color: var(--white); margin-bottom: 10px; align-items: center; flex-wrap: wrap; } .nav, .main { border: solid var(--main-1) 5px; padding: 5px; width: 800px; max-width: calc(100vw - 40px); } .header-a { text-decoration: none; color: inherit; font-weight: bold; margin: 5px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.8em; } .header-img { border-left: none; margin: 0; padding-left: 0; height: 4em; width: 4em; object-fit: contain; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; } .form { grid-template-columns: .3fr 1fr; display: grid; } form .header-big, .form-message, .form-button { grid-column: span 2; } .form-key { font-weight: bold; font-size: 1.2em; height: 50px; color: var(--main-4); display: flex; align-items: center; } .form-button, .form-input { border: solid transparent 0px; background: var(--main-6); color: var(--main-4); border-radius: 10px; padding: .5rem; margin-bottom: .5rem; margin-top: .5rem; text-decoration: none; } .form-button { font-weight: 700; display: inline-block; background: var(--main-3); color: var(--main-1); margin: .5rem; } .sub { font-size: 0.8em; } h1 { font-size: 1.4em; } .link { color: inherit; } .commentbox { white-space: pre-wrap; word-wrap: break-word; } .avatar-img { width: 50px; height: 50px; margin-right: 8px; border-radius: 15px; object-fit: cover; } @media (max-width: 800px) { .form { grid-template-columns: 1fr; } .form-button, .form-message, form .header-big { grid-column: span 1; } }