:root {
    --bg-grey: #1e354b;
    --bg-white: #f8feff;
    --bg-light-grey: #cbd0d1;

    --primary-grey: #202224;
    --primary-red: #ee5253;
    --secondary-red: #ff6b6b;
    --primary-orange: #bd7201;
    --primary-blue: #2e86de;
    --primary-dark-blue: #0a3d62;
    --primary-yellow: #feca57;
    --primary-purple: #843cbd;
    --primary-green: #3e9350;
    --primary-pink: #b908b9;
    --primary-white: rgb(204, 204, 204);

    --secondary-purple: #ab44ff;
    --secondary-grey: #3c5063;
    --secondary-blue: #54a0ff;
    --secondary-pink: #f368e0;

    --grey-highlight: #2e2e2e;
    
    --light-cyan: #48ada8;
    --light-grey-primary:#8f8f8f;
    --light-pink:  #b384ffb6;
    --dark-cyan: #1a918b;

    --highlight: #843cbd;
    --highlight-grey: #727a81;
    --navbar: #182b3c;

    --font-white: rgb(228, 228, 228);
    --font-dark: #8c8e91;
    --font-grey: #454242;

    --border-primary: #7f8c8d;

    --font-large: 3.5vh;
    --font-normal: 1.3vh;
    --font-large: 1vh;

    --font-bold: 700;
}


*{font-family: 'PT Sans', sans-serif; margin: 0;padding: 0; letter-spacing: 0.4px;}
body {
    background-color: var(--bg--white);
    font-weight: 300;
}

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

::-webkit-scrollbar-track {
    background-color: var(--bg-grey);
}

::-webkit-scrollbar-thumb {
    background-color:  var(--primary-grey);;
    border-radius: 13px;
}


ul {
    list-style-type: none;
}

.element-dark {
    background-color: var(--bg-grey);
    padding: 2vh 15%;
}