* {
    margin: 0;
    padding: 0;
    font-family: poppins;
}
*:focus {
    outline: none;
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --background-image: repeating-conic-gradient(#fef2e3 0% 25%, #fff6ed 0% 50%);
    --langbtn: #ffffff;
    --icon-color: invert(100%);
    --langhoverbtn: #f1f1f1;
    --maincardbtn: #fef2e3;
    --aboutmebtn: #fef2e3;
    --invert01: invert(0);
    --blogtitle: #fef2e3;
    --contactme: #ededed;
    --contactmetxt: #19203f;
    --conticnimg: rgb(1, 1, 1, 0.05);
    --footerborder: #e5e5e5;
    --footdesc: #000000;
    --footdr: #000000;
}
.dark-mode {
    --bg-color: #1c1e2f;
    --text-color: #e6e6e6;
    --background-image: repeating-conic-gradient(#1f233f 0% 25%, #191d35 0% 50%);
    --langbtn: #43455c;
    --icon-color: invert(0%);
    --langhoverbtn: #2a2d49;
    --maincardbtn: inherit;
    --aboutmebtn: #1f233f;
    --invert01: invert(100%);
    --blogtitle: rgb(254, 137, 0, 0.1);
    --contactme: #1f233f;
    --contactmetxt: #ffffff;
    --conticnimg: rgb(1, 1, 1, 0.15);
    --footerborder: #1f233f;
    --footdesc: #a4a1a7;
    --footdr: #88838d;
}

/*-----------HEADER----------*/
body {
    color: var(--text-color);
    background-color: var(--bg-color);
    transition:
        background-color 0.5s ease,
        color 0.5s ease;
}
header {
    display: grid;
    grid-template-columns: 2.5em 1fr repeat(7, 5.6em) 8.6em 2em;
    margin: 3em 10vw;
    align-items: center;
    align-content: center;
    text-align: center;
    gap: 1vw;
    font-size: clamp(0.6em, 1.1vw, 1em);
}
.llogolight {
    width: 3em;
    filter: var(--icon-color);
    transition: filter -3.9s ease-in-out;
}
#logo {
    text-align: left;
}
header a {
    text-decoration: none;
    color: inherit;
    width: 6em;
    transition: color 0.1s ease-in-out;
}
header a:hover {
    color: #fc8800;
}
#btn-lang {
    display: inline-block;
}
.def-btn {
    display: flex;
    align-items: center;
    background: inherit;
    width: 100%;
    border: none;
    padding: 10px;
    font-size: clamp(0.6em, 1.1vw, 1em);
    margin-left: 10px;
    transition: color 0.3s ease-in-out;
    color: var(--text-color);
}
#btn-theme {
    background: inherit;
    border: 0;
    display: flex;
    align-content: center;
    align-items: center;
    padding: 10px;
}
/*-----------HEADER/FUNCIONES----------*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-left: 10px;
}
.dropdown-content-button {
    background-color: var(--langbtn);
    color: var(--text-color);
    border: none;
    width: 100%;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    display: flex;
    gap: 1.4em;
    font-size: clamp(0.6em, 1.1vw, 1em);
}
.dropdown-content-button:hover {
    background-color: var(--langhoverbtn);
}
.dropdown:hover .dropdown-content {
    display: block;
}
.spflag {
    width: 2em;
}
#arrowdropdown {
    width: 1.5em;
    filter: invert(50%);
}
.Light {
    width: 2em;
    filter: invert(50%);
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}
.Light:hover {
    filter: var(--icon-color);
}

/*---------------------------------------MAIN CARD------------------------------------*/

