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

@layer base {
    @font-face {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url(../fonts/Barlow-Light.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Barlow';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/Barlow-Italic.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/Barlow-Regular.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(../fonts/Barlow-Medium.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url(../fonts/Barlow-SemiBold.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(../fonts/Barlow-Bold.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url(../fonts/Barlow-ExtraBold.ttf) format('truetype');
    } 
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 100;
        font-display: swap;
        src: url(../fonts/RobotoMono-Thin.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(../fonts/RobotoMono-Bold.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto Mono';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(../fonts/RobotoMono-BoldItalic.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url(../fonts/RobotoMono-ExtraLight.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto Mono';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/RobotoMono-Italic.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(../fonts/RobotoMono-Light.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(../fonts/RobotoMono-Medium.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/RobotoMono-Regular.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url(../fonts/RobotoMono-SemiBold.ttf) format('truetype');
    }
}


@layer components {
    svg {
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}


/* Transitions 
*/
@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(25%);
    }
}

.slide-and-fade {
    animation: fadeOut 0.25s ease-out forwards;
}

@keyframes slow-ping {
    50% {
      opacity: .2;
      transform: scale(1.3);
    }
  }
  
.animate-slow-ping {
    animation: slow-ping 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}