body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: ArtifaktElement;
}

#header, #preview, #overlay {
    position: absolute;
    width: 100%;
}

#header {
    height: 3em;
    display: flex;

    flex-flow: row;
    justify-content:space-between;
    align-items: center;
    background-color:#00AE42;

}

#preview, #overlay {
    top: 3em;
    bottom: 0;
}

#overlay {
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1em;
    display: none;
}

#overlay > .notification {
    margin: auto;
    padding: 1em;
    max-width: 50%;
    background: white;
}

#header > * {
    margin: 5em auto;
    font-size: 1em;
    font-family: ArtifaktElement;
    color: #ffffff;
}

#models {
    padding: 0.5em 1em;
    font-family: ArtifaktElement;
    font-size: 1rem;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    background-color: color-mix(in srgb, #00AE42 85%, black 15%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;

}

.logo-coarco{
    height: 2.5em; /* o más, según necesites */

}