/* For personal use only.  Not licensed. */

/* Style parameters for the Life web page. */

/*
* {
    touch-action: manipulation;
}
*/

body {
    background-color: #FFFFF8;
    font-size: 20px;
    height: 100vh;  /* Ensure the body fills the viewport */
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 32px;
}

button {
    font-size: 18px;
}

select {
    font-size: 18px;
}

/* div for entire web page */
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;  /* top right bottom left */
}

.heading {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 0 0 0;
}

/* div containing left controls, universe display, and right controls */
.content {
    display: flex;
    flex-grow: 1;
    margin-bottom: 20px;
    user-select: none;
}

/* Left side editing controls */
.left {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 20px 0 20px;  /* top right bottom left */
}

.preview-container {
    display: grid;
    border: 2px black solid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
}

.preview-container #previous {
    grid-column: 1;
    grid-row: 1 / 3;
}

.preview-container #next {
    grid-column: 3;
    grid-row: 1 / 3;
}

.preview-container canvas {
    grid-column: 2;
    grid-row: 1;
}

.preview-container label {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.preview-controls {
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
}

.preview-controls button {
    font-size: 24px;
    font-weight: bold;
    width: 50px;
}

.nodrag {
    background-color: #F0F0F0;
    pointer-events: none;
}

.button-stack {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    align-items: center;
    justify-items: center;
    gap: 20px;
}

/* Universe display */
.center {
    display: flex;
    flex-grow: 1;
    min-width: 100px;
    min-height: 100px;
    justify-content: center;
    align-items: center;
    touch-action: none;  /* disable default touch actions (pan/zoom) */
    user-select: none; /* prevent long touch from selecting */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
}

.center canvas {
    min-width: 0;  /* allows container div to shrink */
    min-height: 0;
    border: 2px black solid;
    background-color: ivory;
}

/* Right side run controls */
.right {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 20px 0 20px;  /* top right bottom left */
}

.readout {
    border: 2px solid;
    text-align: right;
    /*font-weight: bold;*/
    font-size: 1.5em;
    padding: 5px;
    margin-bottom: 20px;
}

.speed-container {
    display: flex;
    flex-grow: 1;
    margin-top: 20px;
}

.speed-container label{
    align-self: center;
}

#speed {
    writing-mode: vertical-lr;
    direction: rtl;
}

datalist {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

/*.footer {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    margin: 10px 0 20px 0;*/
/*}*/