/*
    # Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### Primary

- Marine blue: hsl(213, 96%, 18%)
- Purplish blue: hsl(243, 100%, 62%)
- Pastel blue: hsl(228, 100%, 84%)
- Light blue: hsl(206, 94%, 87%)
- Strawberry red: hsl(354, 84%, 57%)

### Neutral

- Cool gray: hsl(231, 11%, 63%)
- Light gray: hsl(229, 24%, 87%)
- Magnolia: hsl(217, 100%, 97%)
- Alabaster: hsl(231, 100%, 99%)
- White: hsl(0, 0%, 100%)

## Typography

### Body Copy

- Font size (paragraph): 16px

### Font

- Family: [Ubuntu](https://fonts.google.com/specimen/Ubuntu)
- Weights: 400, 500, 700

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/
/******************************************************************************************************************/
/* Personal Information  */
/******************************************************************************************************************/




/****************************************/
/* Form Section */
/****************************************/

.grid--1--cols{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

.label-text{
    display: block;
    color: hsl(213, 96%, 18%);
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.input{
    font-family: inherit;
    font-weight: 500;
    width: 80%;
    height: 4.6rem;
    margin-bottom: 2.6rem;
    border-radius: 0.6rem;
    border: 1px solid hsl(231, 11%, 63%);
    padding: 1.4rem;
    font-size: 1.6rem;
    color:hsl(213, 96%, 18%);
    outline: none;
}

input::placeholder{
    color: hsl(229, 24%, 87%);
}

input:hover,
input:focus,
input:active{
    border: 2px solid hsl(228, 100%, 84%) ;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    
   
}

/**********************************************/
/* error */
/**********************************************/

.error{
    display: block;
    position: absolute;
    right: 13rem;
    top:0.1rem;
    font-size: 1.3rem;
    color: hsl(354, 84%, 57%);
    font-weight: 500;
}

.error-parent{
    position: relative;
    
}

.error-hidden{
    display: none;
}


#n1{
    background-color: hsl(206, 94%, 87%);
    color: black;
}