@import url("inc/elements.css?v131");
@import url("inc/grid.css");
@import url("inc/miscellaneous.css?v1");
@import url("inc/rwd.css");
@import url("inc/typography.css?v33");
@import url("inc/utilities.css");
@import url("inc/variables.css?v8");

@import url("inc/fonts.css?v2");

:root {
  font-size: 62.5%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

*,
*:focus, 
*:hover {
    outline:none;
}

html {
    overflow-x: hidden
}

body {
    color: #505062;
	display: flex;
    flex-direction: column;
    font-family: 'Favorit', sans-serif;
    font-size: 1.6rem;
    line-height: 2;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    opacity:0;

    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    animation-duration: 0.3s;

    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


main {
    flex: 1;
    margin-top: var(--header-height);
    position: relative;
}

main::after {
    background: var(--background-dark-transparent);
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    -webkit-transition: var(--transition-main);
	-moz-transition: var(--transition-main);
	-ms-transition: var(--transition-main);
	-o-transition: var(--transition-main);
	transition: var(--transition-main);
}

main.hidden::after {
    opacity: 1;
}