website/root/css/base.css

:root {
  --foreground: #aa998fff; /*cinereous*/
  --background: hsl(20, 12%, 75%);
  --text: #454545ff; /*onyx*/
  --tea-green: #e0fbb1ff;
  --celestial-blue: #20a4f3ff;
  --rust: #bc3908ff;
}

body {
  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;
}

div.image {
  border-radius: 15pt;
  height: 58pt;
  width: auto;
  display: inline-block;
  padding: 5pt;
  margin: 12pt 10pt 12pt 12pt;
  background: white;
}

div.desc {
  margin: auto 6pt auto 0;
  text-align: center;
  font-weight: 800;
  font-size:14pt;
}

footer {
  position: relative;
  display: flex;
  left: 0;
  bottom: 0;
  height: 10em;
  border-top: grey 1px solid;
}