@use '../../theme' as *;

.connect-page {
  position: relative;
  height: 100vh; // overrides navbar height
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .content {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;

    .wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .title {
        @include font('headline');
        margin: 0;

        .name {
          color: color('primary');
          font-weight: 700;
        }
      }

      .subtitle {
        @include font('subtitle');
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        gap: 40px;
      }
    }

    .preview {
      height: 375px;
      width: 250px;
      background-color: color('surface');
      border: 2px solid color('primary');
    }
  }

  .version {
    position: absolute;
    bottom: 0;
    right: 0;
    @include font('subtitle');
    font-size: 13px;
    margin: 5px;
  }

  .wave {
    position: absolute;
    bottom: 0;
    z-index: 2;

    &.second {
      bottom: 7%;
      transform: scaleX(1.2);
      z-index: 1;
    }
  }
}
