/*Other default stylings or reset can be found in normalize.css file*/

html {
      font-size: 62.5%;
    }

    :root {
      --clr-btn-linear-active: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(0, 80%, 86%));
      --shadow-1: hsla(0, 80%, 86%, .6);
      --shadow-2: hsla(0, 80%, 86%, .8);
      --clr-btn-linear: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
      --clr-pri: hsl(0, 6%, 24%);
      --clr-txt: hsl(0, 36%, 70%);
      --clr-err: hsl(0, 93%, 68%);
      --clr-btn-bdr: hsla(0, 36%, 70%, .5);
      --shadow: hsla(0, 80%, 86%, 0.3);  
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100vh;
      gap: 1rem;

      font-family: "Josefin Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-size: 1.4rem;
      color: var(--clr-txt);
      background: hsl(0, 6%, 10%);
    }

    /*---------CONTAINER STYLING-------------*/
    /*NOTE: Main container is in the container itself, i.e main-container is the left container on desktop design;*/
    .container {
      display: flex;
      background: linear-gradient(to bottom, hsl(0, 0%, 100%), hsl(0, 100%, 98%));
    }

    .main-container, .content {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .content {
      align-items: center;
      text-align: center;
      margin: 4rem 3rem;
    }

    .logo {
      width: 10rem;
      margin: 3rem;
    }

    .hero-mobile {
      width: 100%;
      margin-top: -2rem;
    }

    .hero-heading {
      text-transform: uppercase;
      letter-spacing: 1rem;
      line-height: 1;
      font-size: 3.5rem;
      font-weight: 600;
      color: var(--clr-pri);
    }

    .hero-heading span {
      font-weight: 300;
      color: var(--clr-txt);
    }

    p {
      line-height: 1.6;
    }


    /*-------------FORM STYLING-------------*/
    form {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      align-items: flex-start;
      gap: .8rem;
    }

    .form-flex {
      display: flex;
      /*flex-direction: column;*/
      position: relative;
      width: 100%;
      justify-content: center;
    }

    input[type="email"] {
      width: 100%;
      padding: 1rem 7rem 1rem 2rem;
      outline: none;
      border-radius: 3rem;
      border: 1px solid var(--clr-btn-bdr);
      box-shadow: 0 0 .5rem .1rem var(--shadow);
    }

    input[type="email"]::placeholder {
      color: var(--clr-txt);
      opacity: .5;
    }

    input[type="email"]:focus {
      border-color: hsl(0, 74%, 74%);
    }

    .icon-error, button[type="submit"] {
      position: absolute;
    }

    button[type="submit"] {
      padding: .6rem 2.5rem;
      border-radius: 3rem;
      border: none;
      right: 0;
      background: var(--clr-btn-linear);
      box-shadow: 0 .6rem 1.5rem .7rem var(--shadow-1);
    }

    button[type="submit"]:hover {
      background: var(--clr-btn-linear-active);
      box-shadow: 0 .6rem 1rem .3rem var(--shadow-2);
    }

    .icon-error {
      left: -3rem;
      top: 50%;
      transform: translate(0, -50%);
      width: 1.8rem;
    }

    .error-txt {
      font-size: 1.2rem;
      font-weight: 500;
      color: var(--clr-err);
      margin-left: 2rem;
    }

    .invalid-input {
      border-color: var(--clr-err);
    }

    .hidden, .hero-desktop {
      display: none;
    }


    /*-------------RESPONSIVE DESIGN-------------*/
    @media (min-width: 445px) {
      body {
        font-size: 1.6rem;
      }

      .hero-heading {
        font-size: 4.5rem;
      }

      button[type="submit"] {
        padding: .7rem 3rem;
      }
    
    }

    @media (min-width: 540px) {
      .content {
        margin: 0 5rem;
      }
    }

    @media (min-width: 768px) {
      body {
        font-size: 1.4rem;
      }
      .container{
        width: 98vw;
        max-height: 98vh;
        display: flex;
        /*gap: 2rem;*/
      }

      .hero-mobile {
        display: none;
      } 

      .content {
        margin: 0 8rem;
        text-align: left;
      }

      .logo {
        display: block;
        margin-left: 8rem;
      }

      .hero-heading {
        font-size: 3.5rem;
      }

      .hero-desktop, .main-container {
        display: flex;
        width: 100%;
        height: 100%;
      }

      .hero-desktop {
        width: 43%;
      }

      button[type="submit"] {
        padding: .7rem 3.2rem !important;
      }
    }

    @media (min-width: 850px) {
      body {
        font-size: 1.6rem;
      }

      .hero-heading {
        font-size: 4.5rem;
      }

      button[type="submit"] {
        padding: .8rem 2.5rem;
      }
    }

    @media (min-width: 960px) {
      .container{
        width: 90vw;
      }
    }

    @media (min-width: 990px) {
      .content {
        margin: 0rem 10rem;
      }

      .logo {
        margin: 5rem 10rem;
      }
    }

    @media (min-width: 1200px) {
      body {
        font-size: 1.5rem;
      }

      .container {
        max-height: 90vh;
        max-width: 80vw;
      }

      .hero-heading {
        font-size: 5.5rem;
        letter-spacing: 1.5rem;
        line-height: 1.1;
      }

      .content {
        margin: 3rem 12rem;
        text-align: left;
      }

      .content p {
        margin-top: -1rem;
        margin-bottom: 1.5rem;
      }

      .logo {
        display: block;
        margin-left: 12rem;
      }

      form {
        margin-top: -1rem;
      }
    }


    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }