/* ---- Page ---- */
body{
    font-size: 130%;
    font-family: system-ui;
    color: black;
    letter-spacing: -1px;
    background-color: #f0f0f0;
    margin:auto;
    text-align:center;
}

h1{
  width: max-content;
  font-size: 200%;
  padding: 0;
  margin: 0;
}
h2{
  max-width: 100%;
  font-size: 150%;
  padding: 0;
  margin: 0;
  text-align: justify;
}

a{
  text-decoration: none;
  color: blue;
}
a:hover{
    color: #4d4fff;
}

p{
    padding:0px 0px 0px 0px;
    width:fit-content;
    margin:0px;
}

table{
    min-width:0px;
    min-height:0px;
}
td{
  min-width:0px;
  min-height:0px;
  max-width:25cm;
  padding-left:10px;
  padding-right:10px;
  text-align:center;
}
hr{padding:0px;}
main{
    text-align: justify;
    text-justify:inter-word;
    font-size: 100%;
    font-weight:100%;
    max-width:100%;
}

.MathJax:focus, .mjx-chtml:focus, .MathJax_SVG:focus{
    margin:-30px 0px;
}

/* ---- Title, name and link back to the homepage (one version for desktops, one for phones) ---- */
.backlink{
    text-align:left;
    padding:0;
    margin:0;
    position:absolute;
    margin-left:1%;
    font-size:150%;
}

