:root {
    --colorOrange: #FF9F00;
    --colorTurquois: #03A7BB;
    --colorDarkGrey: #C4C4C4;
    --colorLightGrey: #efefef;
    --colorBlueLight: #A9D2F0;
    --colorOlive: #C5D2B0;
    --colorWhite: #FFF;
    --colorBlack: #000000;
    --colorGreen: #6ED788;
    --colorForm: #546E85;
    /*---------- colors-----------------*/
    --fFamilyOleo: 'Oleo Script', cursive;
    /*-------------tipos de letras-------------*/
}

html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background-color: var(--colorTurquois);
}

img {
    max-width: 100%;
}

.home {
    margin-top: 1rem;
}

.logo {
    padding: 2.2rem 2.2rem 0;
    margin: 0;
}

.welcome {
    padding: 3rem 3.6rem 0;
    text-align: center;
}

.welcome h1 {
    font-family: var(--fFamilyOleo);
    margin: 0;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--colorWhite);
    padding: 0 0.5rem;
    margin-bottom: 3rem;
}

.welcome img {
    max-width: 4.5rem;
    margin-bottom: -0.5rem;
}

.btn_click {
    background: none;
    width: 11rem;
    border-radius: 1.4rem;
    border: thick solid var(--colorOrange);
    height: 3.6rem;
    color: var(--colorWhite);
    font-weight: bold;
}
/*------------------------CSS HOME----------------------------------*/

