:root {
    --color-page: #00000060;
    --color-page-special: #000000;
    --font-family-heading: "BrandonGrotesqueBold", sans-serif;
    --font-family-regular: "VarelaRoundRegular", sans-serif;
    --color-accent: #BBBBBB;
    --color-accent-special: #ffffff;
    --hover-transition-duration: 300ms;
    --border: none;
    --color-border: #ffffff80;
}

@font-face {
    font-family: "BrandonGrotesqueBold";
    src: url("/fonts/BrandonGrotesqueBold.woff2");
    font-display: swap;
}

@font-face {
    font-family: "VarelaRoundRegular";
    src: url("/fonts/VarelaRoundRegular.woff2");
    font-display: swap;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/images/home.png");
    background-position: center;
    background-size: cover;
    filter: blur(2px);
    z-index: -1;
    opacity: 0.5;
}