/* GLOBAL */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

body {
	background-image: linear-gradient(to bottom, rgba(188, 136, 231, 0.514), rgba(255, 255, 255, 0.514));
    min-height: 100vh;
    margin: 0;
    background-size: cover;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Header para desktop */
.header-nav {
	display: flex;
    position: sticky;
    top: 0;
	width: 60%;
    z-index: 1;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	border-radius: 10px;
	transform: translateY(20px);
	padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 52px;
	color: #413a3a;

	& span{
		font-size: 20px;
		color: #b11bc5;
	}

    animation: enhance-header linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 300px;
}

/* Header para móvil */
@media screen and (max-width: 800px) {
	.header-nav {
		flex-direction: column;
		padding-bottom: 20px;
	}
}

.header-nav nav {
	display: flex;
	gap: 10px;

	& a {
		text-decoration: none;
		color: #692569;
	}
}

/* Ilustraciones */
section {
    columns: 2;
    padding: 16px 32px;
    height: auto;
    margin-bottom: 32px
}

section img {
    border-radius: 4px;
    width: 100%;
    height: auto;
    margin-bottom: 32px;

    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

/* Animación header */
@keyframes enhance-header {
    to {
        background-color: #da86e6ce;
        backdrop-filter: blur(5px);
        font-size: 18px;
        color: rgb(65, 22, 80);
    }
}

@keyframes reveal {
    from {
        opacity: 0;
        translate: 0 100px;
    }

    to {
        opacity: 1;
        translate: 0 0px;
    }
}