chroline/lynk

@import "./reset.css";

@import "./components/Button.scss";
@import "./components/Credits.scss";
@import "./components/Heading.scss";
@import "./components/Image.scss";

html {
  font-size: 16px;
}

html,
body,
#__next {
  min-height: 100%;
  width: 100%;
  margin: 0;
}

* {
  transition: all .1s ease-in-out;
}

.wrapper {
  min-height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  max-width: 30rem;
  padding: 3rem 1.5rem;
  width: 100%;
}

#lynk-instance {
  display: inline-block;

  p {
    line-height: 1.3rem;
    padding: 0 2rem;
  }

  li {
    padding-left: 2rem;
    position: relative;

    &::before {
      content: "•";
      font-size: 1.25rem;
      position: absolute;
    }

    p {
      padding-left: 1.25rem;
    }
  }

  strong {
    font-weight: 600;
  }

  a:not(.btn) {
    opacity: 0.8;
    color: currentColor;
  }
}

hr {
  border: none;
  height: 1px;
  background: currentColor;
  opacity: 0.2;

  margin: 1.25rem 2rem 2rem 2rem;
  display: inline-block;
  width: calc(100% - 4rem);
}