:root {
    --theme-color: rgb(255, 255, 255);
    --primary-color: #8DADFA;
    --secundary-color: #CAF5E8;
    --color-text: #0a3748;
    --color-box: #f6f6f6;
    --shadow-nav: #37C2EA;
    --color-error:rgb(228, 65, 214);
    --color-is-Valid: #37c2ea ;
    --color--a: #7ACAE0;
    --color--b: #B25DFF;
}

body{
margin:0 0 0 0;
padding:0 0 0 0;
font-size: large;
font-family: 'Montserrat', sans-serif;
text-decoration-color: var(--theme-color);
background-image: linear-gradient(to bottom, var(--primary-color) 20%, var(--secundary-color) 100%);
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

.loginSectionMain{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    column-gap: 5rem;
}

.logo{
    grid-column-start: 1;
    grid-column-end: 2;
    /* grid-row: 1; */
    grid-row: 2;
    padding:1rem;
    width: 25rem;
    margin-bottom: 100px;  

}

.logoWords{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 2;
    width: 300px;
    margin-top: 450px;
    
}

.description{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
    color: var(--color-box);
    text-align: center;
    
}

.loginSection{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 2/3;
    display: grid;
    grid-template-rows: repeat(6,0.2fr);
    grid-template-columns: 0.5fr 6fr 0.5fr;
    gap: 1.5rem;
    background-color: var(--color-box);
    border-radius: 10px;
    margin:5%;
    padding:5%;
    width: 40vw;
    min-height: 40vh; 
}

.titleLogin{
    
    text-align: center;
    grid-column: 1/4;
    color: var(--color-text);

}
input{
    grid-column: span 3;
    background-color: var(--theme-color);
    border: none;
    height: 45px;
    padding: 0 40px 0 10px;
    transition: .3s ease all;
    box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}
input:focus{
    border: 3px solid var(--color-is-Valid);
    outline: none;
    box-shadow: 3px 0px 30px rgba(163, 163, 163, 0.4);
}
button{
    width: 80%;
    height: 45px;
    grid-column: span 3;
    border-radius: 8px;
    cursor: pointer;
    transition: .1s ease all;
    border: none;
    justify-self: center;
    box-shadow: 0px 4px 4px rgba(163, 163, 163, 0.4);
   
}
.buttonSignInGoogle{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: left;
}
.iconGoogle{
    margin-left: 25px;
    inline-size: 25px;
    margin-right: 60px;
    
}

.paragraph{
    grid-row: 6;
    grid-column: 2/3;
    font-size: 1rem;
    text-align: center;
}

.createAccount,
.startSession {
    background: var(--primary-color);
    color: var(--color-text);
    font-weight: bold;
   
}
.createAccount:hover,
.startSession:hover,
.buttonSignInGoogle:hover{
    box-shadow: 3px 0px 30px var(--shadow-nav);
}

/*------ mediaqueries--------*/
@media screen and (max-width: 821px) {
    .loginSectionMain{
        grid-template-columns: auto;
    }
    .description{
        grid-column: 1;
    }   
    .loginSection{
        grid-column: 1;
        grid-row: 3;
        width: 80vw;
    }   
    .logo {
        grid-column: 1;
        width: 150px;
        margin-bottom: 20px; 
    }   
    .logoWords{
        grid-column: 1;
        grid-row: 2;
        width: 150px;
        margin-top: 150px;
        
    }
    .buttonSignInGoogle{
        justify-content: center;
    }
    .iconGoogle{
        margin-right: 20px;
    }      
}
:root {
    --theme-color: white;
    --primary-color: #8DADFA;
    --secundary-color: #CAF5E8;
    --color-text: #0a3748;
    --color-box: #F6F6F6;
    --shadow-nav: #37C2EA;
    --color-error: rgb(228, 65, 214);
    /* --color-is-Valid: rgb(102, 162, 102); */
    --color-is-Valid: #37c2ea ;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-image: linear-gradient(to bottom, var(--primary-color) 20%, var(--secundary-color) 100%);
    max-width: 900px;
    max-height: 900px;
    width: 90%;
    margin: 1rem auto;
   
}

.divLogoRegistro{
    place-items: center;
}

.imagenGuideMaPa{
    width: 20rem;
}


.registerSection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background-color: var(--color-box);
    border-radius: 9px;
    padding: 40px;
}
.elementRegister-title{
    grid-column: span 2;
    justify-self: center;
    align-self: center;
    color: var(--color-text);
}

