*
{
	padding:0px;
	margin:0px;
}
body
{
	background-color: #FFFFFF;
}
#principal
{
	width:100%;
	height:auto;
	margin:auto;
	

}
section
{
	float:left;
	width:80%;
	height:480px;

	margin-top:5px;
	margin-bottom:5px;
	
	font-family:helvetica;
	font-size:16px;
	padding-left:20px;
	
	
}
aside
{
	margin-top: 5px;
	float:right;
	width: 17%;
	height: 158px;
	
	text-align:center;
	font-family:"Comic Sans MS";
	font-size:14px;
	font-weight:bold;
	background-color: Lightblue;
	padding-top:40px;
}

#actividades {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.actividad {
    width: calc(30% - 20px);
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Efecto de sombra */
    background-color: #f5f5f5; /* Color de fondo */
    transition: background-color 0.3s ease; /* Transición para el cambio de color */
}

.actividad:hover {
    background-color: #e0e0e0; /* Color de fondo al pasar el cursor */
}

.actividad h2 {
    text-align: center;
}

.actividad p {
    margin-bottom: 10px;
}

.actividad a {
    display: block;
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
}

.actividad a:hover {
    background-color: #444;
}

@media screen and (max-width:760px) 
{
	h2 {
		font-size: 14px;
	}
	.actividad {
		font-size: 14px;
		flex-direction: column;
		width: 90%;
		flex: 1;
	}
	#actividades {
		display: flex;
	}
}