body{
    background: linear-gradient(130deg, #87B889 0%, #F8FBF8 180%);
}
.Wrapper{
    width: 100%;
}

.Company-Display{
    grid-area: display;
    max-width: 35rem;
}

.System-Intro{
    display: block;
    padding-block: 1rem;
    grid-area: intro;
}
.main-form{
    grid-area: main;
    display: flex;
    flex-direction: column;
    margin-block: auto;
    gap: 1rem;
    padding-inline: 2rem;
    padding-top: 1rem;
    padding-bottom: 5rem;
    background: linear-gradient(190deg, #87B889 0%,#508953 140%);
    border-top-right-radius: 9.75rem ;
    border-bottom-left-radius: 9.75rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.Container{
    width: min(90%,100%);
    margin-inline: auto;
    display: grid;
    justify-content: center;
    align-items: center;
    padding-block: 2rem;
    padding-inline: 1rem;
    grid-template-areas: 
    'main main'
    'display display'
    'intro intro';
    grid-template-columns: 50% 45%;
    gap: 1rem;
    overflow: hidden;
}


.Comp-Title{
    display: flex;
    gap: 0.8rem;
}





/* Main form style */
.form-header{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.header-welcome .welcome{
    display: block;
}



.form-body{
    padding-inline: 0.5rem;
}
.form-element{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}




/* Input style */
input:focus{
    outline-color: var(--clr-Login-Ter-accent);
}

.submit input{
    width: 100%;
    padding-block: 0.8rem;
    background-color: #5EA061;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-Login-Primary-light);
}

.submit input:hover{
    background-color: var(--clr-Login-Ter-light);
    color: var(--clr-Login-Primary-accent);
}

.username input[type="text"],
.password input[type="password"] {
    width: 100%;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: solid 2px var(--clr-Login-Ter-light);
    background-color: rgba(234, 243, 234, 0.5);
}


/* Form Header Style */
.header-logo img{
    max-width: 7rem;
}
.header-welcome .welcome h5{
    font-size: var(--fs-Login-50);
    font-weight: 700;
    color:var( --clr-Login-Primary-accent);
}
.header-welcome .welcome p{
    font-size: var(--fs-Login-25);
    font-weight:400;
    color:var( --clr-Login-Primary-light);
}





/* Title Intro Style */
.Comp-Title h3{
    max-width: 15ch;
    font-size: var(--fs-Login-25);
    font-weight: bolder;
    color:var( --clr-Login-Sec-accent);
    padding-block: 0.7rem;
}
.System-Intro .Comp-Title h1{
    font-size: var(--fs-Login-200);
    font-weight: bolder;
    color:var( --clr-Login-Primary-accent);
}

.System-Intro .System-Cont p{
    font-size: var(--fs-Login-25);
    font-weight:400;
    color:var( --clr-Login-Primary-light);
}


@media(min-width:40em) and (max-width:72em){
    .main-form{
        grid-area: main;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-top-right-radius: 9.75rem ;
        border-bottom-left-radius: 9.75rem;
        width: 100%;
    }
    .Container{
        width: min(90%,100%);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-inline: auto;
        display: grid;
        grid-template-areas: 
        'display main'
        'intro main';
        grid-template-columns: 50% 45%;
        gap: 3rem;
    }
    
    
    
    
    /* Main form style */


    
    .form-body{
        padding-inline: 1rem;
    }

    .form-element{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    
    
    
    /* Input style */

    .submit input{
        width: 100%;
        padding-block: 0.8rem;
        font-size: 1rem;
    }
    
    
    .username input[type="text"],
    .password input[type="password"] {
        width: 100%;
        height: 2.5rem;
        padding: 1rem;
    }
    
    
    /* Form Header Style */
    .header-logo img{
        max-width: 6rem;
    }
    .header-welcome .welcome h5{
        font-size: var(--fs-Login-40);
    }
    .header-welcome .welcome p{
        font-size: var(--fs-Login-30);

    }
    
    
    /* Title Intro Style */
    .Comp-Title h3{
        font-size: var(--fs-Login-25);
        padding-block: 0.7rem;
    }
    .System-Intro .Comp-Title h1{
        font-size: var(--fs-Login-200);
    }
    
    .System-Intro .System-Cont p{
        font-size: var(--fs-Login-25);
    }
    
    
}


@media(min-width:72em){
    .Container{
        width: min(95%,100%);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-areas: 
        'display main'
        'intro main';
        grid-template-columns: 50% 45%;
        gap: 4rem;
    }
    .main-form{
        padding-inline: 4rem;
        padding-top: 2rem;
        padding-bottom: 5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-top-right-radius: 12.75rem ;
        border-bottom-left-radius: 12.75rem;
    }


    .username input[type="text"],
    .password input[type="password"] {
        width: 23rem;
        height: 3rem;
        border-radius: 0.5rem;
        padding: 1rem;
    }
    .submit input{
        width: 23rem;
        font-size: 1.2rem;
        font-weight: 700;
        padding-block: 0.8rem;
    }

    .form-element{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    

    .header-logo img{
        max-width: 8rem;
    }
    .header-welcome .welcome h5{
        font-size: var(--fs-Login-50);
        font-weight: 700;
       
    }
    .header-welcome .welcome p{
        font-size: var(--fs-Login-25);
        font-weight:400;
       
    }
    

    .Comp-Title h3{
        max-width: 15ch;
        font-size: var(--fs-Login-50);
        font-weight: bolder;
        padding-block: 0.7rem;
    }
    .System-Intro .Comp-Title h1{
        font-size: var(--fs-Login-350);
        font-weight: bolder;
    }
    
    .System-Intro .System-Cont p{
        font-size: var(--fs-Login-25);
        font-weight:400;
    }
    
    

    
    
}