.CVcard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 5em 15vw;
    border-radius: 15px;
    padding: 0 2em;
    background-image: var(--background-image);
    background-position:
        0 0,
        64px 64px;
    background-size: 128px 128px;
    background-color: #fff6ed;
    transition: all 0.1s ease-in-out;
}
.CVdesc {
    grid-column: span 2;
    padding: 3em;
}
.cvimgclass {
    background-color: blue;
    width: 15em;
    border-radius: 50%;
    margin: auto;
    cursor: pointer;
}
.CVdesc h3 {
    margin: 0 0 1em 0;
    font-size: 1.3rem;
    color: #fe8900;
}
.soy {
    font-size: 3.5rem;
}
.desc {
    margin: 1em 0;
    text-align: left;
    line-height: 1.6em;
}
.CVdesc button {
    border-radius: 10px;
    padding: 1em;
}
.Contbtn {
    background-color: #fe8900;
    border: 2.5px solid #fe8900;
    cursor: pointer;
    color: var(--text-color);
}
.Seebtn {
    background: var(--maincardbtn);
    border: 2.5px solid var(--text-color);
    cursor: pointer;
    color: var(--text-color);
}
/*-----------------------------------------ABOUT ME------------------------------------------------*/
.abme {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 15vw;
    gap: 1vw;
}
.abme h2 {
    color: #fe8900;
    grid-column: 1 / 5;
    display: block;
}
.abme p {
    grid-column: 1 / 5;
}
.abmebtnlist {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    justify-items: center;
    gap: 0.5em;
}
.abmebtn {
    width: 7vw;
    height: 7vw;
    border: 0;
    border-radius: 15px;
    margin: 1.5vw 0 1.7vw 0;
    background-color: var(--aboutmebtn);
}
.abmeicon {
    width: 50px;
    padding-top: 5px;
}
.abmedwn {
    grid-column: 1 / 5;
    background-color: #fe8900;
    border: 2.5px solid #fe8900;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    width: 14em;
    height: 3.5em;
    gap: 5px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-color);
}
.abmedwn img {
    filter: var(--icon-color);
}
/*------------------------------------------SERVICES--------------------------------------*/
.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 5em 15vw;
    justify-items: center;
}
.services h2 {
    grid-column: 1 / 4;
    color: #fe8900;
}
.services p {
    grid-column: 1 / 4;
}
.contcardserv {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
    margin: 2vw 0;
}
.cardserv {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 25vw;
    padding: 1.5vw;
    background-color: var(--aboutmebtn);
    border-radius: 15px;
}
.cardservicon {
    width: 40px;
    grid-column: 1;
}
.cardserv h3 {
    grid-column: 2 / 8;
    align-content: center;
}
.cardserv p {
    grid-column: 1 / 8;
}
/*------------------------------------------PORTFOLIO--------------------------------------*/
.portfolio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 5em 15vw;
    text-align: center;
    justify-items: center;
}
.portfolio h2 {
    grid-column: 1 / 3;
    color: #fe8900;
}
.portfolio p {
    grid-column: 1 / 3;
}
.pfnav {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 0.8fr 1em repeat(3, 1fr) 1em 0.8fr;
    border: var(--text-color) 1px solid;
    border-radius: 15px;
    width: 45vw;
    margin-top: 1.5em;
    gap: 0.5em;
    background: rgb(255, 255, 255, 0.03);
}
.pfnavsep {
    font-size: 2.1em;
    font-weight: 200;
}
.pfnav button {
    border: none;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
}
.pfnav button img {
    width: 20px;
    padding: 1vw;
}
#pright {
    transform: scaleX(-1);
}

