@import "variables"

// Some convenience class to manage resolution specific elements
@media only screen and (max-width:600px)
  .on-pc-screen
    display: none !important
@media only screen and (min-width:600px)
  .on-mobile-screen
    display: none !important

@media only screen and (max-width:1200px)
  .on-largest-screen
    display: none !important
@media only screen and (min-width:1200px)
  .up-to-largest-screen
    display: none !important

@media only screen and (max-width:1000px)
  .on-large-screen
    display: none !important
@media only screen and (min-width:1000px)
  .up-to-large-screen
    display: none !important

@media only screen and (max-width:800px)
  .on-small-screen
    display: none !important
@media only screen and (min-width:800px)
  .up-to-small-screen
    display: none !important

@media (prefers-color-scheme:dark)
  .on-light-theme
    display: none !important
@media (prefers-color-scheme:light)
  .on-dark-theme
    display: none !important

*
  box-sizing: border-box
  z-index: $foreground

html, body
  width: 100%
  height: 100%
  min-width: $min-page-width

h1.page-title
  text-align: left
  font-size: $large-font-size
  color: var(--title-text-color)
h1.page-title:first-letter
  text-transform: capitalize

body
  margin: 0
  font-family: var(--body-font)
  font-size: $body-font-size
  line-height: $body-line-height
  color: var(--foreground-color)
  background-color: var(--background-color)
  -webkit-text-size-adjust: 100%
      -ms-text-size-adjust: 100%

a
  color: var(--link-color)

  // `:focus` is linked to `:hover` for basic accessibility
  &:hover, &:focus
    color: var(--link-hover-color)

  strong
    color: inherit

a:not(:hover)
  text-decoration: none

.container
  margin: 0 auto
  position: relative
  max-width: $page-width
  padding: 0 0.2em

.external-link-light:after
  background-image: url(/external-link-dark.svg) !important
.external-link:after
  content: ""
  background-image: url(/external-link-light.svg)
  background-size: 10px 10px
  display: inline-block
  width: 10px
  height: 10px
  margin-left: 5px

img
  display: block
  max-width: 100%
  margin-bottom: $spacer
  border-radius: $border-radius

table
  margin-bottom: $spacer
  width: 100%
  border: 0 solid var(--border-color)
  border-collapse: collapse

td, th
  padding: .25rem .5rem
  border:
    color: inherit
    style: solid
    width: 0
    bottom-width: 1px

th
  text-align: left

thead th
  border-bottom-color: currentColor

.header
  display: flex
  align-items: flex-end

.header-text
  font-size: $large-font-size
  color: var(--title-text-color)
  font-weight: bold
  display: inline-block
  padding: 1em 0.5em 1em 0.5em

.header-image
  background:
    image: url(/doublefourteen-logo-dark.svg)
    repeat: no-repeat

  width: 330px
  height: 180px
  display: inline-block
  margin: 0 0.5em 0 0.5em

.work-in-progress-content
  display: flex
  justify-content: space-between

.work-in-progress-text
  position: relative

.work-in-progress-sign
  width: 400px
  height: 386px
  background:
    image: url(/work-in-progress.png)
    position: bottom right
    repeat: no-repeat
    size: 400px 386px

.get-in-touch
    display: flex
    flex-direction: row
    flex-wrap: wrap
    justify-content: right
    gap: 1.5em
    margin: 2em 3em 2em 2em

.button, .button:hover
  background-color: transparent
  border: 2px solid #ced4da
  color: #333
  padding: 7px 12px
  display: block
  margin: 10px 0
  font-size: $body-font-size
  font-weight: 700
  text-decoration: none !important
.button a
  display: inline
  text-decoration: none !important
  color: #333
.button:hover
  background-color: #fefefe

.twitter-button, .email-button
  padding 0px
  > img
    min-width: 16px
    min-height: 16px
    margin-bottom: 0px

.footer
  text-align: center
  padding-top: $large-spacer

@media (prefers-color-scheme:dark)
  .external-link:after
    background-image: url(/external-link-dark.svg)
  .header-image
    background-image: url(/doublefourteen-logo-light.svg)

  // FIXME
  .button, .button:hover
    color: inherit
  .button a
    color: #ccc
  .button:hover
    background-color: #383838


@media only screen and (max-width:800px)
  .work-in-progress-content
    flex-direction: column
  .work-in-progress-text
    text-align: center