@use "colours";

body {
  background-color: colours.$background;
  font-family: 'Roboto Mono';
  font-size: large;

  text-align: center;
  // padding-left: 20%;
  // padding-right: 20%
}

a:link,
a:visited,
a:hover,
a:active {
  color: colours.$links;
  background-color: transparent;
  text-decoration: none;
}

// Headers. 
h1 {
  font-size: 2.5em;
  color: colours.$h1;
}

h2 {
  color: colours.$h2;
}

h3 {
  color: colours.$h3;
}

h4 {
  color: colours.$h4;
}

h5 {
  color: colours.$h5;
}

h6 {
  color: colours.$h6;
}

blockquote>p {
  color: colours.$blockquote;
}

ul li,
ol li {
  color: colours.$text;
  text-align: left;
  padding-left: 10%;
  list-style-position: inside;
}

code {
  color: colours.$code;
}

li {
  color: colours.$white;
}

em,
strong {
  color: colours.$blockquote;
}

hr {
  background: linear-gradient(to right, colours.$h1, colours.$periwinkle, colours.$h1, colours.$periwinkle, colours.$h1);
  height: 5px;
  border: 0;
}

/* GAY colour for special stuff */
.special {
  background: linear-gradient(to right, colours.$h1, colours.$h2, colours.$h3, colours.$h4, colours.$h5, colours.$h6, colours.$h1, colours.$h1);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;

  /* animation stuff */
  animation: animatingGradient 1s linear infinite;
}

@keyframes animatingGradient {
  0% {
    background-position: 200% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

#subtitle {
  color: colours.$dates;
}

nav p {
  color: colours.$text;
  padding-left: 0%;
  padding-right: 0%;
}

#text,
p {
  color: colours.$text;
}

// Statuscafe
#statuscafe {
    padding: .5em;
    background-color: black;
    color: colours.$text;
    border: 2px solid colours.$h1;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}