:root { --foreground: #aa998fff; /*cinereous*/ --background: hsl(20, 12%, 75%); --text: #454545ff; /*onyx*/ --tea-green: #e0fbb1ff; --celestial-blue: #20a4f3ff; --rust: #bc3908ff; } body { position: relative; min-height: 100em; padding: 0; margin: 0; font-family: Roboto; color: var(--text); background: var(--background); } @font-face { font-family: Roboto; src: url(/ipfs/QmfR5nD3dZwZF9ZmSs9XJiLhzVA4p1FtuvPYJCQyjPCTqD); } .darkerbar { background: var(--foreground); width: 100%; } header { display: inline-block; height: 5em; border-bottom: grey 1px solid; } main { padding: 1em; } main > p { text-align: justify; } #links-container { justify-content: center; display: flex; flex-flow: row wrap; width: 100%; } div.item { margin: 0 0.4em; display: flex; position: relative; width: min-content; background: var(--foreground); border: solid grey 2px; border-radius: 15pt; } div.item > a { border-radius: inherit; position: absolute; height: 100%; width: 100%; } div.item:hover { animation: hover 0.2s forwards; } @keyframes hover { 0% {background: var(--foreground)} 100% {background: var(--tea-green)} } img.item { height: inherit; margin: 0 auto; } div.image { border-radius: 15pt; height: 58pt; min-width: 58pt; display: block; width: fit-content; padding: 5pt; margin: 12pt 10pt 12pt 12pt; text-align: center; background: white; } div.desc { margin: auto 6pt auto 0; text-align: center; font-weight: 800; font-size: 14pt; } footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 10em; border-top: grey 1px solid; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 600px) { div.item { width: 70%; } }