:root {
    --rws-primary-blue: #8353FD;
    --rws-primary-blue-lighter: #9C75FD;
    --rws-primary-pink: #E60054;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

* {
    font-family: 'Noto Sans';
}

body {
    background-color: #282C36;
    background-attachment: fixed;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/img/background.png');
}

/* Links */
a,
a:link,
a:visited {
    color: var(--rws-primary-blue);
}

a:hover {
    color: var(--rws-primary-blue-lighter);
    text-decoration: none;
}

/* Site max width */
.cover-container {
    max-width: 60em;
}

/* Buttons */
.dropdown a,
.dropdown a:visited,
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritance from `body` */
}

.btn-primary {
    color: #FFFFFF;
    text-shadow: none;
    background-color: var(--rws-primary-blue);
    border-color: var(--rws-primary-blue);
}

.btn-primary:hover {
    background-color: var(--rws-primary-blue-lighter);
    border-color: var(--rws-primary-blue-lighter);
}

.no-bullet {
    list-style-type: none;
}

/* Special class for components that should fill (almost) whole screen like voyager or graphql playground */
.fillscreen {
    height: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: #181b21;
}

/* Icons */
.link-icon::after {
    content: url('/img/icons/box-arrow-up-right.svg');
    padding-left: 0.5em;
    padding-bottom: 0.25em;
    width: 80%;
}

.check-lg::before {
    content: url('/img/icons/check-lg.svg');
    padding-right: 0.5em;
}

.caret-right::before {
    content: url('/img/icons/caret-right.svg');
    padding-right: 0.5em;
}


.calendar4-event::before {
    content: url('/img/icons/calendar4-event.svg');
    padding-right: 0.5em;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #D3D3D3;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--rws-primary-blue);
}