:root,
html,
body {
    width: 100%;
    height: 100%;
    font-family: "Fira Mono", monospace;
    margin: 0px;
    padding: 0px;

    font-weight: 700;
    font-size: 16px;

    background-color: antiquewhite;

    --background: bisque;
    --accent: coral;
    --white: white;
    --black: black;

    overflow: hidden;
}

@view-transition {
    navigation: auto;
}

.grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: calc((100vw - 512px)/2) 512px calc((100vw - 512px)/2);
    grid-template-rows: calc((100vh - 512px)/2) 512px calc((100vh - 512px)/2);

    transition: all 1s ease-in-out;
}

@media (orientation: landscape) {
    .grid.fullscreen {
        grid-template-columns: calc((100vw - 100vh)/2) 100vh calc((100vw - 100vh)/2);
        grid-template-rows: 0px 100vh 0px;
    }
}

@media (orientation: portrait) {

    /* vh > vw */
    .grid.fullscreen {
        grid-template-columns: 0px 100vw 0px;
        grid-template-rows: calc((100vh - 100vw)/2) 100vw calc((100vh - 100vw)/2);
    }
}

.grid>.corner {
    grid-column: 2;
    grid-row: 2;

    margin-left: auto;
    width: 48px;
    height: 48px;
    transition: all 0.2s ease-in-out;
    background-color: var(--accent);
    z-index: 100;
}

.grid>.corner:hover {
    width: 64px;
    height: 64px;
}


.grid>.slot-r,
.grid>.slot-l {
    grid-column: 2;
    grid-row: 2;

    margin-left: auto;
    margin-right: 16px;
    margin-top: auto;
    margin-bottom: 16px;

    width: 16px;
    height: 8px;
    transition: all 0.2s ease-in-out;
    background-color: var(--accent);
    z-index: 100;
}

.grid>.slot-r {
    margin-left: auto;
    margin-right: 16px;
    margin-top: auto;
    margin-bottom: 16px;
}


.grid>.slot-l {
    margin-left: 16px;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: 16px;
}

/* Top row */
.grid>.top-left {
    grid-column: 1;
    grid-row: 1;
}

.grid>.top {
    grid-column: 2;
    grid-row: 1;
}

.grid>.top-right {
    grid-column: 3;
    grid-row: 1;
}

/* Middle row */
.grid>.left {
    grid-column: 1;
    grid-row: 2;
}

.center {
    grid-column: 2;
    grid-row: 2;
    background-color: var(--background);
}

.grid>.right {
    grid-column: 3;
    grid-row: 2;
}

/* Bottom row */
.grid>.bottom-left {
    grid-column: 1;
    grid-row: 3;
}

.grid>.bottom {
    grid-column: 2;
    grid-row: 3;
}

.grid>.bottom-right {
    grid-column: 3;
    grid-row: 3;
}

a {
    color: var(--black);
    text-decoration: none;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    box-sizing: border-box;

    font-family: "Fira Mono", monospace;
    font-weight: 700;

    background-color: transparent;
    padding: 8px;
    border: none;
    border-bottom: var(--black) 2px solid;
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
}

button::before {
    content: "> ";
}

button {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 16px;

    font-family: "Fira Mono", monospace;
    font-weight: 700;

    padding: 8px;
    color: var(--black);
    background-color: transparent;
    border: var(--black) 2px solid;
}

input+button {
    border-top: none;
}

button:hover {
    color: var(--white);
    background-color: var(--accent);
}

footer {
    position: absolute;
    right: 16px;
    bottom: 16px;

    opacity: 0.5;
}

:root:has(.grid.fullscreen) footer {
    opacity: 0;
}