html {
    font-size: calc(16px + 0.5vh);
}

@media (max-width: 868px) {
    html {
        font-size: calc(14px + 1vw);
    }
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: #101010;
}

p {
    margin: 0;
    padding: 0;
	font-family:hack;
}

div {
	box-shadow:0 0 0px #FFFFFF33;
}
input {margin:0px;padding:0px;}

textarea {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; /*remove the resize handle on the bottom right*/

  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#screen {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Three columns: left and right equal, middle twice as wide */
    height: 100vh; /* Full viewport height */
    gap: 10px; /* Space between columns */
    box-sizing: border-box; /* Ensure padding doesn't affect grid sizing */
}

#left, #middle, #right {
    padding: 20px;
    color: #E5E5E5; /* For visibility */
}

#left {
    background-color: #101010; /* Dark blue for left */
}

#middle {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    background-color: #101010; /* Slightly lighter for middle */
    box-sizing: border-box; /* Ensure padding doesn't affect flex sizing */
}

#right {
    background-color: #101010; /* Dark blue for right */
}

#mobile_nav {
    display: none; /* Hidden by default in 3-column layout */
}

#square_above, #square_below {
    flex: 1; /* Take available space above and below */
    width: 100%; /* Full width of middle column */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
}

#square {
    width: 60%; /* Adjust size relative to middle column */
    aspect-ratio: 1 / 1; /* Ensures square shape (width = height) */
    background-color: #101010; /* Red for visibility */
    display: flex;
    align-items: center; /* Center content inside square */
    justify-content: center; /* Center content inside square */
}

/* Responsive design for portrait orientation */
@media (max-aspect-ratio: 1/1) {
    #screen {
        grid-template-columns: 1fr; /* Single column */
        gap: 0; /* Remove gap for portrait to avoid extra spacing */
        padding: 0; /* Ensure no padding on grid container */
    }
    #left, #right {
        display: none; /* Hide left and right columns */
    }
    #middle {
        width: 100%; /* Middle column takes full width */
        padding: 0; /* Remove padding to ensure symmetry */
        margin: 0; /* Remove any potential margins */
    }
    #mobile_nav {
        display: flex; /* Show mobile nav in portrait */
        width: 100%; /* Full width of middle column */
        background-color: #090909; /* Darker shade for nav bar */
        padding: 10px; /* Padding for content */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        min-height: 50px; /* Fixed height for top bar */
        box-sizing: border-box; /* Ensure padding doesn't affect width */
		display:none;
    }
    #square {
        width: 80%; /* Larger square in portrait for better visibility */
        margin: 0 auto; /* Explicitly center the square horizontally */
    }
    #square_above, #square_below {
        padding: 10px; /* Add padding to content areas for better spacing */
    }
}