@keyframes anim1a {
    0% {transform: scaleY(0.0); border-color: #00000000}
    75% {transform: scaleY(1.0); border-color: #00000000}
    100% {transform: scaleY(1.0); border-color: var(--b1)}
}

@keyframes anim1b {
    0% {transform: scaleY(1.0); border-color: var(--b1)}
    25% {transform: scaleY(1.0); border-color: #00000000}
    100% {transform: scaleY(0.0); border-color: #00000000}
}

@keyframes anim2a {
    from {opacity: 0.0}
    to {opacity: 1.0}
}

@keyframes anim2b {
    from {opacity: 1.0}
    to {opacity: 0.0}
}

@keyframes anim3a {
    from {overflow: hidden;}
    to {}
}

@keyframes anim3b {
    from {}
    to {overflow: hidden;}
}

header {transform: scaleY(0.0); transform-origin: top}
main {transform: scaleY(0.0)}
footer {transform: scaleY(0.0); transform-origin: bottom}

.anim1a {animation: 1s ease-in-out 0s 1 normal both running anim1a;}
.anim1b {animation: 1s ease-in-out 0.25s 1 normal both running anim1b;}

.anim2a {animation: 0.25s ease-in-out 0.75s 1 normal both running anim2a;}
.anim2b {animation: 0.25s ease-in-out 0s 1 normal both running anim2b;}

.anim3a > * {animation: 0.25s ease-in-out 1.25s 1 normal both running anim2a;}
.anim3b > * {animation: 0.25s ease-in-out 0s 1 normal both running anim2b;}

.anim3a {animation: 0s ease-in-out 1.0s 1 normal both running anim3a;}
.anim3b {animation: 0s ease-in-out 0.25s 1 normal both running anim3b;}