:root {
    --nav-height: 46px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
}

nav {
    height: var(--nav-height);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  background-color: #333333;
}

nav li {
  height: 100%;
}

/* Push the physics toggle to the far right */
nav ul li.physics-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: white;
}

.physics-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    cursor: pointer;
    white-space: nowrap;
}

.physics-toggle input {
    margin: 0;
    cursor: pointer;
}

nav ul li a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  color: white;
  text-align: center;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #111111;
}

#sketch-container {
    width: 100%;
    height: calc(100vh - var(--nav-height));
    /* overflow: hidden; */
}