@font-face {
		font-family: "figtreeExtraBold";
		src: url("../fonts/static/Figtree-ExtraBold.ttf") format("truetype");
		font-display: fallback;
	}	
	@font-face {
		font-family: "figtreeSemiBold";
		src: url("../fonts/static/Figtree-SemiBold.ttf") format("truetype");
		font-display: fallback;
	}
		
	* {
		margin: 0px;
		padding: 0px;
	}
	.estilo_body {
		background-color: hsl(47, 88%, 63%);
	}
	
	@media(max-width: 500px) {
		.div_principal {
			width: 304px;			
			background-color: hsl(0, 0%, 100%);
			color: hsl(0, 0%, 7%);		
			margin: 155px auto;
			padding: 10px;	
			border: 2px solid hsl(0, 20%, 30%);
			border-radius: 20px;		
			box-shadow: hsl(0, 10%, 10%) 7px 7px;		
		}
		.div_imagen {				
			position: relative;		
			width: 284px;
			height: 200px;
			margin: 10px auto;			
			overflow: hidden;			
			border-radius: 12px;
		}
		.estilo_img_01 {
			position: absolute;			
			left: -100%;
			right: -100%;
			top: -100%;
			bottom: -100%;			
			margin: auto;			
			min-height: 100%;
			min-width: 100%;			
		}
		.div_contenido {	
			font-family: figtreeSemiBold;
			font-size: 14px;
			line-height: 1.3rem;
			font-weight: 500;		
			margin: 8px;
		}
		.div_learning {
			font-size: 12px;
			margin-top: 15px;
			margin-left: 5px;
			margin-right: 5px;		
		}
		.h_learning {
			display: inline-block;
			font-family: figtreeExtraBold;
			background-color: hsl(47, 88%, 63%);	
			margin-top: 5px;
			padding: 3px 12px;
			border-radius: 5px;
		}
		.div_fecha {
			font-size: 12px;
			margin-top: 8px;
			margin-left: 2px;
			margin-right: 2px;
			padding: 4px;				
		}
		.div_titulo {	
			font-family: figtreeExtraBold;		
			font-size: 14px;
			margin-top: 8px;
			margin-left: 2px;
			margin-right: 2px;		
			padding: 5px;
		}
		.h_titulo_02:hover {
			color: hsl(47, 88%, 63%);
			cursor: pointer;				
		}
		.div_principal:has(.h_titulo_02:hover) {
			box-shadow: hsl(0, 10%, 10%) 12px 12px;	
		}	
		.div_descripcion {
			color: hsl(0, 0%, 50%);
			margin-top: 8px;			
			margin-left: 1px;
			margin-right: 1px;
			padding: 5px;				
		}	
		.div_img_avatar {
			display: grid;
			grid-template-columns: 1fr 5fr;	
			margin-top: 20px;
			margin-bottom: 12px;
			margin-right: 20px;
		}		
		.clase_img_avatar {
			width: 32px;	
			margin-left: 7px;
		}
		.div_titulo_avatar {
			font-family: figtreeExtraBold;
			font-size: 14px;
			padding-top: 5px;
			padding-left: 1px;	
		}
	}
	
	@media(min-width: 500px) {
		.div_principal {
			width: 304px;			
			background-color: hsl(0, 0%, 100%);
			color: hsl(0, 0%, 7%);		
			margin: 180px auto;
			padding: 7px;	
			border: 2px solid hsl(0, 20%, 30%);
			border-radius: 20px;		
			box-shadow: hsl(0, 10%, 10%) 7px 7px;		
		}
		.div_imagen {		
			margin: 11px 12px 0px 12px;						
		}
		.estilo_img_01 {
			width: 100%;
			margin: auto;
			border-radius: 10px;
		}
		.div_contenido {	
			font-family: figtreeSemiBold;
			font-size: 14px;
			line-height: 1.3rem;
			font-weight: 500;		
			margin: 8px;
		}
		.div_learning {
			font-size: 12px;
			margin-top: 10px;
			margin-left: 5px;
			margin-right: 5px;		
		}
		.h_learning {
			display: inline-block;
			font-family: figtreeExtraBold;
			background-color: hsl(47, 88%, 63%);	
			margin-top: 5px;
			padding: 3px 12px;
			border-radius: 5px;
		}
		.div_fecha {
			font-size: 12px;
			margin-top: 3px;
			margin-left: 2px;
			margin-right: 2px;
			padding: 4px;				
		}
		.div_titulo {	
			font-family: figtreeExtraBold;		
			font-size: 13px;
			margin-top: 5px;
			margin-left: 2px;
			margin-right: 2px;		
			padding: 5px;
		}
		.h_titulo_02:hover {
			color: hsl(47, 88%, 63%);
			cursor: pointer;				
		}
		.div_principal:has(.h_titulo_02:hover) {
			box-shadow: hsl(0, 10%, 10%) 12px 12px;	
		}	
		.div_descripcion {
			color: hsl(0, 0%, 50%);
			font-size: 13px;
			margin-top: 5px;			
			margin-left: 1px;
			margin-right: 1px;
			padding: 5px;				
		}	
		.div_img_avatar {
			display: grid;
			grid-template-columns: 1fr 5fr;	
			margin-top: 12px;
			margin-bottom: 10px;
			margin-right: 20px;
		}		
		.clase_img_avatar {
			width: 26px;	
			margin-left: 7px;
		}
		.div_titulo_avatar {
			font-family: figtreeExtraBold;
			font-size: 12px;
			padding-top: 5px;
			padding-left: 1px;	
		}
		
	}
	
	@media(min-width: 1000px) {
		.div_principal {
			width: 362px;
			background-color: hsl(0, 0%, 100%);
			color: hsl(0, 0%, 7%);		
			margin: 218px auto;
			padding: 10px;	
			border: 2px solid hsl(0, 20%, 30%);
			border-radius: 20px;		
			box-shadow: hsl(0, 10%, 10%) 7px 7px;		
		}
		.div_imagen {		
			margin: 12px 12px 0px 12px;						
		}
		.estilo_img_01 {
			width: 100%;
			margin: auto;
			border-radius: 10px;
		}
		.div_contenido {	
			font-family: figtreeSemiBold;
			font-size: 16px;
			line-height: 1.5rem;
			font-weight: 500;		
			margin: 10px;
		}
		.div_learning {
			font-size: 14px;
			margin-top: 15px;
			margin-left: 5px;
			margin-right: 5px;		
		}
		.h_learning {
			display: inline-block;
			font-family: figtreeExtraBold;
			background-color: hsl(47, 88%, 63%);	
			margin-top: 3px;
			padding: 3px 12px;
			border-radius: 5px;
		}
		.div_fecha {
			font-size: 14px;
			margin-top: 7px;
			margin-left: 2px;
			margin-right: 2px;
			padding: 4px;				
		}
		.div_titulo {	
			font-family: figtreeExtraBold;		
			font-size: 16px;
			margin-top: 7px;
			margin-left: 2px;
			margin-right: 2px;		
			padding: 5px;
		}
		.h_titulo_02:hover {
			color: hsl(47, 88%, 63%);
			cursor: pointer;				
		}
		.div_principal:has(.h_titulo_02:hover) {
			box-shadow: hsl(0, 10%, 10%) 15px 15px;	
		}	
		.div_descripcion {
			color: hsl(0, 0%, 50%);
			font-size: 16px;
			margin-top: 9px;
			margin-left: 2px;
			margin-right: 2px;
			padding: 5px;				
		}	
		.div_img_avatar {
			display: grid;
			grid-template-columns: 1fr 5fr;	
			margin-top: 18px;
			margin-bottom: 12px;
			margin-right: 20px;
		}		
		.clase_img_avatar {
			width: 32px;	
			margin-left: 7px;
		}
		.div_titulo_avatar {
			font-family: figtreeExtraBold;
			font-size: 14px;
			padding-top: 5px;
			padding-left: 1px;	
		}
	}