@import url(./colors.css);
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-background-black); }

h1, h2, h3, h4, h5, h6, p {
  color: var(--color-theme-white); }

h2 {
  margin-bottom: 0; }

h3 {
  width: 96%;
  max-width: 40rem;
  text-align: center; }

p {
  line-height: 1.1em;
  margin: 0; }

img.logo {
  margin-top: 1em;
  height: 3em;
  width: auto; }

div.linktree {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 40rem; }

.linktree a.link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5em;
  margin-bottom: 1em;
  color: var(--color-theme-gold);
  text-decoration: none;
  background-color: var(--color-tw-dark-three);
  border: 2px outset var(--color-theme-gold);
  border-radius: 1em;
  font-weight: 600;
  transition: all 250ms ease-in-out; }
  .linktree a.link:hover {
    color: var(--color-background-black);
    background-color: var(--color-theme-gold);
    text-decoration: dashed underline var(--color-background-black); }
  .linktree a.link:active {
    transform: scale(1.05); }

.link img {
  height: 1.75em;
  width: auto;
  margin-right: 0.5em;
  margin-left: -1.0em; }

img.audit {
  padding: 0.125em 0;
  height: 1.5em; }

/* === Responsiveness === */
/* Medium-sized desktops */
@media screen and (min-device-width: 1281px) and (max-device-width: 1599px) {
  body {
    font-size: 1.25em; }
  .linktree a.link {
    font-size: 1.1em; } }

/* Large desktops */
@media screen and (min-device-width: 1600px) {
  body {
    font-size: 1.5em; }
  .linktree a.link {
    font-size: 1.25em;
    padding: 0.25em; } }

/* Small mobile devices */
@media screen and (pointer: coarse) and (max-device-width: 600px) {
  div.linktree {
    width: 86%; }
  .linktree a.link {
    padding: 0.25em; } }

/* Medium-sized mobile devices */
@media screen and (min-device-width: 321px) and (max-device-width: 540px) {
  .linktree a.link {
    font-size: 1.2em;
    padding: 0.35em; } }

/* Large mobile devices */
@media screen and (pointer: coarse) and (min-device-width: 600px) {
  body {
    font-size: 1.25em; }
  .linktree a.link {
    font-size: 1.4em;
    padding: 0.35em; } }