* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; width: 100%; } body { overflow: hidden; } a { color: inherit; text-decoration: none; } a:hover, a:focus { text-decoration: underline; } .hidden { display: none !important; } .container { background: url('resources/grid.png') transparent; height: 100%; width: 100%; color: #fff; font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; display: flex; align-items: center; justify-content: center; } @media (max-width: 600px) { .container__index, .container__user { width: 100%; height: 100%; } } .container__loading { text-align: center; background: rgba(17, 17, 17, 0.8); box-shadow: 0 1px 4px #111; padding: 10px; } .container__index { text-align: center; background: rgba(17, 17, 17, 0.8); box-shadow: 0 1px 4px #111; padding: 6px 10px; display: flex; flex-flow: column; justify-content: center; } .container__user { display: flex; flex-flow: row; box-shadow: 0 1px 4px #111; } .background { background: none no-repeat center / cover #000; z-index: -1; position: absolute; height: 100%; width: 100%; transition: background-color 2.1s; filter: blur(10px); transform: scale(1.2); } .index__title { font-weight: 200; font-size: 3em; line-height: 1.5em; font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif; } .index__form { margin: 5px; display: flex; justify-content: center; box-shadow: 0 1px 4px #111; } .index__username, .index__submit { border: 1px solid #111; color: #fff; padding: 2px; font-size: 1.5em; height: 30px; } .index__username { background: rgba(17, 17, 17, 0.5); border-right: 0; font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; width: 100%; } .index__submit { border-left: 0; background: #111; width: 30px; } .index__dev { font-size: 1.1em; font-weight: 200; } .cover { flex-shrink: 0; flex-grow: 0; } @media (max-width: 600px) { .cover { display: none; } } .cover__image { background: none no-repeat center / cover rgba(17, 17, 17, 0.8); width: 300px; height: 300px; } .info { flex-grow: 1; flex-shrink: 0; background: rgba(17, 17, 17, 0.8); padding: 6px 8px; display: flex; flex-flow: column; } @media (min-width: 601px) { .info { width: 300px; height: 300px; } } .info__title { font-size: 3em; line-height: 1.2em; font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif; font-weight: 200; } .info__artist { font-size: 1.5em; line-height: 1.2em; font-weight: 200; } .info__flags { line-height: 1.5em; font-size: 2em; flex-grow: 1; } .info__user { align-self: end; display: inline-flex; width: 100%; } .info__user-back { cursor: pointer; } .info__user-name { flex-grow: 1; text-align: right; }