/* --- formatos globales --- */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    height: 100vh;
    background-color: #d9cfc0;
}

h2{
    font-family: FT Overpass;
    font-size: 4rem;
    font-weight: normal;
    color: #2b2b2b;
}

@font-face{
    font-family: "FT Overpass";
    src: url("/recursos/FT_Overpass.otf") format("opentype");
}

/* --- home --- */

.bg-overlay{
    border-style: solid;
    border-width: 10px;
    border-image-source: linear-gradient(transparent, #d9cfc0);
    border-image-slice: fill 1;
}

.bg{
    height: 50vh;
    background-image: url("/recursos/patron_floral.webp");
    background-position: 0 0;
    background-repeat: repeat;
    animation: fondo 15s linear infinite;
}

@keyframes fondo{
    from{background-position: 0 0;}
    to{background-position: 1920px 1080px;}
}

.home{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bienvenida{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 2rem;
}

.bienvenida img{width: 50rem;}

.nav-home{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem;
    gap: 4rem;
}

.nav-home img{
    width: 25rem;
    border: #2b2b2b solid;
    border-radius: 1rem;
}

/* botones */
.btn-izq, .btn-drch{
    transition: 0.3s ease;
}

.btn-izq:hover{
    transform: rotate(-2deg);
}

.btn-drch:hover{
    transform: rotate(2deg);
}

.retorno{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4%;
    margin: 0 auto;
    padding-bottom: 2rem;
    transition: 0.3s ease;
}

.retorno img{width: 4.5rem;}

.retorno:hover{
    transform: scale(1.1);
}

.btn-correo{
    width: 14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 3rem;
    color: #f8f7f5;
    background-color: #f5999e;
    font-family: FT Overpass;
    font-size: 2rem;
    text-decoration: none;
    border-radius: 1rem;
    margin: 0 auto;
    transition: 0.3s ease;
}

.btn-correo:hover{
    scale: 0.91;
}

/* navbar */

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    padding: 2rem 4rem;
}

.logo{
    display: flex;
    align-items: center;
}

.logo img{
    height: 6.7rem;
}

.navbar-btn{
    display: flex;
    align-items: center;
    gap: 4rem;
    list-style: none;
}

.navbar-btn a{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: FT Overpass;
    font-size: 1.8rem;
    color: #2b2b2b;
    text-decoration: none;
    transition: 0.3s ease;
    padding: 1rem;
    border-radius: 0.5rem;
}

.navbar-btn a:hover{
    color: #f8f7f5;
    background-color: #2b2b2b;
    padding: 1rem;
    border-radius: 1rem;
}

/* cuerpos de texto */
.txt{
    text-align: center;
    width: 75%;
    margin: 0 auto;
    padding: 2rem 4rem;
}

.txt p{
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.8rem;
}

/* gifs */
.yop{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 25%;
}

.yop img{width: 22rem;}

/* --- enlaces --- */

.cards{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    gap: 4rem;
}

.cards img{
    width: 25rem;
    border: #2b2b2b solid;
    border-radius: 1rem;
}

/*--- guestbook ---*/

.guestbook{
    width: 100%;
    height: 100vh;
    border: none;
}

/* --- estas media queries son un completo despapaye --- */

@media (max-width:768px){
    .nav-home, .cards{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
    }

    nav{flex-direction: column;}

    .txt{width: 80%;}
}

@media (max-width:480px){
    h2{font-size: 2.8rem;}

    .nav-home, .cards{
        display: grid;
        grid-template-columns: repeat(1, auto);
    }

    .bienvenida img{width: 40rem;}
    
    .btn-correo{
        width: 12rem;
        font-size: 1.8rem;
    }

    .navbar-btn{
        flex-direction: column;
        gap: 0;
        background-color: #2b2b2b;
        width: 100%;
        border-radius: 2.5rem;
        padding: 1.5rem;
    }

    .navbar-btn a{
        color: #f8f7f5;
        text-decoration: underline;
        transition: 0.3s ease;
        padding: 0.5rem;
        border-radius: 0.5rem;
    }

    .navbar-btn a:hover{
        color: #d9cfc0;
        padding: 0.5rem;
        border-radius: 1rem;
    }

    .yop img{width: 18rem;}

    .txt{width: 100%;}
}

@media (max-width:390px){
    .nav-home img, .cards img{width: 20rem;}
    
    .bienvenida img{width: 30rem;}

    .yop img{width: 16rem;}
}