:root {
  --a: #6C00F0;
  --b: #4558F7;
  --c: #4B81E0;
  --d: #45B5F7;
  --e: #42DBED;
}

.Color-Theme-1-rgba { color: rgb(95, 66, 237, 1); }
.Color-Theme-2-rgba { color: rgb(69, 88, 247, 1); }
.Color-Theme-3-rgba { color: rgb(75, 129, 224, 1); }
.Color-Theme-4-rgba { color: rgb(69, 181, 247, 1); }
.Color-Theme-5-rgba { color: rgb(66, 219, 237, 1); }

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

body {
  height: 100vh;
  margin: 0;
}

.header {
  margin: 12px 24px 18px;
  position: relative;
}

.header-h1 {
  font-size: 22px;
  margin: 18px 0;
}

.header-h1::after {
  content: '';
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: black;
  margin-top: 17px;
}

.home-link {
  color: var(--b);
  display: inline-block;
  margin-bottom: 12px;
}

a.home-link::after {
  content: '';
  display: block;
  position: absolute;
  height: 1px;
  width: 50%;
  min-width: 200px;
  background-color: black;
  margin-top: 11px;
}

.sierpinski {
  padding: 24px;
}

.container {
  margin: 0 24px;
  overflow: hidden;
}

.container-tagline {
  margin-top: 0;
}

.stegosaurus {
  display: flex;
  flex-direction: column;
}

.button {
    background-color: rgb(239 239 239);
    border: 2px solid gray;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    padding: 4px 8px;

    margin: 10px 10px 10px 0px;

    position: relative;
}

.navbar {
  display: flex;
}

.layout {
  height: 100%;
}

.layout {
  display: grid;
  grid-template-columns: [first] 1fr;
  grid-template-rows: 90px 1fr 90px;
}

.navbar > *:not(:last-child) { margin-right: 20px; }

.page { margin-top: 20px; }