.page6>details {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    min-width: 30rem;
    width: 100vw;
    max-width: 50rem;
    min-height: 3rem;
    background-color: var(--paper-color);
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: var(--shadow-top);
}

.page6>details>summary {
    display: flex;
    align-items: center;
    min-height: 3rem;
}

summary {
    /* list-style-type: none; /* Firefox */
    padding: 0 0 0 1rem;
}
  
summary::-webkit-details-marker {
    display: none; /* Chrome */
}

details[open] main {
	animation-name: invisiblyGrowFontSize, fadeIn;
    animation-duration: 500ms, 200ms;
    animation-delay: 0ms, 500ms;
}
  
/* add wrapper, continue with font-size */
@keyframes invisiblyGrowFontSize {
	0% {
        font-size: 0;
        opacity: 0;
	}
	100% {
        font-size: 1em;
        opacity: 0;
	}
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
	100% {
		opacity: 1;
	}
}