@import url('https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

@import 'header.css';
@import 'about.css';
@import 'creations.css';
@import 'footer.css';

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --white: hsl(0 0% 100%);
  --black: hsl(0, 0%, 0%);
  --grey-200: hsl(0, 0%, 85%);
  --neutral-400: hsl(0 0% 63.9%);
  --font-primary: 'Alata', sans-serif;
  --font-secondary: 'Josefin Sans', sans-serif;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

img {
  max-width: 100%;
}

.main {
  padding: 0 1rem;
}

.link {
  font-family: var(--font-primary);
  position: relative;
  color: var(--white);
}

.link:hover::after {
  font-family: var(--font-primary);
  content: '__';
  top: 0.65rem;
  left: 0.875rem;
  position: absolute;
  display: flex;
  animation: animeLeft 0.3s forwards;
}

@keyframes animeLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (min-width: 50rem) {
  .main {
    margin: 0 auto;
    max-width: 60rem;
  }
}