:root {
    --bg-color: #f4f7f6; /* Light gray background */
    --bg-inactive: #aaa;
    --fg-inactive: #555;
    --bg-active: #55ee55;
    --fg-active: #333;
    --bg-lost: #e55;
    --section1-bg: #cccccc; /* White */
    --section2-bg: #55ee55; /* White */
    --text-color: #333333; /* Dark gray text */
    --border-color: #e0e0e0; /* Light border */
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
    Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: var(--font-stack);
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* 3. Responsive Grid Layout */
body {
    display: grid;
    /* Default (Landscape): 1 row, 2 equal columns */
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}


section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    overflow: auto;
}
section h1 {
    font-size: 8rem;
}
section:nth-of-type(1) h1{
    rotate: 90deg;
}
section:nth-of-type(2) h1{
    rotate: 270deg;
}
section{
    background-color: var(--bg-active);
    color: var(--fg-active);
}
.lost{
    background-color: var(--bg-lost);
}
.inactive{
    background-color: var(--bg-inactive);
    color: var(--fg-inactive);
}
#menu-btn{
    position: absolute;
    top: 1rem;
    right: initial;
    left: calc(50vw + 1rem);
    z-index: 1;
    rotate: 90deg;
}
#modal-container{
    position:absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:-1;
}
#modal-overlay{
    background-color: #eee;
    border: solid 2px black;
    rotate:270deg;
}
#modal{
display:flex;
flex-direction: column;
align-items: center;
}
.input-group{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.input-group > input {
    width: 40%;
}
@media (orientation: portrait) {
    body {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
    }
    section:nth-of-type(1) h1{
        rotate: 180deg;
    }
    section:nth-of-type(2) h1{
        rotate: 0deg;
    }
    #menu-btn{
        top: calc(50vh + 1rem);
        left: initial;
        right: 1rem;
        rotate: 0deg;
    }
    #modal-overlay{
        rotate:0deg;
    }
}