@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');

@font-face {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 300;
    src: local('Gilroy-Light'), url('/assets/fonts/Gilroy-Light.woff') format('woff');
}

@font-face {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 400;
    src: local('Gilroy-Regular'), url('/assets/fonts/Gilroy-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 500;
    src: local('Gilroy-Medium'), url('/assets/fonts/Gilroy-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 700;
    src: local('Gilroy-Bold'), url('/assets/fonts/Gilroy-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 900;
    src: local('Gilroy-Heavy'), url('/assets/fonts/Gilroy-Heavy.woff') format('woff');
}

:root {
  --main-color: #d20066;
  --main-color: #DEC9F3;
  --main-sec: #09533B;
  --main-important: #EBEA52;
  --main-soft: #C9D3F3;
  --main-over-color: #fff;
}

@view-transition { navigation: auto; }

@keyframes fade-in  { from { opacity: 0; filter: blur(4px); } }
@keyframes fade-out { to   { opacity: 0; filter: blur(4px); } }

::view-transition-old(root) { animation: 0.3s ease-in  fade-out; }
::view-transition-new(root) { animation: 0.3s ease-out fade-in;  }