* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgb(218, 218, 218),; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--link-color); 
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(242, 242, 242);
  margin: 15px 10%;
  margin-bottom: 0px;
  background-image: linear-gradient(
    to right, 
    rgb(230, 230, 230), 
    #ffff0000, 
    #ffff0000, 
    #ffff0000, 
    #ffff0000, 
    rgb(230, 230, 230)
  );

  --link-color: rgba(75, 192, 192, 1);
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
}

hr {
  width: calc(100vw - 120px);
  border: none;
  border-top: 1px solid #a8a8a8;
  margin: 0;
}

hr.start {
  margin-top: 1em;
}
hr.end {
  margin-bottom: 1em;
}

body pre, body code {
  max-width: 100%;
  background-color: rgb(51, 51, 51) !important;
  text-shadow: none !important;
  color:#eeeeee !important;
  border-radius: 10px;
  line-height: 1.3 !important;
  font-family: revert !important;
}

body pre .token{
  background: none !important;
}

body > p {
  max-width: 700px;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.hint {
  padding: 1em;
  margin-top: calc(0.5em + 10px);
  border: 1px solid #686868;
  background-color: rgb(213, 212, 212);
  border-radius: 10px;

  position: relative;
}

.hint::after {
  content: "i";
  border-radius: 100%;
  border: 1px solid #686868;
  background-color: rgb(213, 212, 212);
  color: var(--link-color);
  position: absolute;

  top: -10px;
  left: -10px;

  width: 20px;
  height: 20px;
  line-height: 20px;

  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}

select {
  border-radius: 5px;
  border: 1px solid #a8a8a8;
}

canvas {
  margin-bottom: 40px;
}

.sim .force-field {
  position: absolute;
  top: 0;
  left: 0;

  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#selectionOptions {
  margin-top: 1em;
}

.square {
  height: calc(var(--width) * 1px);
  width: calc(var(--width) * 1px);
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  border: 1px solid #ffffff12;
  box-sizing: border-box;
  transition: background-color 1s;
  z-index: 1;

  pointer-events: none;
}

.square.updating {
  background-color: rgba(0, 196, 0, 0.351);
  transition: background-color 0s;
}

.particle {
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  position: absolute;
  z-index: 1;
}

.particle::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background-color: red;
  display: block;
  transform: translate(-50%, -50%);
}

.particle.updating::after {
  background-color: rgb(255, 153, 0);
}

.particle.centerOfGravity::after {
  background-color: blue;
}

.particle.centerOfGravity.original::after {
  background-color: green;
}

.particle.centerOfGravity {
  z-index: 2;
}

.simHolder {
  max-width: 100%;
  overflow: auto;
  margin: 15px;
  margin-bottom: 25px;
  border-radius: 10px;

}

.sim {
  position: relative;
  background-color: rgb(51, 51, 51);

  border-radius: 10px;
  overflow: hidden;
}

.sim > .reset {
  position: absolute;
  height: 25px;
  width: 25px;
  border-radius: 25%;
  top: -30px;
  background-color: #ffffff40;

  border: 1px solid white;

  left: 10px;
  transition: top 0.5s ease-in-out;
}

.sim:hover > .reset {
  top: 10px
}

.reset {
  cursor: pointer;
  z-index: 5;
  background-image: url(./assets/reset.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

a {
  color: var(--link-color);
}

footer {
  color: #a8a8a8;
}

footer p {
  margin-block-start: 2em;
  margin-block-end: 2em;
  font-size: 0.8em;
}

.force-equation {
  margin: 10px 0;
}