<style>

details {
position: relative;
}

details summary::-webkit-details-marker {
display: none;
}

details summary::before {
content: "";
position: absolute;
left: 0;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZGF0YS1uYW1lPSJMYXllciAxIiBpZD0iTGF5ZXJfMSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uR3JhcGhpYy1TdHlsZXtmaWxsOm5vbmU7c3Ryb2tlOiMxZDFkMWI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDoycHg7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZS8+PHBvbHlsaW5lIGNsYXNzPSJHcmFwaGljLVN0eWxlIiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgaWQ9Il9QYXRoXyIgcG9pbnRzPSI3LjY2IDMuNDEgMTYuMzQgMTIuMSA3Ljg2IDIwLjU5Ii8+PC9zdmc+")
  no-repeat 50% 50% / 1em 1em;
width: 2.5em;
height: 1.5em;
transition: transform 0.5s linear;
}

summary {
width: 100%;
padding: 20px;
padding-left: 75px;
border-bottom: 2px solid #ccc;
cursor: pointer;
font-size: 1.65rem;
font-weight: 550;
}

summary:hover {
color: #0065bd;

}

summary:focus {
outline: none;
}

details[open] summary:before {
transform: rotate(90deg);
}

details[open] > summary {
color: ##0065bd;
}
p.source {
padding-top: 50px;
font-size: 12 px
text-align: center;
}

@keyframes open {
0% {
  opacity: 0;
}

100% {
  opacity: 1;
}
}
</style>;