.contportcard {
    grid-column: 1 / 3;
    margin: 1em 15vw;
}
.portcard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
}
.portcardimg {
    display: flex;
    width: 18vw;
    height: 18vw;
    object-fit: cover;
    border-radius: 15px;
}
.pb {
    filter: var(--invert01);
}
.ptitle {
    color: var(--text-color);
}
/*------------------------------------------CERTIFICATE--------------------------------------*/
.cert {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 5em 15vw;
    text-align: center;
    justify-items: center;
}
.cert h2 {
    color: #fe8900;
}
.certcards {
    margin-top: 1.5em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
}
.certcardimg {
    width: 18vw;
    border-radius: 15px;
}
.certnav {
    display: flex;
    align-items: center;
    gap: 1vw;
    margin-top: 1.5em;
}
#clbtn {
    width: 2vw;
    cursor: pointer;
}
#crbtn {
    width: 2vw;
    transform: scaleX(-1);
    cursor: pointer;
}
.cbn {
    background-color: inherit;
    border: none;
    display: flex;
    filter: var(--invert01);
}
.ccontdot {
    text-align: center;
}
.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active,
.dot:hover {
    background-color: #717171;
}
/*------------------------------------------BLOG--------------------------------------*/
.blog {
    display: grid;
    grid-template-columns: 1fr;
    margin: 5em 15vw;
    text-align: center;
    justify-items: center;
}
.blog h2 {
    color: #fe8900;
}
.cbcard {
    margin-top: 1.5em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5em;
}
.bcard {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: start;
}
.bcard img {
    grid-column: 1;
    width: 20vw;
    height: 14vw;
    object-fit: cover;
    border-radius: 15px;
}
.bcardtitle {
    grid-column: 1;
    width: 19vw;
}
.bcardtitleh3 {
    grid-column: 1;
    color: #fe8900;
    background-color: var(--blogtitle);
    border-radius: 5px;
    padding: 0.5em;
    margin-top: 0.5em;
    display: inline-flex;
}
.bcard p {
    grid-column: 1;
    padding: 0.5em 2em;
}
#blogbtn {
    background-color: #fe8900;
    border: 2.5px solid #fe8900;
    border-radius: 10px;
    padding: 10px 20px;
    width: 14em;
    height: 3.5em;
    font-weight: 500;
    cursor: pointer;
    margin-top: 2.5em;
    color: white;
}
/*------------------------------------------CONTACT ME--------------------------------------*/
.contactme {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    margin: 5em 15vw;
    text-align: center;
    justify-items: center;
}
.contactme h1 {
    color: #fe8900;
    grid-column: 1 / 3;
}
.contactme p {
    grid-column: 1 / 3;
    margin-bottom: 2em;
}
.contactmeform {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    width: 100%;
}
.cinput {
    background-color: var(--contactme);
    display: flex;
    padding: 0.85em;
    border-radius: 15px;
}
.cinput input {
    border: none;
    background-color: inherit;
    padding: 0.3em 0.3em 0.3em 0.8em;
    width: 100%;
}
.cinput textarea {
    width: 100%;
    height: 15em;
    border: none;
    padding: 0.3em;
    resize: none;
    background-color: inherit;
}
.submitmsg {
    border-radius: 15px;
    background-color: #fe8900;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    width: 100%;
    height: 3.5em;
    gap: 1em;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

#msgtype {
    grid-column: 1 / 3;
}
.submitmsg {
    grid-column: 1 / 3;
}
#cmsg {
    grid-column: 1 / 3;
    display: flex;
    align-items: flex-start;
}
#imgmsg {
    padding: 0.25em;
}

.submitmsg img {
    width: 20px;
    filter: invert();
}
.socialcont {
    grid-column: 1 / 3;
}
.cinput img {
    width: 20px;
    filter: invert(60%) sepia(0%) saturate(7499%) hue-rotate(138deg) brightness(102%) contrast(102%);
}

.conticn {
    width: 100%;
}
.conticn ul li {
    list-style: none;
    display: flex;
    gap: 0.8em;
    padding: 1em;
    justify-content: start;
    align-items: center;
}
.conticnimg {
    padding: 0.7em;
    border-radius: 100%;
    display: flex;
    background: var(--conticnimg);
}
.contimg {
    width: 20px;
    filter: invert(61%) sepia(58%) saturate(2897%) hue-rotate(357deg) brightness(97%) contrast(105%);
}
.contacth3 {
    font-weight: 500;
    color: var(--contactmetxt);
}

.cs img {
    width: 10px;
}
.socialcont {
    margin-top: 4em;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2vw;
    margin-bottom: 7em;
}
.cs {
    display: flex;
    padding: 2vw;
    align-items: center;
    justify-content: center;
    gap: 0.8vw;
    border-radius: 15px;
    cursor: pointer;
    background: rgb(1, 1, 1, 0.05);
}
.csimg {
    width: 30px !important;
    filter: var(--invert01);
}
/*------------------------------------------FOOTER--------------------------------------*/
footer {
    display: grid;
    grid-template-columns: 1fr;
    padding: 3em 15vw 1.5em 15vw;
    text-align: center;
    justify-items: center;
    border-top: 1px solid var(--footerborder);
}
.footdesc {
    padding: 2em 7em;
    color: var(--footdesc);
}
.footerlogo {
    display: flex;
    gap: 0.5vw;
}
.flogoimg {
    width: 3em;
    filter: var(--icon-color);
}
.footerlist {
    list-style: none;
    margin: 2em 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.footelement {
    text-decoration: none;
    color: var(--footdesc);
}
#footdr {
    margin: 2em;
    font-weight: 399;
    color: var(--footdr);
}