@import "custom";
@import "/node_modules/bootstrap";
@import "fonts";

$black: #141414;
$orange: #d6972a;
$font: 'Fira Code', monospace;

html {
  height: 100%;
}
body {
  background-color: $black;
  background-image: url("../images/background.png");
  color: $orange;
  font-family: $font;
  height: 100%;

  &.nineties {
    color: $black;
    -webkit-animation: background 2s linear infinite;
    -moz-animation: background 2s linear infinite;
    animation: background 2s linear infinite;
    background: linear-gradient(to right, red, orange, yellow, green, aqua, blue, violet, red, orange, yellow, green, aqua, blue, violet, red);
    background-size: 200%  100%;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;

    @-webkit-keyframes background {
      0%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    @-moz-keyframes background {
      0%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    @keyframes background {
      0%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }

    a {
      color: $black;
    }

    .nineties-toggle {
      background: none;
      color: $black;
    }
  }

  .nineties-toggle {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to right, red, orange, yellow, green, aqua, blue, violet);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
  }

  a {
    color: $orange;
  }

  .container {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
  }

  header {
    text-align: center;

    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      list-style: none;
      padding: 0;
    }
  }
}