$screen-sm-phone: 375px;
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;


@mixin phone {
  @media only screen and (max-width: #{$screen-sm-phone}) {
    @content;
  }
}
// Small devices
@mixin sm {
  @media only screen and (max-width: #{$screen-sm-min}) {
    @content;
  }
}

// Medium devices
@mixin md {
  @media only screen and (max-width: #{$screen-md-min}) {
    @content;
  }
}

// Large devices
@mixin lg {
  @media only screen and (max-width: #{$screen-lg-min}) {
    @content;
  }
}

// Extra large devices
@mixin xl {
  @media only screen and (max-width: #{$screen-xl-min}) {
    @content;
  }
}
.App {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;

}

.App-body {
  background: url('/background.png');
  display: flex;
  background-position-y: -100px;
  position: relative;
  width: 100%;
  height: 100%;

  @include phone {
    flex-direction: column;
  }

  .App-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;

  @include phone {
    width: 100%;
    padding: 2px;
  }
    .App-content {
      width: 75%;
      display: flex;
      flex-direction: column;
      @include phone {
        width: 100%;
        display: flex;
        align-items: center;
      }
    }

    .ui.input {
      @include phone {
        font-size: 15px;
        width: 325px;
      }

      input {
        background-color: rgb(222,222,222);
      }
      button {
        background-color: rgb(172,172,172);

        i {
          color: white
        }
      }
    }

    .App-comingSoon {
      width: 257px;
      height: 55px;

      @include phone {
        width: 200px;
      }
    }
    .App-submitText {
      margin-top: 20px;
      margin-bottom: 20px;
      width: 45%;

      @include phone {
        width: 80%;
      }
    }

    .App-store-container {
      display: flex;

      img {
        width: 185.5px;
        height: 55.5px;
        margin: 15px;
        margin-left: 0px;

        @include phone {
          width: 122.43px;
          height: 36.63px;
        }
      }
    }
  }
}


.App-logo {
  margin: 7px;
  @include phone {
    margin: 5px;
    height: 35px;
  }
}

.App-header {
  background-color: #fff;
  display: flex;
  height: 70px;
  color: white;

  @include phone {
    height: 25px;
  }
}

.App-space {
  width: 50%;
  height: 100%;

  @include phone {
    width: 100%;
  }
}

.App-right {
    @include phone {
      display: flex;
      justify-content: center;
    }
  .App-phone {
    width: 50%;
    margin: 25%;
    @include phone {
      width: 270px;
      margin: 0px;
    }
  }
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}