sass.sass

@import "typography.css"
html
  font-size: 94.75%

body
  font-family: Arial, sans-serif
  margin: 0

.container
  display: -webkit-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex
  flex-direction: column
  flex-wrap: nowrap
  align-items: center
  padding: 3rem 0
  box-sizing: border-box

.sass-introduction
  border: 0.05rem solid #521751
  background: #fae5ff
  padding: 2rem
  text-align: center
  box-shadow: 0.2rem 0.2rem 0.1rem #ccc
  width: 90%
  box-sizing: border-box


  & p
    margin: 0

.sass-details
  border: 0.05rem solid #521751
  background: #fae5ff
  padding: 1rem
  text-align: center
  margin: 2rem 0
  width: 90%
  box-sizing: border-box

.section-header
  border-bottom: 0.05rem solid #521751


  & h1
    margin: 0 0 1rem 0

.documentation-links
  list-style: none
  margin: 1rem 0 0 0
  padding: 0
  display: -webkit-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex
  flex-direction: column


  & li
    margin: 0.2rem 0
    background: white


  & .documentation-link
    text-decoration: none
    color: #521751
    display: block
    padding: 0.2rem
    border: 0.05rem solid #521751


  & .documentation-link:hover,

  & .documentation-link:active
    color: white
    background: #fa923f
    border-color: #fa923f

@media (min-width: 40rem)
  html
    font-size: 125%

  .container
    padding: 3rem 0

  .sass-introduction,
  .sass-details
    width: 30rem