@import "sass/config";

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

.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;

  &: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;
  }
}

.class-picker {
  display: flex;
  justify-content: center;
  list-style: none;
  margin-top: 2em;
  margin-bottom: 2em;

  &__class {
    margin-right: 1em;
    opacity: .8;
    transition: all .1s ease-out;

    &:hover {
      opacity: 1;
    }

    &--active {
      opacity: 1;
    }

    &--inactive {
      opacity: .4;

      &:hover {
        opacity: .5;
      }
    }
  }
}