<style>
h2{color:pink; text-align: center; }
li {
display: inline; float: right; text-align: center;
}
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden;
} li a {
display: block; padding: 8px; color: #000; padding: 20px 20px; text-decoration: none;
}
li a:hover { background-color: #54d3f9;
}
.container{ left: 50%; transform: translate(-50%); position: relative; width: 30%; }
button.accordion {
background-color: #f27602; color: #59755f; cursor: pointer; padding: 9px; width: 100%;
height: 10%
border: none; text-align: center; outline: none; font-size: 15px; transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #54d3f9;
}
button.accordion:after {
content: '\002B'; color: #54d3f9; font-weight: bold; float: right; margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
.panel {
padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;
}
</style>