@use "@/styles/colors" as *

body
  font-family: 'Inter', sans-serif
  margin: 0

.btn
  display: flex
  align-items: center
  gap: 1rem
  color: $text
  padding: 0.7rem 1.1rem
  border-radius: 1rem
  border: none
  font-size: 1.2rem
  font-weight: 600
  cursor: pointer
  transition: 0.2s

  &:hover
    transform: scale(1.03) rotate(2deg)

  &:active
    transform: scale(0.95) rotate(-2deg)

.btn-full
  background-color: $primary
  color: #FFFFFF

.btn-light
  background-color: rgba($primary, 0.05)
  color: $primary


main
  margin: 3rem 20vw

footer
  position: fixed
  bottom: 1rem
  left: 0
  width: 100%
  display: flex
  justify-content: center

  p
    text-align: center

  span
    color: $primary


@media screen and (max-width: 1024px)
  main
    margin: 3rem 10vw

@media screen and (max-width: 768px)
  main
    margin: 3rem 5vw