.desktop-only-intro{
    h1.title{
        margin-left: auto;
        margin-right: auto;
        font-size: 280%;
    }
    table.headtable{
        display:inline;
        text-align:center;
        padding:0px;
        margin-left:auto;
        margin-right:auto;
        min-height:0px;
        max-width:95vw;
        td{
            min-width:0px;
            min-height:0px;
            max-width:30vw;
            padding-left:10px;
            padding-right:10px;
            text-align:center;
        }
    }
    .names{
        font-size:120%;
        font-weight:600;
        color:#4066b3;
    }
    .email{
        margin-left: auto;
        margin-right: auto;
        padding: 0px 0px 0px 0px;
        font-size: 100%;
        a{color: #4066b3;}
        a:hover{color: blue;}
    }
}
.mobile-only-intro{
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
}
.mobile-only-intro h1.title{
    max-width:90vw;
    margin-left: auto;
    margin-right: auto;
    font-size:130%;
}
.mobile-only-intro .backlink{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:93%;
}
.mobile-only-intro .email{
    margin-left: auto;
    margin-right: auto;
    padding: 0px 0px 0px 0px;
    font-size: 85%;
    color: #4066b3;
}
.mobile-only-intro .names{
    font-size:110%;
    font-weight:600;
    color:#4066b3;
}
.mobile-only-intro table.headtable{
    display:inline;
    text-align:center;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    min-width:0px;
    min-height:0px;
    max-width:90vw;
    font-size:80%;
    td{
        min-width:0px;
        min-height:0px;
        padding-left:10px;
        padding-right:10px;
        text-align:center;
    }
}

.desktop-only-intro{display:block;}
.mobile-only-intro{display:none;}
@media (pointer:coarse){
    .desktop-only-intro{display:none;}
    .mobile-only-intro{display:block;}
    h2 {letter-spacing: -0.5px;}
    h1 {letter-spacing: -0.5px;}
}

/* ---- Frames: the description, and the lattice with its controls ----
   A frame decides the width of everything inside it:
   960 pixels, or half of the window if that is more, but never wider than the window. */
.maintable{
    width: min(96vw, max(960px, 50vw));
    margin-left:auto;
    margin-right:auto;
    border-spacing:0px 20px;
    font-size:80%;
}
.maintable tr{
    background-color: #e3dcea;
    outline: #5b3a82 5px solid;
    border-radius:10px;
}

/* ---- Button underneath the description ---- */
.clickables {
  transition-duration: 0.4s;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0.5em;
  cursor: pointer;
  border-radius: 10px;
  color: white;
}
.clickables:hover {
  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}
a.clickables{
    font: inherit;
    font-size: 90%;
    background-color: #5b3a82;
    border: 0px #5b3a82;
}
a.clickables:hover{
  color: white;
}
.explanation{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    padding:0px;
}

/* ---- Lattice ----
   The lattice fills the width of its frame. The canvas has one pixel for every site, and is stretched over
   the frame without blurring, so every site is a sharp square. */
/* The cell which holds the lattice and its controls has no space around the lattice */
.maintable td.stage{padding: 0 0 10px 0;}
.gif-container{
    aspect-ratio: 1000 / 600;
    width:100%;
    position:relative;
    z-index:1;
    overflow: hidden;
    /* The lattice reaches the top, left and right edges of its frame, so the border of the frame is its border too
       (and its top corners are rounded like those of the frame). Only underneath does it need a line of its own. */
    border-bottom: 5px solid #5b3a82;
    border-radius: 10px 10px 0 0;
    background: #440154;
}
.responsive-canvas{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* ---- Colours of the states s = 0, 1, 2, 3, 4 (on the buttons and in the bar of populations) ---- */
.s0{background-color: #440154;}
.s1{background-color: #fde725;}
.s2{background-color: #21918c;}
.s3{background-color: #31688e;}
.s4{background-color: #7ad151;}

/* ---- Control panel ----
   Underneath the lattice: the bar of populations over the full width, and then two columns of panels.
   A panel is a small label and one or two rows of controls, with no box around it: the labels and the
   white space keep the panels apart.
   Buttons are white until they are switched on. */
.controls{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 14px;
    margin: 16px 12px 4px 12px;
    text-align: left;
    letter-spacing: 0;
    font-size: 15px;
    color: #222222;
}
.controls-column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;     /* both columns are as high as the higher one, and their panels are spread over that height */
    gap: 14px;
    min-width: 0;
}
/* A panel which runs over both columns */
.panel.wide{grid-column: 1 / -1;}
.panel-title{
    margin: 0 0 6px 1px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #222222;
}
/* A remark at the right end of a label, in ordinary letters (the value of the slider underneath) */
.panel-note{
    float: right;
    margin-right: 1px;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 12.5px;
    line-height: 20px;          /* sits on the same line as the label, which is larger */
    color: #5f5668;
}
.button-row{
    display: flex;
    align-items: center;
    gap: 8px;
}
.button-row + .button-row{margin-top: 8px;}
/* Every button in a row gets the same share of the width */
.btn{
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    font: inherit;
    font-size: 17px;            /* buttons which hold a symbol */
    letter-spacing: 0;
    color: #222222;
    background-color: #ffffff;
    border: 1px solid #c4bccb;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn.text{font-size: 14.5px;}   /* buttons which hold words */
.btn:hover{background-color: #f1edf5;}
/* The chosen number of states, the chosen lattice, and the value on which a slider sits */
.btn.is-active, .btn.is-active:hover{background-color: #cdbbe0; border-color: #9c7fbd;}
/* The pause button while the animation is paused */
#pausePlay.is-active, #pausePlay.is-active:hover{background-color: #ffaa00; border-color: #e09600;}
/* Square buttons which hold an icon */
.btn.icon{flex: 0 0 40px; padding: 0;}
.btn .material-icons{font-size: 24px;}
/* The colours of the states on a button: one small square for each */
.swatches{display: flex;}
.btn.q{font-size: 15px; gap: 5px;}     /* small enough for q = 5 and its five squares to fit */
.swatches span{
    width: 7px;
    height: 7px;
    border: 1px solid #222222;
    margin-left: -1px;          /* neighbouring squares share a border */
}
/* A slider with its label takes up the rest of its row */
.slide{
    flex: 1 1 0;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: #222222;
}
.slide input{
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    accent-color: #5b3a82;      /* the slider has the purple of the frame of the lattice */
}
/* The bar of populations: as high as a button, and shared between the states */
.population{
    flex: 1 1 0;
    height: 40px;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #222222;
    border-radius: 6px;
    background-color: #ffffff;
}
.population span{height: 100%;}
/* The widths of the pieces are rounded to whole pixels, so together they can fall just short of the bar:
   the last piece takes up whatever is left */
.population span:last-child{flex-grow: 1;}
/* Narrow screens: one column, and rows of many buttons may wrap */
@media (max-width: 640px), (pointer:coarse){
    .controls{grid-template-columns: 1fr;}
    .button-row{flex-wrap: wrap;}
    .btn.q, .btn.t, .btn.h{flex: 1 1 40%;}
}