:root {
    --theme-color-a: #003D73;
    --theme-color-b: #0878A4;
    --theme-color-c: #1ECFD6;
    --theme-color-d: #EDD170;
    --theme-color-e: #C05640;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
}
body{
    background: var(--theme-color-d);
}
h2{
    font-family: 'Hind Siliguri', sans-serif;
}
.toLogin,
.toSignup {
    text-decoration: underline;
    font-size: 0.9em;
}

/*responsive escritorio*/
@media only screen and (min-device-width: 1200px) and (max-device-width: 2000px) and (-webkit-min-device-pixel-ratio: 1) {
    .landingContainer{
        background-image: url(/assets/signupimg.3085c64b.png);
        background-position: 20% 4cm;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100vh;
        /*para ocupar el alto completo del viewport*/
    }
    .logo,
    .logoLogin{
        height: 20em;
        width: 20em;
    }
    section.containerSignup{
        background: white;
        margin: 50px;
        margin-right: 100px;
        width: 30em;
        height: 42em;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 15em 2.5em 2.5em 8em 2.5em 2.5em 2.5em 2.5em;
        row-gap: .5em;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        padding-top: 2.5em;
        box-shadow: 10px 5px 5px #003D73;
    }
    .formRegister,
    .frmLogin{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: .5em;
        margin: 1em;
    }
    .info,
    .infoLogin{
        width: 25em;
        padding: 1.2em;
        height: 2.5rem;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
    }
    .linkGmail{
        width: 2em;
        height: 2em;
        margin: 10px;
        filter: saturate(150%);
    }
    .btnSignup,
    .signupWithGmail,
    .btnLogin{
        padding: 6px;
        width: 25em;
        height: 2.5rem;
        background-color: var(--theme-color-b);
        color: white;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
    }
    .signupWithGmail{
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 18px;
        width: 65%;
    }
    .btn:hover,
    .btnLogin:hover{
        box-shadow: 0 0 10px var(--theme-color-b) inset, 0 0 10px 4px var(--theme-color-b);
    }

    /*vista login */
    .sectionLogin{
        background: white;
        margin: 50px;
        margin-right: 100px;
        width: 30em;
        height: 42em;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 10em 2.5em 8em 2.5em;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        row-gap: 2em;
        box-shadow: 10px 5px 5px #003D73;
    }

    /* vista muro */
    .header{
        background-color: var(--theme-color-d);
        width: 100%;
        height: 8rem;
    }
    .logoWall{
        width: 200px;
        height: 200px;
        position:absolute;
        top: -35px;
        left: 8px;
    }
    .profileMenu{
        width: 40px;
    }
    .menu{
        width: 45px;
        display: flex;
        gap: 3em;
        position: absolute;
        top: 3em;
        right: 13em;
    }
    .sectionWall{
        background: white;
        width: 100%;
        height: auto;
        gap: 5em;
        padding-top: 100px;
        display: grid;
        justify-items: center;
    }
    .profilePic{
        width: 70px;
        height: 70px;
    }
    .createPost{
        width: 50em;
        height: 5em;
        background: white;
        padding: 20px 35px;
        border-radius: 4px;
        gap: 10px;
        align-items: center;
        justify-items: center;
        background-color: gainsboro;
    }
    .formPost{
        display: grid;
        gap: 2em;
        padding-bottom: 2em;
        justify-items: center;
    }
    .createPostContainer{
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    .postBtn, 
    .confirmButton,
    .cancelButton,
    .editButton, 
    .btnError {
        padding: 3px;
        width: 10em;
        height: 2.5rem;
        background-color: var(--theme-color-b);
        color: white;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
        justify-self: center;
    }
    .timeLineSection{
        display: grid;
        place-items: center;
        margin-left: 25em;
        margin-right: 1em;
        place-content: center;
        border-left: 2px  solid var(--theme-color-a);
        border-top: 2px  solid var(--theme-color-a);
        border-right: 5px solid var(--theme-color-a);
        border-bottom: 5px solid var(--theme-color-a);
        border-radius: 15px;
        grid-template-rows:auto;
    }
    .postContainer{
        display:grid;
        margin: 10px;
        border: 1px solid var(--theme-color-a);
        border-radius: .3em;
        height: auto;
        width: 94vw;
    }
    .userNamePic{
        background-color: var(--theme-color-b);
        display: flex;
        flex-direction: row;
        gap: 12px;
        padding-left: 10px;
        align-items: center;
        justify-content:space-between;
    }
    .nickName{
        color: white;
    }
    .likeBtn{
        display: flex;
        background-color: var(--theme-color-b);
        color: white;
        border-style: none;
        position:relative;
        margin-right: 10px;
    }
    .editAndDelete{
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }
    .content{
        display: flex;
        text-align: justify;
        padding-top: 5px;
        padding-left: 10px;
        padding-bottom: 25px;
    }
    .confirmation-modal,
    .editModal{
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        justify-items: center;
    }
    .modal,
    .modalUpdate{
        border: 1px solid var(--theme-color-a);
        background: white;
        padding: 20px 35px;
        width: 388px;
        height: 210px;
        border-radius: 8px;
        gap: 10px;
        align-items: center;
        justify-items: center;
    }
    .editForm{
        display: grid;
        gap: 1em;
    }
    .editTextArea{
        width: 276px;
        height: 80px;
    }
    /*vista error*/
    .errorSection{
        display: grid;
        padding-top: 19%;
        gap: 5px;
    }
}

/*responsive tablet horizontal*/
@media (min-width: 481px) and (max-width: 1200px) and (orientation: landscape) {
    body{
        background-image: url(/assets/signupimg.3085c64b.png);
        background-position: left 10% bottom 45%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100vh;
    }
    .logo,
    .logoLogin{
        height: 20em;
        width: 20em;
    }
    section.containerSignup{
        background: white;
        margin: 2em 1em;
        width: 25em;
        height: 45em;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 15em 2.5em 2.5em 8em 2.5em 2.5em 2.5em 2.5em;
        row-gap: .5em;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        position: absolute;
        right: 1em;
        bottom: 0;
        top: 0;
        padding: 0.2em;
        box-shadow: 10px 5px 5px #003D73;
    }
    .formRegister,
    .frmLogin{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: .5em;
        margin: 1em;
    }
    .info,
    .infoLogin{
        width: 25em;
        padding: 1.2em;
        height: 2.5rem;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
    }
    .linkGmail{
        width: 2em;
        height: 2em;
        margin: 10px;
        filter: saturate(150%);
    }
    .btnSignup,
    .signupWithGmail,
    .btnLogin{
        padding: 6px;
        width: 25em;
        height: 2.5rem;
        background-color: var(--theme-color-b);
        color: white;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
    }
    .signupWithGmail{
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 18px;
        width: 65%;
    }

    /* vista login*/
    .sectionLogin{
        background: white;
        margin: 2em 1em;
        width: 25em;
        height: 45em;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 10em 2.5em 8em 2.5em;
        row-gap: 2em;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        position: absolute;
        right: 1em;
        bottom: 0;
        top: 0;
        padding: 0.2em;
        box-shadow: 10px 5px 5px #003D73;
    }

     /* vista muro */
    .mainContainer{
        background: white;
        width: auto;
        height: auto;
    }
    .header{
        background-color: #EDD170;
        display: flex;
        height: 100px;
    }
    .logoWall{
        width: 200px;
        position:absolute;
        top: -15px;
        left: 8px;
    }
    .profileMenu{
        width: 40px;
    }
    .menu{
        width: 45px;
        display: flex;
        gap: 3em;
        position: absolute;
        top: 3em;
        right: 13em;
    }
    .sectionWall{
        width: 100%;
        gap: 5em;
        padding-top: 70px;
        display: grid;
        justify-items: center;
        background-color: white;
        padding: 130px;
    }
    .profilePic{
        width: 70px;
        height: 70px;
    }
    .createPost{
        width: 50em;
        height: 5em;
        background: white;
        padding: 20px 35px;
        border-radius: 4px;
        gap: 10px;
        align-items: center;
        justify-items: center;
        background-color: gainsboro;
    }
    .formPost{
        display: grid;
        gap: 2em;
        padding-bottom: 2em;
    }
    .postBtn, 
    .confirmButton,
    .cancelButton,
    .editButton,
    .btnError{
        padding: 3px;
        width: 10em;
        height: 2.5rem;
        background-color: var(--theme-color-b);
        color: white;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
        justify-self: center;
    }
    .timeLineSection{
        display: grid;
        place-items: center;
        margin-left: 20em;
        place-content: center;
        border-left: 2px  solid var(--theme-color-a);
        border-top: 2px  solid var(--theme-color-a);
        border-right: 5px solid var(--theme-color-a);
        border-bottom: 5px solid var(--theme-color-a);
        border-radius: 15px;
        grid-template-rows:auto;
    }
    .postContainer{
        display:grid;
        margin: 10px;
        border: 1px solid var(--theme-color-a);
        border-radius: .3em;
        height:auto;
        width: 94vw;
    }
    .userNamePic{
        background-color: var(--theme-color-b);
        display: flex;
        flex-direction: row;
        gap: 12px;
        padding-left: 10px;
        align-items: center;
        justify-content:space-between;
    }
    .nickNames{
        color: white;
    }
    .likeBtn{
        display: flex;
        background-color: var(--theme-color-b);
        color: white;
        border-style: none;
        position:relative;
        margin-right: 10px;
    }
    .editAndDelete{
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }
    .content{
        display: flex;
        text-align: justify;
        padding-top: 5px;
        padding-left: 10px;
        padding-bottom: 25px;
    }
    .confirmation-modal,
    .editModal{
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        justify-items: center;
    }
    .modal,
    .modalUpdate{
        border: 1px solid var(--theme-color-a);
        background: white;
        padding: 20px 35px;
        width: 300px;
        height: 180px;
        border-radius: 8px;
        gap: 10px;
        align-items: center;
        justify-items: center;
    }
    .editForm{
        display: grid;
        gap: 1em;
    }
    .editTextArea{
        width: 276px;
        height: 80px;
    }
    .createPostContainer{
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 10px;
    }
     /*vista error*/
     .errorSection{
        display: grid;
        gap: 5px;
        padding-right: 350px;
    }
}

/*responsive tablet vertical*/
@media (min-width: 600px) and (max-width: 1200px) and (orientation: portrait) {

    .logo,
    .logoLogin {
        height: 30em;
        width: 30em;
    }
    section.containerSignup{
        margin: 6.5vw;
        background: white;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 15em 4em 7em 12em 4em 1em 4em 3em;
        row-gap: 1em;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        padding-top: 5em;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .formRegister,
    .frmLogin{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 1em;
        margin: 1em;
    }
    .info,
    .infoLogin{
        width: 22em;
        padding: 1.2em;
        height: 3rem;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
        font-size: x-large;
    }
    .linkGmail{
        width: 2em;
        height: 2em;
        margin: 10px;
        filter: saturate(150%);
    }
    .btnSignup,
    .signupWithGmail,
    .btnLogin{
        padding: 6px;
        width: 22em;
        height: 3.5rem;
        background-color: var(--theme-color-b);
        color: white;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
        font-size: x-large;
    }
    .signupWithGmail{
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 18px;
        width: 65%;
    }
    .toLogin,
    .or{
        font-size: x-large;
    }
    .title{
        font-size: 2.5em;
    }

    /* vista login */
    .sectionLogin{
        margin: 6.5vw;
        background: white;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 20em 4em 12em 4em;
        row-gap: 1em;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* vista muro */
    .header{
        background-color: var(--theme-color-d);
        width: 100%;
        height: auto;
        margin-top: 0;
    }
    .logoWall{
        width: 25%;
        margin-left: -70%;
        
    }
    .profileMenu{
        width: 60px;
        height: 60px;
    }
    .menu{
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
        gap: 10em;
        width: 100%;
        padding-bottom: 10px;
        padding-top: 10px;
        background: white;
        height: 5em;
    }
    .sectionWall{
        justify-content: center;
        gap: 3em;
        padding-top: 1em;
        margin-left: 16em;
        align-content: center;
        background: white;
        display: grid;
    }
    .mainContainer{
        background: white;
        width: auto;
        height: auto;
    }
    .createPostContainer{
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    .profilePic{
        width: 5em;
        height: 5em;
        margin-top: 0;
        margin-left: -18em;
        margin-bottom: -1em;
    }
    .createPost{
        width: 40em;
        height: 6em;
        background: white;
        padding: 20px 35px;
        border-radius: 4px;
        gap: 10px;
        align-items: center;
        justify-items: center;
        background-color: gainsboro;
    }
    .formPost{
        display: grid;
        gap: 2em;
        padding-bottom: 2em;
    }
    .postBtn, 
    .confirmButton,
    .cancelButton,
    .editButton,
    .btnError{
        padding: 3px;
        width: 10em;
        height: 2.5rem;
        background-color: var(--theme-color-b);
        color: white;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
        justify-self: center;
    }
    .timeLineSection{
        justify-self: center;
        display: grid;
        place-items: center;
        margin-left: 1em;
        margin-right: 1em;
        place-content: center;
        border-left: 2px  solid var(--theme-color-a);
        border-top: 2px  solid var(--theme-color-a);
        border-right: 5px solid var(--theme-color-a);
        border-bottom: 5px solid var(--theme-color-a);
        border-radius: 15px;
        grid-template-rows:auto;
    }
    .postContainer{
        display: grid;
        margin: 10px;
        border: 1px solid var(--theme-color-a);
        border-radius: .3em;
        height: auto;
        width: 94vw;
    }
    .userNamePic{
        background-color: var(--theme-color-b);
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        gap: 12px;
        padding-left: 10px;
        align-items: center;
    }
    .nickName{
        color: white;
    }
    .likeBtn{
        display: flex;
        background-color: var(--theme-color-b);
        color: white;
        border-style: none;
        position:relative;
        margin-right: 10px;
    }
    .editAndDelete{
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }
    .content{
        display: flex;
        text-align: justify;
        padding-top: 5px;
        padding-left: 10px;
    }
    .confirmation-modal,
    .editModal{
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        justify-items: center;
    }
    .modal,
    .modalUpdate{
        border: 1px solid var(--theme-color-a);
        background: white;
        padding: 20px 35px;
        width: auto;
        height: auto;
        border-radius: 8px;
        gap: 10px;
        align-items: center;
        justify-items: center;
    }
    .editForm{
        display: grid;
        gap: 1em;
    }
    .editTextArea{
        width: 276px;
        height: 80px;
    }
    .errorSection{
        display: grid;
        gap: 5px;
        justify-items: center;
        padding-top: 50%;
    }
}

/*responsive móvil*/
@media only screen and (min-width:320px) and (max-width:600px) {

    section.containerSignup{
        margin: 6vh;
        background: white;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 10em 2em 2em 9em 2em 2em 2em 2em;
        row-gap: .5em;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        padding-top: 2em;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .logo,
    .logoLogin{
        height: 13em;
        width: 13em;
    }
    .formRegister,
    .frmLogin{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 1em;
        width: 100%;
        margin: 1em;
    }
    .info,
    .infoLogin{
        padding: 1em;
        width: 90%;
        height: 2rem;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
    }
    .btnSignup,
    .signupWithGmail,
    .btnLogin,
    .editButton,
    .cancelButton,
    .confirmButton,
    .btnError{
        padding: 6px;
        width: 90%;
        height: 2rem;
        background-color: var(--theme-color-b);
        color: white;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
    }
    .linkGmail{
        width: 2em;
        height: 2em;
        margin: 10px;
        filter: saturate(150%);
    }
    .signupWithGmail{
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 18px;
    }

    /* vista login */
    .sectionLogin{
        margin: 6vh;
        background: white;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 8em 2em 9em 2em;
        row-gap: 0.2em;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        padding-top: 0.5em;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /*Vista Muro*/
    .logoWall{
        width: 30%;
        margin-left: -18em;
    }
    .header{
        background-color: var(--theme-color-d);
        width: 100%;
        height: 6rem;
        margin-top: 0;
    }
    .profilePic{
        width: 3em;
        height: 3em;
        margin-top: 1em;
        margin-left: -18em;
        margin-bottom: -1em;
    }
    .createPost{
        width: 22em;
        height: 5em;
        background: white;
        padding: 20px 35px;
        border-radius: 4px;
        gap: 10px;
        align-items: center;
        justify-items: center;
        background-color: gainsboro;
    }
    .formPost{
        display: grid;
        gap: 1em;
        padding-bottom: 2em;
    }
    .menu{
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
        gap: 5em;
        width: 100%;
        padding-bottom: 10px;
        padding-top: 10px;
        background: white;
    }
    .profileMenu{
        width: 40px;
    }
    .mainContainer{
        background-color: white;
        height: 5%;
        width: 100%;
    }
    .postContainer{
        margin: 10px;
        border: 1px solid var(--theme-color-a);
        border-radius: .3em;
        height: auto;
    }
    .confirmation-modal,
    .editModal{
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        justify-items: center;
    }
    .modal,
    .modalUpdate{
        border: 1px solid var(--theme-color-a);
        background: white;
        padding: 20px 35px;
        width: auto;
        height: auto;
        border-radius: 8px;
        gap: 10px;
        align-items: center;
        justify-items: center;
    }
    .userNamePic{
        background-color: var(--theme-color-b);
        display: flex;
        flex-direction: row;
        gap: 12px;
        padding-left: 10px; 
        align-items: center;
        justify-content:space-between;
    }
    .nickName{
        color: white;
    }
    .editAndDelete{
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }
    .content{
        display: flex;
        text-align: justify;
        padding-top: 5px;
        padding-left: 10px;
    }
    .editTextArea{
        width: 276px;
        height: 80px;
    }
    .postBtn{
        padding: 3px;
        width: 8em;
        height: 2rem;
        background-color: var(--theme-color-b);
        color: white;
        border: 1px solid var(--theme-color-a);
        border-radius: 4px;
        justify-self: center;
    }
    .sectionWall{
        display: flex;
        justify-content: center;
        gap: 1em;
        padding-top: 2em;
        margin-left: 18em;
        align-content: center;
    }
    .likeBtn{
        display: flex;
        background-color: var(--theme-color-b);
        color: white;
        border-style: none;
        position:relative;
        margin-right: 10px;
    }
    .createPostContainer{
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    .errorSection{
        display: grid;
        gap: 5px;
        justify-items: center;
        padding-top: 90%;
    }
}