@charset "utf-8";
/* CSS Document */
details {
    background-color: #ccc; /* color de fondo cuando no está desplegado */
	font-family:"Times New Roman", Times, serif;
	font-size:18px
}

details[open] {
    background: #e8e8e6; /* color de fondo cuando está desplegado */
}


details summary {
    font-weight: 400; /* peso de la tipografía cuando  no está desplegado */
    list-style: none; /* ocultamos la flecha */
    cursor: pointer; /* cambia el cursor del puntero */
}

details[open] summary {
    font-weight: 600; /* peso de la tipografía cuando está desplegado */
}

details p {
    background: #f6f8fa; /* color de fondo del contenido oculto */
}

details {
	position: relative;
	width: 100%;
	float: left;
	background-color: #822703;
}


details summary::before {
    position: absolute; 
    content: "🔽";	
    font-size: 1.75rem;
    top: 10px;
    right: 16px;
}


details[open] summary::before {
    -webkit-animation: rotate-emoji 0.6s ease-in-out both;
    animation: rotate-emoji 0.6s ease-in-out both;
}

@-webkit-keyframes rotate-emoji {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}