/* collabsed state */
.show {
    display: none; 
}
.details {
    display: none; 
}

/* uncollabsed state, hide clicked */
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .details {
    display:inline; 
}

/* style buttons */
.button{
	border-radius: 0.1em;			/* increased border-radius */
	text-decoration: none;
	color: white;					/* changed text color to white */
	background-color: #329bd8;		/* changed background color to a nice blue */
	text-transform: uppercase;		/* made the text uppercase */
	font-weight: bold;				/* gave the text a bold look */
	padding: 1px;
}

.button:hover {
	background-color: transparent;  /* changed the bg-color to transparent */
	border: 0.15em #329bd8 solid;	/* set a border to a blue color */
	color: #329bd8;					/* set a text color to the same color */
}

.button:active {
	background-color: transparent;  
	border: 0.15em #5e8ca5 solid;	
	color: #5e8ca5;					/* minor text color change in a deeper blue */
}