body {
    font-family: sans-serif;
    font-size: 1.4rem;
    margin: 0%;
    padding: 0%;
    color: #13005A;
    background: radial-gradient(circle, #ffffff 1%, #c6daf4 100%);
}

p {
    font-family: "Merriweather sans";   
}

h1 {
    font-family: Inter;
}

header {
    font-size: 0.5rem;
}

.inicio {
    display: grid;
    grid-template-columns: repeat(2,1fr); 
    align-items: center;
    margin: 0% 2%;  
}

aside {
    align-items: end;
    align-content: end;
    text-align: end;
    transform: scaleX(-1);
    margin-left: 25%;
}

nav {
    font-size: 1rem;
    margin-right: 2%;
    margin-left: 2%;
    display: grid;
    grid-template-columns: 1vh 1fr;
}

#navButtons {
    display: flex;
    justify-content: end;
    align-items: center;
}

.navButton {
    margin-left: 1%;
    margin-right: 1%;
    text-decoration: none;
    color: #13005A;
    align-items: center;
    font-family: Inter;
}

#logo {
    display: flex;
    justify-content: start;
    text-align: end;
}

.welcome {
    margin: 1%;
}

#contratarIni {
    display: grid;
    place-items: center;
    padding: 1vh 3vh;
    background-color: #13005A;
    color: white;
    border-radius: 0.4vh;
    font-family: Inter;
    font-size: 1.5rem;
    cursor: pointer;
}

#contratarIni:hover {
    padding: 1.01vh 3.01vh;
    background-color: #00337c;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

main {
    opacity: 0;
    animation: fade-in 0.5s ease forwards;
}


@media (max-width: 768px) {
    .inicio {
        display: grid;
        grid-template-columns: 40vh;
        text-align: center; 
        margin: 2vh 4vh;
        max-width: fit-content;
    }


    aside {
        display: flex;
        justify-content: start;
    }
    aside img{
        width: 40vh;
        height: 40vh;
    }


    nav {
        grid-template-columns: 1fr;
        gap: 2vh; 
        margin-top: 2vh;
    }

    #logo {
        justify-content: center;
    }

    #navButtons {
        justify-content: center;
        flex-wrap: wrap; 
        gap: 2vh;
    }

    .navButton {
        font-size: 1.2rem;
        margin: 0 2%;
    }

    #contratarIni {
        font-size: 1.2rem;
        padding: 1.5vh 4vh;
        margin: 0.1vh auto; 
    }
}