:root{
    --background: #1e2124;
    --accent: #282b30;
    --border: #424549;
    --primary: #786384;
}

a, p, h1, h2, h3, h4, h5, h6, li, lu{
    z-index: 5;
}

.background{
    background-color: var(--background);
}

.background-opacity {
    background-color: rgba(30, 33, 36, 0.95);
}

.accent{
    background-color: var(--accent);
}

*{
    font-family: 'Roboto', sans-serif;
    color: white;
    max-width: 100vw;
    box-sizing: border-box;
}

.black-text{
    color: #000;
}

body{
    background-color: var(--background);
}

html, body {
    overflow-x: hidden;
    width: 100vw;
    max-width: 100vw;
    scroll-behavior: smooth;
}

.fe--arrow-down {
    width: 32px;
    height: 32px;
    min-height: 32px;
    min-width: 32px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m6 7l6 6l6-6l2 2l-8 8l-8-8z'/%3E%3C/svg%3E");
    background-color: currentColor;
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.raphael--arrowup {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M23.963 20.834L17.5 9.64c-.825-1.43-2.175-1.43-3 0L8.037 20.834c-.825 1.43-.15 2.598 1.5 2.598h12.926c1.65 0 2.325-1.17 1.5-2.598'/%3E%3C/svg%3E");
  }

  .mask-gradient-to-b {
    mask-image: linear-gradient(to bottom, black, transparent);
}