@use "sass:map"
@import resources/sass/Common/mediaQueries

//TODO: standardize font-sizes and font-families
//TODO: standardize colors

$mainColor: #12232e
$mainColorAccent: #203647
$secondColor: #007cc7
$font-color: #e0e0e0
$font-color-contrast: #12232e

$headersFont: clamp(2rem, 1.3077rem + 3.0769vw, 5rem)
$subheadersFont: clamp(1.25rem, 1.0192rem + 1.0256vw, 2.25rem)
$normalFont: clamp(1.25rem, 1.1923rem + 0.2564vw, 1.5rem)

@mixin flexDefault($justifyContent: space-between, $alignItems: center)
  display: flex
  align-items: $alignItems
  justify-content: $justifyContent

@mixin overlayElement($layer: 2)
  height: auto
  width: auto
  z-index: $layer
  *
    z-index: $layer

@mixin buttonDefault($bg: $secondColor, $color: $font-color)
  background: $bg
  border: 2px solid white
  color: $color
  text-align: center
  text-decoration: none
  font-size: clamp(1rem, 0.7692rem + 1.0256vw, 2rem)
  padding: 5px 30px
  border-radius: 25px
  width: auto

.clickable
  cursor: pointer

h1, .fa-play-circle
  font-size: $headersFont
h2, .subheader
  font-size: $subheadersFont
li, .card-footer
  font-size: $normalFont