.formulario__label {
    display: block;
    font-weight: 700;
    padding: 10px;
    cursor: pointer;
    color: var(--color-text);
}

.formulario__grupo-input {
    position: relative;
}

.formulario__input {
    width: 100%;
    background-color: var(--theme-color);
    height: 45px;
    line-height: 45px;
    padding: 0 40px 0 10px;
    transition: .3s ease all;

}

.formulario__input:focus {
    border: 3px solid var(--color-is-Valid);
    outline: none;
    box-shadow: 3px 0px 30px rgba(163, 163, 163, 0.4);
}

.formulario__input-error {
    font-size: 12px;
    margin-bottom: 0;
    display: none;
}
.formulario__input-error-activo {
    display: block;
}
.formulario__validacion-estado {
    position: absolute;
    right: 10px;
    bottom: 15px;
    z-index: 100;
    font-size: 16px;
    opacity: 0;
}

/*----------------estilos para validación-------------*/
.formulario__grupo-correcto .formulario__validacion-estado {
    color: var(--color-is-Valid);
    opacity: 1;
}
.formulario__grupo-incorrecto .formulario__label {
    color: var(--color-error);
}
.formulario__grupo-incorrecto .formulario__validacion-estado {
    color: var(--color-error);
    opacity: 1;
}

.inputRegister{
    color: var(--color-text);
    grid-column:1/2;
}

.formulario__grupo-incorrecto .formulario__input {
    border: 3px solid var(--color-error);
    animation: justshake 0.3s forwards;
    color:var(--color-error);
}

@keyframes justshake {
    25% {
        transform: translateX(5px);

    }

    50% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX-(5px);
    }
}
.form-message,
 .formulario__grupo-btn-enviar{
    grid-column: span 2;
 }

