header {
    text-align: center;
    top:0;
    width: 100%;
    height: 10%;
    background: url("/img/hdr-back.png") fixed;
}

h1 {
    text-align:center;
    color:black;
}

a {
    color:black;
}

header > div {
    padding-left:2em;
    padding-right: 2em;
}

header > div > h1 {
    margin-block-start: 0;
    padding-top: .5em;
}
header > div > h1 > a{
    color:#f6e5cb;
    text-decoration: none;
}

ul > li > h1 {
    text-align: left;
}

main > div {
    padding-left: 10%;
    padding-right: 10%;
}

li > h1 {
    display: inline;
    font-size: 3rem;
}

li > span {
    width: 75%;
}
li > span:hover {
    text-decoration: underline;
    cursor: pointer;
}
li > span > h2 {
    display: inline;
    color: black;
    margin: auto;
}

@keyframes fade {
    0%,40% { opacity: 0 }
    40%,100% { opacity: 1}
}

.list-content > span {
    display: none;
    color: black;
    padding: 1em;
    animation: fade 2s cubic-bezier(.93,.02,.77,.72);
}
.list-content {
    max-height: 0;
    border: black 1px solid;
    border-radius: 10px;
    transition: all 2s linear;
    text-align: left;
    margin-top: 1em;
}

.list-show {
    max-height: 500px;
}

.list-show > span {
    display: block;

}

@media screen and (max-width: 577px) {
    main > div {
        padding-left: 5%;
        padding-right: 5%;
    }
}