@import "court.css";
@import "theme/default.css";
@import "player.css";
@import "tactic.css";

#visualizer {
    display: flex;
    height: 100%;
    width: 100%;
    background-color: var(--background-color);

    flex-direction: column;

    overflow: hidden;
}

#editor-div {
    height: 100%;
}

.curtain {
    width: 100%;
    height: 100%;
}

#content-div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#header-page {
    width: 100%;
    display: flex;
    background-color: var(--main-color);
    justify-content: flex-end;
    align-content: flex-end;
}

#header-page-right {
    display: flex;
    user-select: none;
    align-self: flex-end;
    height: 100%;
}

#title {
    align-self: center;
    margin: 0;
    user-select: none;

    position: absolute;
    width: 100%;

    text-align: center;
    pointer-events: none;
}

#topbar {
    display: flex;
    background-color: var(--main-color);
    justify-content: center;
    align-items: center;
}

#steps-div {
    background-color: var(--editor-tree-background);
    overflow: scroll;
    height: 100%;
}
