style.css

/*
two-neurons-worm
This is a project for creating a worm that find it's food using two neurons:
https://phys.org/news/2018-07-reveals-complex-math-worms-food.html

Copyright (C) 2017  Luiz Eduardo Amaral - <luizamaral306@gmail.com>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
a:link, a:visited, a:hover, a:active {
  color: #EEE;
  text-decoration: underline;
}

html, body {
  background-color: #222;
  color: #EEE;
  font-family: "monospace, Courier New", Courier, "Lucida Console", Monaco;
  font-size: 14px;
  height: 100%;
  margin: 0;
  padding: 0;
  text-shadow: 0 0 1em #888;
}

hr {
  border-color: #555;
  width: 15em;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content:space-around;
}

.container>div {
  flex: 1;
}

.left-pane {
  margin-left: 8em;
  margin-right: 2em;
  order: 1;
}
.right-pane {
  margin-left: 2em;
  margin-right: 8em;
  order: 4;
}
.main-div {
  margin-top: 1em;
  order: 2;
  text-align: center;
}

.main-canvas {
  background-color: #222;
  border-color: #444;
  border-radius: 1em;
  border-style: solid;
  border-width: 0.5em;
  box-shadow: 0 0 10px #555, 0 0 10px #555 inset;
}

.cursor-pointer {
  cursor: pointer;
}

.underline {
  text-decoration: underline;
}

.hide {
  display: none;
}

.run-btn {
  font-size: 3em;
  padding: 0.1em 0.5em 0.1em 0;
}

.active-btn {
  color: #888;
}

.run-btn:hover {
  color: #888;
}

.run-btn:active {
  color: #444;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                        supported by Chrome and Opera */
}

.footer {
  text-align: center;
}

svg {
  display: block;
}

.global-settings-table>tbody>tr>td, th {
  padding-left: 0;
}

.global-settings-table>tbody>tr>td:first-child, th:first-child {
  padding-right: 5em;
}

.global-settings-control {
  font-size: 1.2em;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.slidecontainer>p {
  margin-bottom: 0.1em;
}

.worm-svg {
  /* height: auto; */
  -webkit-filter: drop-shadow(0 0 10px #0F0);
  filter: drop-shadow(0 0 10px #0F0);
  transform: rotate(-90deg);
  width: 30em;
}

@media screen and (max-width: 1617px) and (min-width: 1218px) {
  .main-canvas {
    height: 500px;
    width: 500px;
  }
}
@media screen and (max-width: 1217px) {
  .main-div {
    min-width: 100%;
  }
  .left-pane {
    margin-top: 2em;
    order: 3;
  }
  .hidden-title {
    display: block;
  }
  .title {
    display: none;
  }
}