.figureLogin{
    padding: 2rem 3rem 0;
}
.sloganLogin{
    display: none;
}
.formLogin{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.problemInput{
    background-color: var(--colorOrange);
    width: 55%;
    height: 13vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 20px;
    margin-top: 4vh;
}
.emailUser{
    width: 85%;
    height: 4vh;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    text-indent: 10%;
}
.passwordUser{
    width: 85%;
    height: 4vh;
    border-radius: 25px;
    border: none;
    cursor: pointer;  
    text-indent: 10%;  
}
::placeholder{
    text-align: center;
}
.ContainerCat{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10vh;
    align-items: center;
}
.btn_signUpCat{
    background-color: #ff9f00;
    width: 35%;
    height: 3.5vh;
    border-radius: 20px;
    border: none;
    cursor: pointer;   
}
.ContainerCat img{
    max-width: 4.5rem;
}
.containerSpan{
    text-align: center;
    margin-top: 7vh;
    position: relative;
}
.option{
    color: white;
    font-size: 0.7rem;
    font-family: system-ui;
} 
.option::before,
.option::after{
    content: "";
    display: block;
    width: 30%;
    height: 1px;
    background-color: white;
    position: absolute;
} 

.option:before{
    right: 0;
    top: 10px;
    margin-right: 15px;
}
.option::after{
    top: 10px;
    margin-left: 15px;
}
.ContainerReg{
    text-align: center;
    position: relative;
}
.btn_google{
    background: #ff9f00;
    height: 4vh;
    width: 46%;
    margin-top: 5vh;
    color: white;
    border: none;
    border-radius: 20px;
} 
.log_google img{
    position: absolute;
    width: 1.8rem;
    height: auto;
    left: 29%;
    top: 45px;
}                  
.register{
    color: white;
    font-size: 0.85rem;
    font-family: system-ui;
}
.btn_signUp{
    background: none;
    border: none;
    color: #f2a339;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: bolder;
    font-family: system-ui;
}
/*------------------------CSS LOGIN----------------------------------*/
.btnBack{
    background-color: transparent;
    border: none;
    color: var(--colorWhite);
    padding-left: 1rem;
    padding-top: 1rem;
    font-weight: 700;
}
.welcomeContainer{
    padding: 2rem 6rem 0;
    color:  var(--colorWhite);
    text-align: center;
    font-family: monospace;
    line-height: 1.5;
}
.welcomeContainer h2{
    font-size: 2.2rem;
}
.logoNewF{
    display: none;
}
.containerInputsRegister{
    background-color: var(--colorOrange);
    width: 55%;
    height: 28vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 20px;
}
.containerInputsRegister input{
    width: 85%;
    height: 4vh;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    text-indent: 10%;
}
.formRegister{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.containerCatReg{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6vh;
}
.containerCatReg img{
    max-width: 4.5rem ;
}
.forgotP{
    background-color: transparent;
    color: white;
    border: none;
    margin-top: 5vh;
    font-family: system-ui;
    font-weight: bolder;
    cursor: pointer;
}
/*------------------------CSS REGISTER----------------------------------*/

.Saludo{
    width: 100%;
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem 2rem;
}
.Saludo img{
    width: 20%;
}
.Saludo h2{
    color: white;
    font-family: system-ui;
}
.WelcomeDesktop{
    display: none;
}
.ContainerOrange{
    height: 39vh;
    width: 100vw;
    background-color: #FF9F00;
    display: flex;
    flex-direction: row-reverse;
}
.rightOrange{
    width: 35vw;
}
.imagenWall{
    display: flex;
    justify-content: flex-end;
}
.imagenWall img{
    width: 90%;
}
.imgWallDos{
    display: none;
}
.imgManchaWall {
    display: none;
}
.leftOrange{
    width: 65vw;
}
.hPost{
    width: 82%;
    margin-left: 9%;
}
.hPost h3{
    color: white;
    font-size: 10vw;
    text-align: end;
    margin-top: 7%;
    /* font-family: system-ui; */
    line-height: 5vh;
}
.h3PostWall{
    display: none;
}
.ContFormWall{
    height: 12vh;
    display: flex;
    justify-content: end;
}
.formWall{
   display: flex;
   justify-content: end;
   flex-direction: column;
   align-items: center;
}
.inp_publication{
    background-color: #efefef;
    border-radius: 17px;
    height: 9vh;
    border: none;
    outline: none;
}
.btn_send{
    background-color: var(--colorTurquois);
    border: none;
    border-radius: 5px;
    color: var(--colorWhite);
    margin-top: 6px;
}
.contPublic{
    padding: 5vh 10% 0px 10%;
    width: 100%;
}
.publicUser{
    width: 100%;
    padding-bottom: 1rem;
}
.div_publiU{
    height: 20vh;
    background-color: var(--colorDarkGrey);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    font-size: x-large;
    font-family: system-ui;
    padding: 1rem 2rem;
}
.div_publiU p{
    margin: 0;
}
.reactions{
    background-color: var(--colorWhite);
    display: grid;
    grid-template-rows: 41px;
    grid-template-columns: repeat(3, 33.3%);
    justify-items: center;
    align-items: center;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.reactionsLikes{
    display: flex;
    gap: 8px;
    justify-content: center;
}
.reactionsLikes img{
    width: 18%;
}
.signOff{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 21px 0 21px;
}
.btnSignOff{
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--colorWhite);
    font-weight: bold;
}
.signOff img{
    width: 20%;
}
input:invalid{
    outline-color: red;
}
.reactions div input{
    background-color: transparent;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

@media screen and (min-width: 500px) {
    main {
        /* height: 100vh; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    figure {
        position: relative;
    }

    .welcome {
        position: relative;
        padding: 0 14rem 0 0;
    }

    .welcome::after {
        position: absolute;
        content: "";
        background-image: url("img/Vector\ 6.png");
        background-repeat: no-repeat;
        display: block;
        width: 560px;
        height: 241px;
        top: 30vh;
        left: -14vw;
    }
    .logo::after {
        position: absolute;
        content: "";
        background-image: url("img/Vector\ 4.png");
        display: block;
        width: 349px;
        height: 372px;
        top: -29vh;
        left: -10vw;
    }

    .logo::before {
        position: absolute;
        content: "";
        background-image: url(img/Vector\ 5.png);
        background-repeat: no-repeat;
        display: block;
        width: 349px;
        height: 372px;
        top: -23vh;
        right: -50vw;
    }

    .home {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 12vh;
    }

    .home .logo_container {
        width: 50%;
    }

    .c_logo {
        text-align: end;
    }

    .c_logo img {
        width: 75%;
    }
    .sectionLogin{
        width: 63%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 10vh;
    }

     .logoNewM{
        margin: 0px;
        width: 60%;
        padding: 0px;
    }

    .figureLogin img{
        width: 91%;
        padding: 2rem 3rem 1rem 0;
        margin: 0px;
    }
    .figureLogin{
        padding: 0rem 0rem 0;
    }
    .sloganLogin{
        display: block;
        text-align: start;
        font-family: var(--fFamilyOleo);
        margin: 0;
        font-size: 3.2rem;
        line-height: 1;
        color: var(--colorWhite);
        padding: 0 0 0 2rem;
        margin-bottom: 3rem;
    }

    .containerF{
        width: 50%;
        height: 80vh;
        background: linear-gradient(179.98deg, #03a7bb 0.02%, #3fa8b14a 0.03%, rgba(0, 0, 0, 0) 94.5%), linear-gradient(180deg, rgb(76 101 115 / 40%) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 255, 255, 0.1);
         box-shadow: 0px 4px 24px -1px rgb(0 0 0 / 20%), inset 5px 5px 4px rgb(88 124 155 / 20%);
         border-radius: 25px;
    }

   .containerFormLogin{
        margin-top: 5vh;
   }

   .forgotP{
        background-color: transparent;
        color: white;
        border: none;
        margin-top: 5vh;
        font-family: system-ui;
        font-weight: bolder;
        cursor: pointer;
   }

   .problemInput{
        background-color: transparent;
        width: 76%;
   }

   .emailUser, .passwordUser{
        height: 5vh;
   }

   .containerSpan{
        margin-top: 3vh;
   }

   .ContainerReg{
        margin-top: 4vh;
   }

   .btn_google{
        height: 5vh;
        font-weight: bolder;
   }
   .welcomeContainer{
        display: none;
   }

   .logoNewF{
        display: block;
   }

   .btnBack {
        position: relative;
        top: 37vh;
   }
   .containerInputsRegister{
        background: transparent;
        width: 76%;
        margin-top: 2rem
   }

   .containerInputsRegister input{
        width: 85%;
        height: 5vh;
        border-radius: 25px;
        border: none;
        cursor: pointer
   }
   .log_google img {
        width: 1.5rem;
        left: 23%;
        top: 40px;
   }
   /*------------------------CSS REGISTER----------------------------------*/
/* .wallContainer{
    display: flex;
} */
.sectionWall{
    width: 100%;
    display: flex;
}
.h2Name{
    display: none;
}
.WelcomeDesktop {
    display: block;
    border-bottom: 1px solid white;
}
.Saludo{
    width: 75vw;
    display: flex;
    position: absolute;
    top: 2rem;
    left: 18rem;
    color: white;
    font-weight: bolder;
    font-size: 1.8rem;
    font-family: 'Baloo 2', cursive;
    flex-direction: row-reverse;
}
.Saludo img {
    width: 10%;
}
.ContainerOrange{
    width: 19%;
    height: 100vh;
    flex-direction: column-reverse;
    justify-content: flex-end;
    position: fixed;
}
.imgWall{
    display: none;
}
.rightOrange{
    width: 16vw;
}
.imagenWall{
    justify-content: flex-start;
}
.imgWallDos{
    display: block;
    width: 83% !important;
    padding-top: 8vh;
}
.imgManchaWall{
    display: block;
    position: absolute;
    top: 62vh;
    left: 11rem;
    width: 40.5%;
}
.leftOrange{
    width: 100%;
}
.hPost{
    width: 100%;
    margin: 0;
}
.h3Post{
    display: none;
}
.h3PostWall{
    display: block;
    font-size: 1.8rem !important;
    text-align: center !important;
    width: 100%;
    padding-top: 9vh !important;
    font-family: 'Fredericka the Great', cursive;
}
.ContFormWall{
    position: absolute;
    top: 24vh;
    left: 53%;
}
.btn_send{
    background-color: transparent;
    color: var(--colorOrange);
    font-weight: bold;
    cursor: pointer;
}
.inp_publication{
    height: max-content;
}
.inp_publication::placeholder{
    padding-top: 0.4rem;
}
.formWall{
    height: 21vh;
    padding: 1rem;
    background-color: var(--colorLightGrey);
    border-radius: 20px;
    position: absolute;
    left: 12vw;
    top:22vh
}
.contPublic{
    padding: 25vh 14% 0px 43%;
}
.publicUser{
    width: 100%;
    padding-bottom: 3rem;
}
.div_publiU{
    height: 35vh;
    padding: 1rem 2rem;
    font-size: x-large;
    font-family: system-ui;
}
.likesHeart {
   color: red;
}
.signOff{
    position: fixed;
    top: 87vh;
    width: 16vw;

   }
.signOff img {
    width: 53%;
    }
}