@charset "utf-8";
/* CSS Document */
html, body, section, article { display: grid }

/* display: grid on html & body + min-height: 100% on html
 * avoids the 100vh height mobile problem
 * https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
	* AND has better support than 100dvh height */
html { min-height: 100% }

/* avoid pure white text on pure black background
 * https://graphicdesign.stackexchange.com/questions/25356/why-not-use-pure-black-000-and-pure-white-fff
 * https://uxplanet.org/alternatives-to-using-pure-black-000000-for-text-and-backgrounds-54ef0e733cdb
 * https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ */
body {
	
}


}

.timeline {
	/* middle align along both axes */
	place-self: center;
	/* limit width */
	max-width: 50em;
}
	
	article {
		/* commonly used length value ¯\_(ツ)_/¯ */
		--size: .625em;
		/* timeline bar and markers */
		--highlight: #ad3c0b;
		/* default marker */
		--marker: 
			radial-gradient(circle closest-side, 
					var(--highlight) calc(100% - 1px), transparent) 
				0 0/ 100% var(--size);
		/* spacing between the two columns (text content and image) */
		grid-gap: 2em;
		/* equally sized columns */
		grid-template-columns: 1fr 1fr;
		/* tiny correction, avoid subpixel rounding issues */
		margin-top: -1px;
		background: 
			/* the timeline marker */
			var(--marker), 
			/* the timeline bar */
			linear-gradient(var(--highlight) 0 0) 50%/ 2px;
		background-repeat: no-repeat;
		
		/* different marker for the first item */
		&:first-child {
			--marker: 
				linear-gradient(var(--highlight) 0 0) 
					50% 0/ var(--size) calc(.5*var(--size))
		}
		
		/* for the odd items */
		&:nth-child(odd) {			
			img {
				/* on the 1st row, 1st column */
				grid-area: 1/ 1;
				/* right-aligned */
				justify-self: end
			}
		}
		
		/* spacing in between items */
		&:not(:last-child) { padding-bottom: 1em }
		
		/* direct article children, text content box + img */
		> * { border-radius: var(--size) }
	}
	
	&__content {
		padding: 1em;
		
	}

.timeline__content {
	text-align: right;
}

.timeline__content1 {
	text-align: left;
}
	
	h1 {
		margin: 0 0 var(--size);
		color: #ad3c0b;
		
	}
	
	time { font: 700 2.5em/ 1.25 roboto mono, monospace }
	
	
	p {
		margin: 0;
		padding-top: .5em;
		font: 1em proza libre, sans-serif
	}

	img {
		box-sizing: border-box;
		border: solid 2px #ad3c0b;
		width: min(100%, 13em);
		aspect-ratio: 1.3;
		object-fit: cover
	}

/*editado*/

    #qualification {
        display: flex;
        justify-content: center;       
        align-items: center;  
	
    }

   
    #qualification .container {
        max-width: 900px;
        width: 100%;
    }

    /* Evita que los elementos internos se descoloquen */
    #qualification .timeline {
        width: 100%;
    }