:root { --theme-color:#6b6e4c; --theme-color-lighter:#bbb584; --theme-color-variation:#ede622 } * { margin:0; padding:0; box-sizing:border-box } body { background-color:#000; font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; font-size:1em; color:#fff } a { transition:.2s; color:#d3d3d3; text-decoration:none } a:hover { color:var(--theme-color-lighter) } header { display:flex; border-bottom:thick solid rgba(255,255,255,.1); width:100%; box-shadow:2px 7px 5px rgba(0,0,0,.3),0 -4px 10px rgba(0,0,0,.3); background-color:rgba(0,0,0,.15) } header div { padding:1rem } main { margin-bottom:2em } h1,h2,h3 { text-shadow:2px 7px 5px rgba(0,0,0,.3),0 -4px 10px rgba(0,0,0,.3) } main p { font-size:x-large; margin-bottom:1em } main h1,main h2 { margin-bottom: .6em } main h2 { margin-top:1em } b { font-weight:600 } h2 { font-weight:400; color:var(--theme-color-lighter) } #everythingHelper { position:relative } #mainHelper { padding-top:3rem; max-width:50vw; margin:auto; display:flex } #headerSubtitle { color:#fff; opacity:.6 } #logo { height: 2em; margin: auto 0 auto 1em; } .noWrap { text-wrap-mode: nowrap; } @keyframes ellipsis-loader { 0%,25% { transform:translateX(0) } 100% { transform:translate(20px) } } @keyframes ellipsis-loader__dot { 0% { animation-timing-function:cubic-bezier(.23,1,.32,1); transform:translateX(0) } 55% { animation-timing-function:cubic-bezier(.785,.135,.15,.86); opacity:1; transform:translateX(98px) } 100%,75% { transform:translateX(212px) } 90% { opacity:.2 } } @keyframes fadeIn { to { opacity:1 } } @keyframes fadeOut { to { opacity:0 } } @media screen and (max-width:1280px) { body { font-size:2vh } header { padding-top:1.4rem; } header div { margin-right: auto; } main { max-width:90vw } main h1 { font-size:3vh } #mainHelper { flex-direction:column; max-width:90vw } #logo { margin: auto 0 auto auto; padding-left: 2em; } }