:root {
    --contentHeight: 30vh;
    --sectionWidth: 700px;
}

* {
    outline: 0px;
    box-sizing: border-box;
}

summary {
    display: block;
    cursor: pointer;
    padding: 10px;
    font-family: "Space Mono", monospace;
    font-size: 22px;
    transition: .3s;
    border-bottom: 2px solid;
    user-select: none;
}

details > div {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    height: 100%;
    user-select: none;
    padding: 0 20px;
    font-family: "Karla", sans-serif;
    line-height: 1.5;
}

details > div > img {
    align-self: flex-start;
    width: 500px;
    height: auto;
    margin-top: 20px;
    object-fit: contain;
}

details[open] > summary {
    color: #0a0a0a;
}

@media (min-width: 768px) {

    details[open] > div {
        animation-name: slideDown;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
    }

    details[open] > div > img {
        opacity: 0;
        height: 100%;
        margin: 0;
        animation-name: showImage;
        animation-duration: 0.3s;
        animation-delay: 0.15s;
        animation-fill-mode: forwards;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        height: 0;
        padding: 0;
    }

    to {
        opacity: 1;
        height: var(--contentHeight);
        padding: 20px;
    }
}

@keyframes showImage {
    from {
        opacity: 0;
        clip-path: inset(50% 0 50% 0);
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: scale(1);
    }
}

@keyframes showContent {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}