.form-message{
    height: 30px;
    background: var(--color-error);
    padding: 5px;
    border-radius: 3px;
    display: none;
}
.form-message-activo{
    display: block;
}
.form-message p {
 margin: 0;
}
.formulario__grupo-btn-enviar{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.formulario__btn{
    width: 30%;
    background: var(--primary-color);
    color: var(--color-text);
    font-weight: bold;
}

.buttonHome{
    grid-row: 1;
    grid-column: span 2;
    justify-self: end;
    width: fit-content;
}
.buttonHome:hover{
    box-shadow: 3px 0px 30px var(--shadow-nav);
}


.formulario__btn:hover{
    box-shadow: 3px 0px 30px var(--shadow-nav);
}
.formulario__mensaje-exito{
    color: var(--color-is-Valid) ;
    display: none;
}
.formulario__mensaje-exito-activo{
    display: block;
}

/*------ mediaqueries--------*/
@media screen and (max-width: 800px) {

    .registerSection {
        grid-template-columns: auto;
        justify-items: center;
        width: 100%;
    }
    .form-message,
    .formulario__grupo-btn-enviar{
       grid-column: 1;
       width: 80%;
    }
    .elementRegister-title {
        grid-column: span 1;
        text-align: center;
    }
    .formulario__btn{
        width: 100%;
    }

    .buttonHome{
        grid-column: span 1;
    }
    
 
}.timelineSection {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    height: 100%; 
}

.header {
    display: grid;
    grid-area: 1/1/2/7;
    grid-template-columns: subgrid;
    grid-gap: 1rem;
    align-items: center;
    justify-items: center;
}

.titletimeline{
    grid-area: 1/1/2/3;
    justify-self: center;
}

.sidebar {
    grid-area: 1/6/2/7;
    justify-self: center;
}

.buttonLogOut {
    width: 2rem;
    filter: invert(100%) sepia(48%) saturate(12%) hue-rotate(249deg) brightness(114%) contrast(93%);
}

.buttonLogOut:hover{
    box-shadow: 3px 0px 30px var(--shadow-nav);
}

.main {
    display: grid;
    grid-area: 2/1/8/8;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: auto auto;
    width: 100%;
    grid-gap: 0.3rem;
    background-color: #F5F5F5;
    border-radius: 9px;
    padding: 2rem;
    margin: 0.5rem;
    margin-right: 1rem;
}

.sectionInput {
    display:grid;
    grid-area: 1/1/2/6;
    grid-template-columns: subgrid;
    justify-items:stretch;
    align-items: center;
}
.porfileImage{
    grid-row: 1;
    grid-column: 1/3;
    justify-self: center;
    width: 3rem;
}

.welcomeText{
    grid-row: 1;
    grid-column: 3;
    font-size:larger;
    align-self: center;
    justify-self: start;
    font-weight: bold;
}
.inputNewPost{
    grid-row: 1;
    grid-column: 4/6;
}

.buttonCreatePost {
    grid-row: 1;
    grid-column: 6;
    width: 100%;
    background: var(--primary-color);
    color: var(--color-text);
    font-weight: bold;
}

.buttonCreatePost:hover{
    box-shadow: 3px 0px 30px var(--shadow-nav);
}

.sectionPost {
    display: grid;
    grid-area: 2/1/6/6;
    align-items: center;
    justify-items: center;

}
.post{
    display: grid;
    grid-template-columns: 8vw 1fr 4vw 4vw;
    grid-template-rows: auto auto ;
    width: 100%;
    grid-gap: 0.3rem;
    background-color: #FFFDFD;
    border-radius: 9px;
    padding: 0.3rem;
    margin: 0.5rem;
    box-shadow: 0px 4px 4px rgba(163, 163, 163, 0.4);
    align-items: center;
    justify-items: center;

}
.postImgPorfile{
    grid-column: 1;
    grid-row: 1;
    width: 1.5rem;
    filter: invert(68%) sepia(6%) saturate(3579%) hue-rotate(188deg) brightness(100%) contrast(97%);
}
.postUserName{
    grid-column: 2/3;
    grid-row: 1;
    font-weight: bold;
    justify-self: start;
}
.postText{
    grid-column: 2/3;
    grid-row: 2/3;
    align-self: stretch;
    justify-self: stretch;
}
.buttonEdit{
    grid-column: 3/4;
    grid-row: 1;
    width: 1.5rem;
    filter: invert(68%) sepia(6%) saturate(3579%) hue-rotate(188deg) brightness(100%) contrast(97%);
}
.buttonDelete{
    grid-column: 4/5;
    grid-row: 1;
    width: 1.3rem;
    filter: invert(68%) sepia(6%) saturate(3579%) hue-rotate(188deg) brightness(100%) contrast(97%);
}

.modal{
    background-color: #FFFDFD;
    border-radius: 9px;
    padding: 0.3rem;
    margin: 0.5rem;
    justify-items:stretch;
    align-items: center;
}

.tituloModal{
    grid-area: 1/1/2/5;
    grid-template-columns: subgrid;
    grid-gap: 1rem;
    align-items: center;
    justify-items: center;
}


.buttonCancelPost {
    grid-area: 5/4/5/5;
    align-items: center;
    width: 100%;
    background: var(--primary-color);
    color: var(--color-text);
    font-weight: bold;
}
.buttonCancelPost:hover{
    box-shadow: 3px 0px 30px var(--shadow-nav);
}

.buttonUpdate {
    grid-area: 5/2/5/3;
    align-items: center;
    width: 100%;
    background: var(--primary-color);
    color: var(--color-text);
    font-weight: bold;
}

.buttonUpdate:hover{
    box-shadow: 3px 0px 30px var(--shadow-nav);
}


/*------ mediaqueries--------*/
@media screen and (max-width: 800px){
    .timelineSection {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .header {
        grid-area: 1/1;
    }

    .titletimeline{
        grid-area: 1/2;
        justify-self: center;
    }

    .sectionPost {
        display: grid;
        grid-area: 3/1/6/6;
    }

    .inputNewPost{
        grid-row: 2;
        grid-column: 3/5;
    }  
    
    .buttonCreatePost {
        grid-row: 2;
    }
}