* {
    box-sizing: border-box; /* This adds the padding and border units in an element's total width and height */
}

body {
    margin:0 auto;
    width: 100%;
    min-height: 100vh; /* vh unit is relative to 1% of the viewport's height. This makes the height of the page according to the user's viewing device */ 
    display: flex;
    flex-direction: column;
    justify-content: center; /* This will push the child elements to the center of the page along the y-axis  */
    align-items: center; /* This will push the child elements to the center of the page along the x-axis */
    background: hsl(0, 100%, 74%);
    background-image: url(./imgs/bg-intro-desktop.png);
    font-family: 'Poppins', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* Choose a sans-serif font family to accommodate devices that may not be able to use the Poppins font */
    font-size: 16px;
}

body > footer {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: 1rem;
}

.footerLink {
    font-weight: bold;
    color: hsl(0, 72%, 43%);
    transition-duration: 0.1s;
    text-decoration: none;
}

.footerLink:hover, .footerLink:active {
    cursor: pointer;
    font-weight: bold;
    color: hsl(0, 100%, 97%);
    transition-duration: 0.1s;
    text-decoration: none;
}


main {
    width: 90%; /* Make the hero elements take up 80% of their parent element, the Body. */
    display: inherit; /* The Main element will inherit the flex display property from its parent element, the Body. This ensures the two hero elements wil be placed side by side while the footer remains at the bottom */
    justify-content: center;

}

#mainDescription {
    width: 600px;
    margin-right: 80px;
    color: white;
    display: inherit;
    flex-direction: column;
    justify-content: center;
}

#pageTitle{
    font-size: 58px;
    line-height: 68px;
}

#pageSubTitle {
    font-size: 18px;
}


#formColumn {
    width: 750px;
}

#freeTrialContainer {
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: hsl(248, 32%, 49%);
    color: white;
    border-radius: 10px;
    filter: drop-shadow(0 10px rgba(204, 95, 95, 0.9));
}

#trialLength {
    font-weight: bold;
}

#formContainer {
    margin-top: 20px;
    padding: 25px 45px 45px 45px;
    border-radius: 10px;
    background-color: white;
    filter: drop-shadow(0 10px rgba(204, 95, 95, 0.9));
}

#formContainer > p {
    text-align: center;
    color: hsl(246, 25%, 77%);

}

#tosLink {
    color: hsl(0, 100%, 74%);
    font-weight: bold;
    text-decoration: none;
}

#registrationForm {
    display: flex;
    flex-direction: column;
    
}

.inputError {
    color: hsl(0, 100%, 74%);
    text-align: right;
    margin-top: 8px;
    margin-bottom: 0;
    font-style: italic;
}

.inputContainer {
    position: relative;
}

input {
    width: 100%;
    margin-top: 16px;
    padding-left: 35px;
    height: 75px;
    border: 2px solid hsl(0, 0%, 87%);
    border-radius: 5px;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
}


.errorIcon {
    position: absolute;
    display: flex;
    right: 25px;
    top: 45px;
    width: 30px;
}



#registrationForm input[type=submit] {
    margin-bottom: 0px;
    padding: 0;
    background-color: hsl(154, 59%, 51%);
    font-size: 22px;
    color: white;
    text-transform: uppercase;
    border: 2px solid hsl(154, 37%, 48%);
    filter: drop-shadow(0 5px hsl(154, 37%, 48%));
    transition-duration: 0.1s;
}

#registrationForm input[type=submit]:hover {
    cursor: pointer;
}

#registrationForm input[type=submit]:active {
    cursor: pointer;
    border: 2px solid hsl(154, 59%, 51%);
    background-color: hsl(154, 65%, 68%);
    filter: drop-shadow(0 5px hsl(154, 59%, 51%));
    transition-duration: 0.1s;
}    



/*  Here begins the style editing for mobile-view devices */

@media only screen and (max-width: 600px) {

    body {
        background-image: url(./imgs/bg-intro-mobile.png);
    }

    body > footer {
        position: relative;
        margin: 4rem 1rem 0 1rem;
    }

    main {
        display: inherit;
        flex-direction: column;
        justify-content: center;
    }

    #mainDescription {
        width: auto;
        margin: 8rem auto; /* Center text items with a 6rem padding from the top. */
        text-align: center;
        color: white;
    }

    #pageTitle {
        font-size: 1.87rem;
        line-height: 2.5rem;
        align-self: center;
    }

    #pageSubTitle { 
        text-align: center;
    }

    #freeTrialContainer {
        height: 6rem;
        line-height: 2rem;
        padding: 0.2rem 2rem;
    }

    #formColumn {
        width: auto;

    }

    #formContainer {
        padding: 2rem 1.5rem;
    }

    #formContainer > p {
        font-size: 0.75rem;
        margin-top: 1.5rem;
        padding: 0 1rem;
    }

    #fname {
        margin-top: 0;
    }

    input {
        margin-top: 1rem; /* approx. 16px*/
        padding-left: 1.5rem; /* approx 24px */ 
        border: 1px solid hsl(0, 0%, 88%);
    }

    #registrationForm input[type=submit] {
        font-size: 1rem;
    }


}