/* ---- 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 chamber 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: #dddddd;
    outline: #444444 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);
}
.clickables.broken{
    cursor:default;
}
.clickables.broken:hover {
  box-shadow: inset 0 0 0 10em #444444;
}
a.clickables{
    font: inherit;
    font-size: 90%;
    background-color: #444444;
    border: 0px #6d3f99;
}
a.clickables:hover{
  color: white;
}
.explanation{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    padding:0px;
}

/* ---- Chamber ----
   The chamber fills the width of its frame, and the two canvases (the solid objects, and the mist on top of them)
   fill the chamber exactly. */
/* The cell which holds the chamber and its controls has no space around the chamber */
.maintable td.stage{padding: 0 0 10px 0;}
.gif-container{
    aspect-ratio: 1000 / 600;
    width:100%;
    position:relative;
    z-index:1;
    overflow: hidden;
    /* The chamber 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 #444444;
    border-radius: 10px 10px 0 0;
    background: black;
}
.responsive-canvas{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---- Control panel ----
   Two columns of three panels underneath the chamber. A panel is a small label and one row of buttons,
   with no box around it: the labels and the white space keep the panels apart.
   Buttons are white until they are pressed or switched on, and each kind of button then has its own colour. */
.controls{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    margin: 16px 12px 4px 12px;
    text-align: left;
    letter-spacing: 0;
    font-size: 15px;
    color: #222222;
}
.controls-column{
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.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 (how much the animation is slowed down) */
.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: #6b6b6b;
}
.button-row{
    display: flex;
    align-items: center;
    gap: 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;
    white-space: nowrap;
    font: inherit;
    font-size: 21px;            /* buttons which hold a symbol */
    letter-spacing: 0;
    color: #222222;
    background-color: #ffffff;
    border: 1px solid #c9c9c9;
    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.event{font-size: 17px;}
.btn.s{font-size: 12.5px; padding: 0 2px;}     /* five source buttons share a row, so their labels are the smallest */
.btn:hover{background-color: #efefef;}
.btn:disabled{cursor: default; color: #222222;}
/* The selected magnetic field */
.btn.f.is-active, .btn.f.is-active:hover{background-color: #aaaaaa; border-color: #aaaaaa;}
/* Toggles which are switched on: Random particles and the sources */
.btn.is-active, .btn.is-active:hover{background-color: #ffd700; border-color: #e0bd00;}
/* The pause button while the animation is paused, and Random particles while it waits for the animation to resume */
#pausePlay.is-active, #pausePlay.is-active:hover,
.btn.is-paused, .btn.is-paused:hover{background-color: #ffaa00; border-color: #e09600;}
/* For a moment after a click on a button which is not a toggle: green for an event,
   red for a negative particle and blue for a positive one */
.btn.is-flash{background-color: #aaffaa;}
.btn.is-flash-negative{background-color: #ffaaaa;}
.btn.is-flash-positive{background-color: #aaaaff;}
/* Square buttons which hold an icon */
.btn.icon{flex: 0 0 40px; padding: 0;}
.btn .material-icons{font-size: 24px;}
/* The speed slider takes up the rest of its row */
.speed{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: #222222;
}
.speed input{
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    accent-color: #444444;      /* the slider has the dark grey of the frame of the chamber */
}
/* Narrow screens: one column, and rows of many buttons may wrap */
@media (max-width: 640px), (pointer:coarse){
    .controls{grid-template-columns: 1fr; row-gap: 14px;}
    .button-row{flex-wrap: wrap;}
    .btn.s{flex: 1 1 30%; font-size: 14.5px;}
}