@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

@keyframes fade-up {
  0% {
      opacity: 0;
      transform: translateY(2rem/* 32px */);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}
@keyframes fade-down {
  0% {
      opacity: 0;
      transform: translateY(-2rem/* -32px */);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}
@keyframes fade-left {
  0% {
      opacity: 0;
      transform: translateX(2rem/* 32px */);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

* {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  transition: all 0.5s;
}

.hiding {
  opacity: 0;
  transition: all 0.5s;
}
.animate-fade-down {
  animation: fade-down 1s both;
  opacity: 1;
}
.animate-fade-up {
  animation: fade-up 1s both;
  opacity: 1;
}
.animate-fade-left {
  animation: fade-left 1s both;
  opacity: 1;
}

body {
  margin: 0;
  font-family: "Oswald",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Setting up Typography Framework */ 
.intern-text-display {
  @apply font-bold text-[56px] leading-[64px];
}
.intern-text-p1 {
  @apply font-normal text-[16px] leading-[28px];
}
.intern-text-p3 {
  @apply font-normal text-[14px] leading-[20px];
}
.stretched {
  font-stretch: expanded
}

a {
  @apply cursor-pointer;
}
h1 {
  @apply  font-bold text-[32px] md:text-[48px] leading-[42px] lg:leading-[64px];
}
h2 {
  @apply font-bold text-[32px] leading-[48px];
}
h3 {
  @apply font-bold text-[28px] leading-[36px];
}
h4 {
  @apply font-bold text-[24px] leading-[32px];
}
h5 {
  @apply font-bold text-[20px] leading-[32px];
}
h6 {
  @apply font-bold text-[16px] leading-[25px];
}
label {
  @apply font-medium text-[14px] leading-[20px];
}