@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;600&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box; }

body {
  background-color: #674baf; }

.main-container {
  display: flex;
  flex-direction: column;
  width: 375px;
  height: 800px;
  background: url("../images/bg-mobile.svg") no-repeat;
  margin: 0 auto; }

.img-container {
  display: flex;
  flex-direction: column; }

.logo {
  margin: 38px auto 60px 40px;
  width: 120px; }

.illustration {
  width: 296px;
  height: 209px;
  margin: 0 auto 40px auto; }

.pitch-container {
  width: 304px;
  height: 272px;
  margin: auto auto 65px auto; }

.title {
  font-family: "Poppins", sans-serif;
  color: #fff;
  text-align: center;
  font-size: 24px; }

.description {
  font-family: "Open Sans", sans-serif;
  color: #fff;
  text-align: center;
  font-size: 16px;
  margin-bottom: 25px; }

.register-btn {
  font-size: 12px;
  color: #674baf;
  background-color: #fff;
  border-radius: 30px;
  display: block;
  margin: 0 auto;
  width: 210px;
  height: 40px;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; }
  .register-btn:hover {
    cursor: pointer;
    color: #fff;
    background-color: #e882e8; }

.social-icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  width: 304px; }

.fab {
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  height: 40px;
  margin: auto 5px;
  padding: 11px;
  width: 40px; }
  .fab:hover {
    cursor: pointer;
    color: #e882e8;
    border: 2px solid #e882e8; }

a a:hover,
a:visited,
a:active {
  color: #fff;
  text-decoration: none; }

@media (min-width: 1100px) {
  .main-container {
    width: 1400px;
    height: 800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: url("../images/bg-desktop.svg") no-repeat; }
  .logo {
    width: 25%;
    margin: 65px auto 80px 80px; }
  .illustration {
    width: 696px;
    height: 493px;
    margin-left: 80px; }
  .pitch-container {
    width: 520px;
    height: 225px;
    margin: 0 auto; }
  .title {
    font-size: 40px;
    margin: 232px auto 24px auto;
    text-align: left; }
  .description {
    font-size: 18px;
    margin: 0 auto 24px auto;
    text-align: left; }
  .register-btn {
    font-size: 18px;
    margin-left: 0;
    width: 200px;
    height: 56px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; }
  .social-icons {
    margin-top: 263px;
    justify-content: flex-end;
    width: 520px; } }