/* branding.css */

#oo1_container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: var(--vga-font);
}

#oo1,
#marcinlowercase {
    font-size: 2rem;
    display: flex;
    align-items: center;
    margin: 8px;
    padding: 8px;
    flex: 1 1 0;
    justify-content: center;
    cursor: pointer;
}

#by {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: col-resize;
    user-select: none;
}

#oo1 {
    border: 8px dotted red;
    color: red;
}

#marcinlowercase {
    border: 8px dotted blue;
    color: blue;
}

/* portrait */
@media (max-aspect-ratio: 1/1) {
    #oo1_container {
        flex-direction: column;
    }
    #by {
        cursor: row-resize;
        padding: 20px 0;
    }
    #oo1,
    #marcinlowercase {
        justify-content: center;
    }
}

/* landscape */
@media (min-aspect-ratio: 1/1) {
    #oo1_container {
        flex-direction: row;
    }
}