penguin.styl

#readymade
  background: #222

#readymade .readymade-site-background
  opacity: 0.1

#readymade[data-location-hash="#/"]
  #main-content
    margin: 2em 0
    width: 100%

  .readymade-site-background
    opacity: 1

body
  position: relative

#background-image-attribution
  bottom: 0.5em
  position: absolute
  font-size: 10px
  right: 0.5em
  opacity: 0.4

  &:hover
    opacity: 0.6

  a
    color: inherit
    text-decoration: none

#readymade
  .readymade-home-page-content
    text-align: center

  &[data-location-hash="#/classify"]
    .readymade-main-stack
      width: 95vw

  [data-readymade-page="competition"] > * // Translated element
    display: flex
    padding: 3em 5em

    & > section
      flex: 5

      & + section
        flex: 2
        margin-left: 3vw

  [data-readymade-page="science"] > * // Translated element
    background: rgba(white, 0.8)
    color: black
    display: flex
    padding: 3em 5em

    & > section
      flex: 5

      & + section
        flex: 2
        margin-left: 3vw

    h1
      margin: 0

    figure
      background: #fff
      box-shadow: 0 1px 5px -3px black
      margin: 3em 0
      padding: 1vw

      img,
      video
        width: 100%

    figcaption
      color: #666
      font-size: 12px
      font-weight: bold
      text-align: center

    img
      display: block
      margin: 0 auto
      max-width: 100%

    a
      color: #09f

      &[href="https://www.campaign.ox.ac.uk/page.aspx?pid=3091"]
        background: darken(lime, 20%)
        border-radius: 3px
        box-shadow: 0 1px 1px rgba(black, 0.3)
        color: white
        display: inline-block
        font-weight: bold
        letter-spacing: 1px
        margin-left: 0.1em
        padding: 0.2em 1.5em
        text-decoration: none
        text-shadow: 0 -1px 1px rgba(black, 0.2)
        text-transform: uppercase

        &:hover
          background: darken(lime, 10%)

.readymade-api-info-container
  display: inline-block
  margin: 0 1em
  font-size: 14px
  text-transform: uppercase
  letter-spacing: 2px

.readymade-subject-viewer .marking-surface-svg
  transform: translateZ(0)

.nesting-area
  cursor: not-allowed
  fill: black
  fill-opacity: 0.75
  stroke: white
  stroke-width: 0

.pinpoint
  cursor: move

.marking-surface-tool-controls .decision-tree-choice
  white-space: nowrap

  .readymade-choice-image img
    border-radius: 50%
    width: 48px
    height: 48px

.count-badge
  background: rgba(black, 0.75)
  border-radius: 1em
  box-sizing: border-box
  display: inline-block
  font-size: 10px
  font-weight: bold
  float: right
  height: 2em
  line-height: 2em
  margin-right: 3px
  min-width: 2em
  padding: 0 3px
  text-align: center

  &[data-count="0"]
    display: none

// Competition component
.competition
  background: rgba(black, 0.6)
  color: white
  font-smoothing: antialiased
  margin: 2em 0
  padding: 3em 0
  text-align: center

.competition-container
  margin: 0 auto
  max-width: 880px
  padding: 0 1em
  a
    color: white
    font-weight: bold
    text-decoration: none

.competition-header-text
  font-size: 30px
  font-weight: 300
  margin: 1em 0
  line-height: 38px
  text-align: center

.competition-body-text
  font-size: 18px
  line-height: 26px
  margin: 0 0 1em 0
  text-align: center

  .highlight
    color: #fbb431
    font-weight: 700

.competition-button
  border: 2px solid white
  border-radius: 6px
  cursor: pointer
  display: block
  font-family: inherit
  font-size: 20px
  font-weight: 700
  height: 50px
  margin: 1em auto
  outline: none
  width: 255px

  &.enter
    background: white
    color: black

    &.entered
      background: #fbb431
      border-color: #fbb431
      color: black
      cursor: no-drop

  &.learn-more
    background: none
    color: white

.competition-footer
  margin: 0 auto
  max-width: 630px

.competition-footer-text
  font-size: 14px
  margin: 1em 0

.competition-small-text
  color: #d3d3d3
  font-size: 12px
  line-height: 20px
  margin: 2em 0
  text-align: center

  b
    color: white
    font-style: italic
    font-weight: 700