// General elements and overall layout

@import colours

body
  background: #ffffff
  min-width: 400px

p
  margin: 0 0 2em 0

hr
  border: 0
  border-bottom: solid 2px $light-gray
  margin: 2em 0

summary
  cursor: pointer

#main
  margin-left: calc(60% - 27em)
  max-width: 54em
  padding: 8em 4em 4em 4em
  width: calc(100% - 20%)

  @media screen and (max-width: 1280px)
    margin-left: 30%
    max-width: none
    padding: 6em 3em 3em 3em
    width: calc(100% - 30%)

  @media screen and (max-width: 980px)
    margin: 0
    padding: 6em 4em
    width: 100%

  @media screen and (max-width: 736px), screen and (max-height: 700px)
    padding: 2.25em 1.5em 0.25em 1.5em

  & > section
    border-top: solid 2px $light-gray
    margin: 4em 0 0 0
    padding: 4em 0 0 0

    @media screen and (max-width: 736px), screen and (max-height: 700px)
      margin: 2.25em 0 0 0
      padding: 2.25em 0 0 0

    &:first-child
      border-top: 0
      margin-top: 0
      padding-top: 0