// https://colors.lol/foggiest
$primary: #048243;
$secondary: #32BF84;
$accent: #CAFFFB;
$text: rgb(25, 27, 26);

.app {
  max-width: 640px;
  margin: auto;
  font-family: sans-serif;
  color: $text;

  h1 {
    color: $primary;
  }

  .subtle {
    opacity: .7;
  }

  .pair {
    margin: .5em;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding: 1em;
    border-color: $text;

    .subtle {
      display: block;
      width: 100%;
      text-align: center;
    }
  }

  .footer {
    display: block;
    width: 100%;
    text-align: center;
    opacity: .7;
    font-size: .8em;
  }

  .wizard {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .connect {
      margin: .5em;
      flex: 1 1 0;
      min-width: 200px;
      border-radius: 10px;
      border-width: 1px;
      border-style: solid;
      padding: 1em;

      .button, .button:visited {
        border-radius: 10px;
        display: block;
        color: invert($text);
        text-decoration: none;
        text-align: center;

        padding: .5em 1em;

        img {
          padding-right: .5em;
          width: 50px;
          height: 50px;
          vertical-align: middle;
        }
      }

      &.github {
        border-color: $text;
        .button {
          background-color: $text;
        }
      }

      &.spotify {
        border-color: $primary;
        .button {
          background-color: $primary;
        }
      }

      .status {
        margin-top: .5em;
        width: 100%;
        text-align: center;
      }
    }
  }
}
