@import url(reset.css);
@import url(FM_part.css);


:root {
    /* colors */
    /* primary*/
    --clr-red: hsl(247, 100%, 19%);
    --clr-soft-red: hsl(0, 93%, 68%);

     /* neutral */
     --clr-dark-grayish-red: hsl(0, 6%, 24%);

    /* gradients */
    --gradient1: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%));
    --gradient2: linear-gradient(135deg, hsl(246, 100%, 20%), hsl(246, 100%, 20%));
   
  
    /* typography */
    /* fonts */
    --ff-primary: 'Josefin Sans', sans-serif;
    --fw-300: 300; /* base */
    --fw-400: 400;
    --fw-600: 600;
    --fs-16: 1rem; /* 16px */
}


html {
    height: 100%;
}

body {
    min-height: 100%;
}

p {
    line-height: 1.5;
}


body {
    display: flex;
    justify-content: center;
    font-family: var(--ff-primary);
    font-size: var(--fs-16);
    font-weight: var(--fw-300);
    background-image: var(--gradient1);
}

/*---------------------Mobile layout-------------------------*/
.grid_container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'header'
        'main'
        'attribution';
    gap: 1rem;
    justify-items: center;
    align-self: start;
    background-image: var(--gradient1);
    /*border: 2px solid green;*/
}

/* style 1st component - mobile */
.header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'sr-only'
        'header__logo'
        'header__image';
    background-color: transparent;
}

.sr-only {
    display: none;
}

.header__logo {
    padding: 1.5rem 2rem;
    width: 20rem;
    position: relative;
    left: 75px;
    /*border: 2px solid green;*/
}

/* style 2nd component - mobile */
.main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'main__logo'
        'section';
    justify-items: center;
    background-color: transparent;
    /*border: 2px solid green;*/
}

.main__logo {
    display: none;
}

.section {
    display: inline-block;
    margin: 1rem 0 0 0;
    max-width: 19rem;
    /*border: 2px solid green;*/
}

.section__title {
    text-align: center;
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: .4rem;
    padding: .6rem;
    text-transform: uppercase;
    font-weight: var(--fw-600);
    color: var(--clr-dark-grayish-red);
    /*border: 2px solid green;*/
}

.section__title-colored {
    font-weight: var(--fw-300);
    color: var(--clr-red);
}

.section__advertisement {
    text-align: center;
    padding: .4rem;
    color: var(--clr-red);
    font-weight: var(--fw-400);
}

.section__input-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: .5rem;
    border-radius: 2rem;
    margin: 1.5rem 0 0 0;
    border: 0.1px solid var(--clr-red);
}

.colored--border {
    border: 2px solid var(--clr-soft-red);
}

/*responsive input field size*/
/*https://stackoverflow.com/questions/18073218/responsive-input-field-width-or-other-elements#answer-18073300*/
.section__input-email {
    border: none;
    width: calc(100% - 6.5rem);
    margin: 0 .5rem 0 1rem;
    font-weight: var(--fw-400);
    background-color: transparent;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}

.section__input-email::placeholder {
    color: var(--clr-red);
    font-weight: var(--fw-300);
    border: none;
}

.section__input-email:focus {
    outline: none;
}

.section__icon-error {
    display: none;
    position: absolute;
    right: 4.2rem;
    /*border: 2px solid green;*/
}

.section__arrow-container {
    cursor: pointer;
    position: absolute;
    right: 0px;
    width: 4rem;
    padding: .65rem;
    border-radius: 2rem;
    overflow: hidden;
    background-color: hsl(246, 100%, 20%);
}

.section__icon-arrow {
    position: relative;
    left: 40%;
}

.section__validation {
    visibility: hidden;
    color: var(--clr-soft-red);
    font-weight: var(--fw-400);
    font-size: .8rem;
    margin: .3rem 0 0 1.4rem;
    /*border: 2px solid green;*/
}

.show--notice {
    visibility: visible;
}

.show {
    display: block;
}

/* style 3rd component - mobile */
/* 3rd component styled in external stylesheet */

/*---------------------Desktop layout-------------------------*/
@media screen and (min-width: 48rem) {

.grid_container {
    grid-template-columns: 2fr;
    grid-template-areas:
        'main header'
        'attribution attribution';
    gap: 0;
    width: 95rem;
    align-self: start;
    /*border: 2px solid red;*/
}

/* style 1st component - desktop */
.header__logo {
    display: none;
}

.header__image {
    justify-self: center;
}

/* style 2nd component - desktop */ 
.main {
    width: 100%;
    margin: 0;
    background-image: url('images/bg-pattern-desktop.svg');
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    padding: 0 1rem;
    /*border: 2px solid red;*/
}

.main__logo {
    display: block;
    justify-self: center;
    align-self: center;
    padding: 1.5rem 0;
    width: 28rem;
    height: auto;
    /*border: 2px solid green;*/
}

.section {
    max-width: 28rem;
    /*border: 2px solid green;*/
}

.section__title {
    text-align: left;
    line-height: 1.1;
    letter-spacing: .6rem;
    font-size: 3rem;
    margin: auto;
    /*border: 2px solid green;*/
}

.section__advertisement {
    text-align: left;
    margin: auto;
    /*border: 2px solid green;*/
}

.section__input-container {
    width: 100%;
}

.section__arrow-container:hover {
    background-color: hsla(0, 93%, 68%, .3);
}


/*style 3rd component - desktop */
.attribution {
    margin-top: 0rem;
    padding: 2.5rem;
    background-color: transparent;
}
    
}

/*------------------grid area names---------------------------*/
.header {
    grid-area: header;
}

.sr-only {
    grid-area: sr-only;
}

.header__logo {
    grid-area: header__logo;
}

.header__image {
    grid-area: header__image;
}

.main {
    grid-area: main;
}

.main__logo {
    grid-area: main__logo;
}

.section {
    grid-area: section;
}

.section__title {
    grid-area: main__title;
}

.section__advertisement {
    grid-area: main__advertisement;
}

.section__input-container {
    grid-area: main__input-container;
}

.section__validation {
    grid-area: main__validation;
}

.attribution {
    grid-area: attribution;
}