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

@layer base {
  picture > img {
    display: block;
    max-width: 100%;
    height: auto;
    filter: blur(0);
    transition: filter 0.7s ease-in;
  }
  picture > img[data-src] {
    filter: blur(3px);
  }
  picture > img.img-progressive {
    width: auto;
  }
}

@layer components {
  .center {
    & .learn {
      color: hsl(207.2, 78.8%, 64.9%);
    }
  }
}

body {
  background-color: #24272d;
  display: grid;
  font-size: 1.75em;
  height: 100vh;
}