@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-paradox-dark: #172713;
  }
}

@font-face {
  font-family: 'ParadoxPolice-Regular';
  src: url('../assets/fonts/Paradox_Police-Regular.woff2') format('woff2'),
       url('../assets/fonts/Paradox_Police-Regular.woff') format('woff'),
       url('../assets/fonts/ParadoxPolice-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'BallPill-Light';
    src: url('../assets/fonts/BallPill-light.woff2') format('woff2'),
         url('../assets/fonts/BallPill-light.woff') format('woff'),
         url('../assets/fonts/BallPill-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BallPill-Regular';
    src: url('../assets/fonts/BallPill-regular.woff2') format('woff2'),
         url('../assets/fonts/BallPill-regular.woff') format('woff'),
         url('../assets/fonts/BallPill-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BallPill-Medium';
    src: url('../assets/fonts/BallPill-medium.woff2') format('woff2'),
         url('../assets/fonts/BallPill-medium.woff') format('woff'),
         url('../assets/fonts/BallPill-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body,html{
  scroll-behavior: smooth;
  font-family: Helvetica, sans-serif;
}

h1, h2, h3, h4{
  font-weight: 100;
  font-family: 'BallPill-Medium', Helvetica, sans-serif;
}

.paradox h1,
.paradox h2,
.paradox h3,
.paradox h4,
.paradox p,
.paradox{
  font-family: 'ParadoxPolice-Regular', Helvetica, sans-serif;
}

.ballPill{
  font-family: 'BallPill-Regular', Helvetica, sans-serif;
}

.ballPill em,
.ballPill strong{
  font-family: 'BallPill-Medium', Helvetica, sans-serif;
}

.ballPill-medium{
  font-family: 'BallPill-Medium', Helvetica, sans-serif;
}

.text p + p{
  margin-top: 1em;
}

.title-underline{
  position: relative;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: currentColor;
  line-height: 1.4;
}

.tag,
.btn{
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.btn{
  border-color:  currentColor;
}

.tag,
.btn:hover{
  color: #fff;
}

img.toLoad{
  opacity: 0;
}

a.thumb{
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
  display: block;
  opacity: 1;
}

a.thumb figure,
a.thumb figure img{
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

a.thumb:hover figure{
  background-color: #000!important;
}

a.thumb:hover figure img{
  /*-webkit-mix-blend-mode: normal;
  mix-blend-mode: normal;*/
  -webkit-filter: saturate(1);
  filter: saturate(1);
}

a.thumb:hover{
  opacity: .9;
}

svg{
  width: 100%;
  height: 100%;
}

@keyframes translateToRight {
  0% {
    transform: translate(-30%, -50%)
  }

  50% {
    transform: translate(0, -50%)
  }
}

@-webkit-keyframes translateToRight {
  0% {
    -webkit-transform: translate(-30%, -50%)
  }

  50% {
    -webkit-transform: translate(0, -50%)
  }
}

@keyframes translateToLeft {
  0% {
    transform: translate(0, -50%)
  }

  50% {
    transform: translate(-30%, -50%)
  }
}

@-webkit-keyframes translateToLeft {
  0% {
    -webkit-transform: translate(0, -50%)
  }

  50% {
    -webkit-transform: translate(-30%, -50%)
  }
}

.animate--list li:nth-child(even) section{
  animation: 120s linear infinite translateToRight;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.animate--list li:nth-child(odd) section{
  animation: 120s linear infinite translateToLeft;
}

.animate--list li section > div:nth-child(odd) > div{
  transform: rotate(10deg);
}

.animate--list li section > div:nth-child(even) > div{
  transform: rotate(-7deg);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  -webkit-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

.slide-enter-from,
.slide-leave-to {
  transform: translateX(100%);
}