-html, *
- font-family: "Open Sans", Arial, sans-serif
- --back-color: #f2f2f2
- --a-link-color: blue
- --a-visited-color: blue
-
-body
- padding: 0
- min-width: 320px
-
-.container
- padding: 0
- overflow: hidden
-
-div
- padding: 0
-
-.section-content
- *
- margin-left: auto
- margin-right: auto
- max-width: 767px
- figure.diagram-container
- max-width: 1000px
- @media screen and (max-width: 767px)
- max-width: 100%
- padding: 0 5px
-
-@media screen and (max-width: 767px)
- .button-group
- flex-direction: row
- button:not(:first-child)
- border-left: 1px solid var(--button-group-border-color)
- border-top: 0
-
-.right-menu
- float: right
- @media screen and (max-width: 767px)
- .info-container
- p
- margin-right: 5px
-
-a.right-menu
- &:link, &:visited, &:hover
- color: black
-
-#settings, #contactForm
- max-width: 767px
- @media screen and (max-width: 767px)
- max-width: 100vw
-
-#emailSent
- color: blue
- display: none
-
-a
- text-decoration: underline
-
-.text-center
- text-align: center
-
-.smallpad
- padding: 5px
-
-.emphasis
- font-style: italic
-
-.clickable
- cursor: pointer
-
-.clearer
- clear: both
-
-.red
- color: #cc3300
-
-.purple
- color: purple
-
-.smallfont
- font-size: 0.8em
-
-.bigfont
- font-size: 1.2em
-
-.bold
- font-weight: bold
-
-[type="checkbox"].modal+div .card
- max-width: 767px
- max-height: 100vh
-[type="checkbox"].modal+div .card.small-modal
- max-width: 320px
-[type="checkbox"].modal+div .card.big-modal
- max-width: 90vw