@import "sass/config";

body {
  color: white;
  background-color: #111;
  font-family: Verdana;
  margin: 0;
}

// Normalize etc.
ul {
  margin: 0;
}

a {
  text-decoration: none;
  color: pink;

  &:hover {
    color: lighten(pink, 50%);
  }
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

.inline-items {
  display: flex;

  & > * {
    margin-right: 1em;
  }
}

.yellow { color: $color-yellow; }
.green { color: $quality-2; }

.tight {
  margin-bottom: 0;

  & + p {
    margin-top: 0;
  }
}

.calculator {
  &__points {
    color: white;
    text-align: center;
  }
}

.trees {
  display: flex;
  justify-content: center;
}

.tree {
  position: relative;
  min-width: 300px;  
  color: white;
  margin-right: 1em;
  background-color: #111;

  .talent {
    position: absolute;

    // Rows
    @for $i from 0 through 6 {
      &[data-row="#{$i}"] {
        top: $row-offset + (($i) * $row-distance);
      }
    }

    // Columns
    @for $i from 0 through 3 {
      &[data-col="#{$i}"] { 
        left: $col-offset + ($col-distance * $i); 
      }
    }
  }

  &:last-child {
    margin-right: 0;
  }

  &__header {
    text-align: center;

    h3 {
      margin-top: .75em;
      margin-bottom: .75em;
    }
  }

  &__body {
    position: relative;
    height: 520px;
    border: 1px solid black;
    background-size: cover;
    background-position: center;
  }
}

.index {
  min-height: 85vh;
}

.index__class-picker {
  margin: 2em 0;
}

footer {
  padding: 2em;
  font-size: 12px;
  text-align: center;
}