body{
    height: auto;
    width: auto;
    margin: 0px;
    font-family: 'Poppins', sans-serif;

}

.sectionLogin{
    display: flex;
    justify-content: center;
}
.sectionRegister{
    display: flex;
}
.sectionNav{
    display: flex;
}

.imgWelcome{
    width: 670px;
}

.header{
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 30px;
    background-color: white;
}

form{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wallPageContainer{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.imgLogo{
    height: 110px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.imgLogoWall{
    display: flex;
    width: 180px;
    margin: 10px;
    padding-right: 5px;
}

.imgUser{
    width: 70px;
}

.viewLogin{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 38px 20px 20px 20px;
    padding: 20px;
}
.viewRegister{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 38px 20px 20px 20px;
    padding: 20px;
}

.viewWall{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    background: rgb(246,246,246);
    background: linear-gradient(180deg, rgba(246,246,246,1) 6%, rgba(255,255,255,1) 64%);
}

.contRegist{
    display: flex;
}

.sectionUser{
    display: flex;
    align-items: center;
    margin: 24px 20px 24px 5px;
}
.sectionWallUser{
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
}
.sectionPost{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.cardPost{
    width: 307px;
    height: 148px;
    margin: 10px;
    display: flex;
    padding: 16px 8px 8px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    border-radius: 15px;
    border: 1.2px solid #DFBBAB;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background: white;
    box-shadow: 0 2px 5px rgba(70, 70, 70, 0.12), 0 2px 4px rgba(112, 112, 112, 0.24);
}
.sectionBtn{
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 3fr;
    justify-content: center;
    align-items: center;
    justify-items: end;
}

.conteinerPost{
    margin: 0px;
}
.btnEdit{
    display: flex;
    color: #BDB7AF;
    margin: 5px;
    font-size: medium;
    border-radius: 10px;
    align-items: center;
    background-color: white;
    border: white;
    padding-right: 10px;
    text-decoration: underline; 
}
.btnEdit:before{
    content: '';
    width: 20px;
    height: 20px;
    display: flex;
    margin-right: 2px;
    background-image: url('../image/iconEdit.png');
    background-repeat: no-repeat;
    box-sizing: border-box;
    background-color: white;
    background-size: 20px 20px;
    background-position: center center;
}

.btnErase{
    display: flex;
    color: #BDB7AF;
    margin: 5px;
    font-size: medium;
    border-radius: 10px;
    align-items: center;
    background-color: white;
    border: white;
    padding-right: 10px;
    text-decoration: underline; 
}

.btnErase:before{
    content: '';
    width: 20px;
    height: 20px;
    display: flex;
    margin-right: 2px;
    background-image: url('../image/iconErase.png');
    background-repeat: no-repeat;
    box-sizing: border-box;
    background-color: white;
    background-size: 20px 20px;
    background-position: center center;
    
}
.input{
    width: 250px;
    height: 37px;
    margin: 10px;
    padding: 5px;
    color: black;
    font-size:large;
    text-align: center;
    border-radius: 10px;
    border: 1.3px solid rgb(167, 167, 167);
}
.input:focus {
    border-color: #F9965E;
    outline: 0;
}

.input::placeholder {
    color:rgb(197, 196, 196);
  }

.inputPost{
    width: 307px;
    height: 105px;
    margin: 5px;
    padding: 10px 10px 10px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    border-radius: 15px;
    border: 1.5px solid #DFBBAB;
}

.userPosted{
    width: 280px;
    height: 100px;
    margin: 30px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    border-radius: 10px;
    border: 1.5px solid #DFBBAB;
}

.inputPost::placeholder {
    color:rgb(197, 196, 196);
    font-size: 15px;
  }

.inputPost:focus {
    border-color: #F9965E;
    outline: 0;
}

.inputPosted::placeholder {
    color:rgb(197, 196, 196);
    font-size: 15px;
  }

.inputPosted:focus {
    border-color: #F9965E;
    outline: 0;
}


.btn {
    width: 200px;
    height: 45px;
    color: white;
    margin: 5px;
    font-size:large;
    border-radius: 10px;
    align-items: center;
    background-color: #DFBBAB;
    border: white;
    padding-right: 10px;
}

.btn.registration {
    margin-top: 60px;
}

.btn.login {
    margin-top: 60px;
}

.btn:hover {
    background-color: #F9965E;
}

.btnBack{
    margin-top: 20px;
    color: rgb(127, 127, 127);
    border: white;
    background-color: white;
    font-size: medium;
    text-decoration: underline;

}

.btnGoogle{
    height: 45px;
    font-family: 'Roboto';
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 23px;
    padding: 0px 10px 0px 3px;
    font-size: medium;
    color: rgb(93, 93, 93);
    border-radius: 5px;
    border-color: white;
    border-style: solid;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

.btnGoogle:before{
    content: '';
    width: 35px;
    height: 35px;
    display: flex;
    margin-right: 10px;
    background-image: url('../image/imgLogoGoogle.png');
    background-repeat: no-repeat;
    box-sizing: border-box;
    background-color: white;
    background-size: 20px 20px;
    background-position: center center;
    
}

.btnGoogle:hover {
    background-color: #4285F4;
    color: #ffffff;
}

.btnRegister{
    color: #DFBBAB;
    border: white;
    background-color: white;
    font-size:large;
}

.btnNav{
    width: 100px;
    color: #db9e84;
    border: white;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    border-radius: 5px;
    background-color: white;
    font-size: medium;
}

.btnNav:hover {
    color: white;
    background-color: #F9965E;
}

.btnPost{
    width: 150px;
    height: 45px;
    color: white;
    margin: 5px;
    font-size:large;
    border-radius: 10px;
    align-items: center;
    background-color: #DFBBAB;
    border: white;
    padding-right: 10px;
}

.btnLike{
    width: 93px;
    height: 32px;
    color: white;
    margin: 5px;
    font-size: medium;
    border-radius: 10px;
    align-items: center;
    background-color: #BDB7AF;
    border: white;
    padding-right: 10px;
}

 
 p{
    margin: 0px;
    text-align: left;
    color: rgb(83, 83, 83);
 }
 
 h2{
    margin: 0px;
    font-size: 19px;
    font-weight: bold;
    padding-right: 50px;
    color: rgb(59, 59, 59);
 }
 
 h3{
    margin: 0px;
    font-size: 15px;
    padding-right: 50px;
    color: rgb(59, 59, 59);
 }
 h4{
    margin: 0px;
    font-size: 17px;
    font-weight: bolder;
    padding-right: 50px;
    color: rgb(59, 59, 59);
 }


 @media (max-width: 760px) {
    body {
        flex-direction: column;
    }
    .sectionLogin{
        flex-direction: column;
        align-items: center;
    }
    .sectionRegister{
        flex-direction: column;
        align-items: center;
    }
    .header{
        flex-direction: column;
    }
    .imgWelcome{
        width: 220px;
        margin-top: 20px;
    }
    .imgLogo {
        margin-top: 10px;
        margin-bottom: 30px;
    }
    .viewLogin{
        margin: 0;
        padding: 0;
    }
    .viewRegister{
        margin: 0;
        padding: 0;
    }
    .btn.login {
        margin-top: 45px;
    }
    .btn.registration {
        margin-top: 20px;
    }
    .wallPageContainer{
        display: flex;
        flex-direction: column;
    }
    .sectionPost {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}