/* ====== GENERALES =========*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

html,
body {
    overflow-x: hidden;
}

main {
    max-width: 192rem;
    margin: 0 auto;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ======== Estilos =========*/

header {
    background: rgb(201, 255, 189);
    background: linear-gradient(45deg, rgba(200,255,187,1) 0%, rgba(54,143,54,1) 100%);
}

nav {
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    margin-block-end: 3rem;
    max-width: 192rem;
    margin: 0 auto;
}

nav a {
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;
    color: #fff;
}

.hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    max-width: 192rem;
    margin: 0 auto;
}

.header-h1 {
    font-size: 4rem;
    text-align: center;
    color: #efffc8;
    font-weight: 400;
}
.header-h2 {
    font-size: 6rem;
    text-align: center;
    color: #100B00;
}

.card__p {
    font-size: 1.8rem;
    font-weight: 300;
}

.card__p.hero_text {
    padding-inline: 2rem;
    margin-block: 2rem;
}

.link {
    color: #100B00;
    font-weight: bold;
}

.hero__img {
    max-width: 70rem;
    justify-self: center;
}

/* ========= Proyectos ========= */

.title {
    color:#100B00;
    border-block-end: #100B00 solid .3rem; 
    margin-block: 4rem;
    font-weight: bold;
    text-align: left;
    margin-inline: 2rem;
}

.cards {
    display: grid;
    justify-content: center;
    grid-template-columns: auto;
    margin: 0 auto;
}

.card {
    display: flex;
    flex-direction: column;
    margin-inline: 2rem;
    margin-block: 2rem;
    height: 35rem;
    width: 90%;
    max-width: 40rem;
    box-shadow: 0px 0px 13px 0px rgba(181,181,181,1);
    overflow: hidden;
    border-radius: 1rem;
}

.card__img {
    width: 100%;
    height: 15rem;
    object-fit: cover;
    overflow: hidden;
}

.card__img img {

    transition: .5s ease;
}

.card:hover img {
    transform: scale(1.3);
}

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

.card__title {
    font-size: 2rem;
    text-align: center;
    text-decoration: underline;
    font-weight: bold;
    margin-block: 2rem;
}

.card__p {
    text-align: center;
    font-style: italic;
}
.card__p.card__p--services{
    display: flex;
    align-items: center;
    height:7rem;
}

.html {
    border: solid .1rem #ff4500;
    border-radius: .4rem;
    background-color: rgba(255, 68, 0, 0.781);
    color: white;
}

.css {
    border: solid .1rem rgb(47, 196, 255);
    border-radius: .4rem;
    background-color: rgba(67, 172, 214, 0.781);
    color: white;
}

.js {
    border: solid .1rem rgb(252, 248, 15);
    border-radius: .4rem;
    background-color: rgba(207, 211, 0, 0.781);
    color: white;
}

.card__button {
    color: white;
    border: none;
    padding: 1rem 2rem;
    background-color: yellowgreen;
    margin: 2rem 0;
    border-radius: .5rem;
    font-size: 1.8rem;
    text-decoration: none;
}

.servicios {
    margin-block-end: 5rem;
}

footer {
    background: rgb(200,255,187);
    background: linear-gradient(45deg, rgba(200,255,187,1) 0%, rgba(54,143,54,1) 100%);
    height: 40rem;
    color: white;
    padding-block-start: 1rem;
    display: grid;
}

.footer {
    margin-block: 3rem;
}

.contacto {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 192rem;
    justify-content: space-between;
    margin: 0 auto;
}

.icon {
    justify-self: center;
    width: 5rem;
    height: 5rem;
    border-radius: 30rem;
}

.creditos {
    background: #100B00;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 1.6rem;
}

#btn {
    width: 6rem;
    height: 6rem;
    position:fixed;
    background-color: rgb(46, 247, 147);
    bottom: 2rem;
    right: 2rem;
    border-radius: 9999rem;
    background-image: url(../assets/icons/moon.svg);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}


body.dark {
    background-color:rgb(36, 36, 36);
}
body.dark header {
    background: hsl(109, 20%, 57%);
    background: linear-gradient(45deg, hsl(109, 20%, 57%) 0%, rgb(31, 83, 31) 100%);
}
body.dark .title {
    color:rgb(220, 220, 220);
    border-block-end: rgb(199, 199, 199) solid .3rem;
}

body.dark .card {
    box-shadow: 0px 0px 13px 0px rgb(17, 17, 17);
}

body.dark .card__title {
    color: rgb(220, 220, 220);
}

body.dark .card__p {
    color: rgb(220, 220, 220);
}

body.dark footer {
    background: hsl(109, 20%, 57%);
    background: linear-gradient(45deg, hsl(109, 20%, 57%) 0%, rgb(31, 83, 31) 100%);
}

body.dark .creditos {
    background-color: rgb(36, 36, 36);
}

body.dark #btn {
    background-image: url(../assets/icons/sun.svg);
}


@media (prefers-color-scheme: dark) {
    body {
        background-color:rgb(36, 36, 36);
    }
    header {
        background: hsl(109, 20%, 57%);
        background: linear-gradient(45deg, hsl(109, 20%, 57%) 0%, rgb(31, 83, 31) 100%);
    }
    .title {
        color:rgb(220, 220, 220);
        border-block-end: rgb(199, 199, 199) solid .3rem;
    }

    .card {
        box-shadow: 0px 0px 13px 0px rgb(17, 17, 17);
    }

    .card__title {
        color: rgb(220, 220, 220);
    }

    .card__p {
        color: rgb(220, 220, 220);
    }

    footer {
        background: hsl(109, 20%, 57%);
        background: linear-gradient(45deg, hsl(109, 20%, 57%) 0%, rgb(31, 83, 31) 100%);
    }

    .creditos {
        background-color: rgb(36, 36, 36);
    }
    #btn {
        background-image: url(../assets/icons/sun.svg);
    }


    body.light {
        background-color:white;
    }
    body.light header {
        background: rgb(201, 255, 189);
        background: linear-gradient(45deg, rgba(200,255,187,1) 0%, rgba(54,143,54,1) 100%);
    }
    body.light .title{
        color:#100B00;
        border-block-end: #100B00 solid .3rem;
    }
    body.link .card {
        box-shadow: 0px 0px 13px 0px rgba(181,181,181,1);
    }
    body.light .card__title {
        color: black
    }
    body.light .card__p {
        color: black;
    }
    body.light footer {
        background: rgb(200,255,187);
        background: linear-gradient(45deg, rgba(200,255,187,1) 0%, rgba(54,143,54,1) 100%);
    }
    body.light .creditos {
        background: #100B00;
    }
    body.light #btn {
        background-image: url(../assets/icons/moon.svg);
    }
}