:root {
    /* main theme colors */
    --text: hsl(43, 83%, 93%, 100%);
    --bg: #312538;
    --primary: hsl(243, 100%, 83%, 100%);
    --secondary: hsl(270, 100%, 85%, 100%);
    --accent: hsl(335, 100%, 83%, 100%);
    --void: hsl(274, 13%, 11%, 100%);
    --danger: hsl(354, 100%, 68%, 100%);
    --link: hsl(217, 100%, 77%, 100%);
    
    --primaryGlow: hsl(243, 100%, 86%, 100%);
    
    /* bg variants */
    --bg5: hsl(278, 20%, 18%, 5%);
    --bg10: hsl(278, 20%, 18%, 10%);
    --bg15: hsl(278, 20%, 18%, 15%);
    --bg20: hsl(278, 20%, 18%, 20%);
    --bg25: hsl(278, 20%, 18%, 25%);
    --bg30: hsl(278, 20%, 18%, 30%);
    --bg35: hsl(278, 20%, 18%, 35%);
    --bg40: hsl(278, 20%, 18%, 40%);
    --bg45: hsl(278, 20%, 18%, 45%);
    --bg50: hsl(278, 20%, 18%, 50%);
    --bg55: hsl(278, 20%, 18%, 55%);
    --bg60: hsl(278, 20%, 18%, 60%);
    --bg65: hsl(278, 20%, 18%, 65%);
    --bg70: hsl(278, 20%, 18%, 70%);
    --bg75: hsl(278, 20%, 18%, 75%);
    --bg80: hsl(278, 20%, 18%, 80%);
    --bg85: hsl(278, 20%, 18%, 85%);
    --bg90: hsl(278, 20%, 18%, 90%);
    --bg95: hsl(278, 20%, 18%, 95%);
    
    /* text variants */
    --text5: hsl(43, 83%, 93%, 5%);
    --text10: hsl(43, 83%, 93%, 10%);
    --text15: hsl(43, 83%, 93%, 15%);
    --text20: hsl(43, 83%, 93%, 20%);
    --text25: hsl(43, 83%, 93%, 25%);
    --text30: hsl(43, 83%, 93%, 30%);
    --text35: hsl(43, 83%, 93%, 35%);
    --text40: hsl(43, 83%, 93%, 40%);
    --text45: hsl(43, 83%, 93%, 45%);
    --text50: hsl(43, 83%, 93%, 50%);
    --text55: hsl(43, 83%, 93%, 55%);
    --text60: hsl(43, 83%, 93%, 60%);
    --text65: hsl(43, 83%, 93%, 65%);
    --text70: hsl(43, 83%, 93%, 70%);
    --text75: hsl(43, 83%, 93%, 75%);
    --text80: hsl(43, 83%, 93%, 80%);
    --text85: hsl(43, 83%, 93%, 85%);
    --text90: hsl(43, 83%, 93%, 90%);
    --text95: hsl(43, 83%, 93%, 95%);
    
    /* primary variants */
    --primary5: hsl(243, 100%, 83%, 5%);
    --primary10: hsl(243, 100%, 83%, 10%);
    --primary15: hsl(243, 100%, 83%, 15%);
    --primary20: hsl(243, 100%, 83%, 20%);
    --primary25: hsl(243, 100%, 83%, 25%);
    --primary30: hsl(243, 100%, 83%, 30%);
    --primary35: hsl(243, 100%, 83%, 35%);
    --primary40: hsl(243, 100%, 83%, 40%);
    --primary45: hsl(243, 100%, 83%, 45%);
    --primary50: hsl(243, 100%, 83%, 50%);
    --primary55: hsl(243, 100%, 83%, 55%);
    --primary60: hsl(243, 100%, 83%, 60%);
    --primary65: hsl(243, 100%, 83%, 65%);
    --primary70: hsl(243, 100%, 83%, 70%);
    --primary75: hsl(243, 100%, 83%, 75%);
    --primary80: hsl(243, 100%, 83%, 80%);
    --primary85: hsl(243, 100%, 83%, 85%);
    --primary90: hsl(243, 100%, 83%, 90%);
    --primary95: hsl(243, 100%, 83%, 95%);
    
    /* secondary variants */
    --secondary5: hsl(270, 100%, 85%, 5%);
    --secondary10: hsl(270, 100%, 85%, 10%);
    --secondary15: hsl(270, 100%, 85%, 15%);
    --secondary20: hsl(270, 100%, 85%, 20%);
    --secondary25: hsl(270, 100%, 85%, 25%);
    --secondary30: hsl(270, 100%, 85%, 30%);
    --secondary35: hsl(270, 100%, 85%, 35%);
    --secondary40: hsl(270, 100%, 85%, 40%);
    --secondary45: hsl(270, 100%, 85%, 45%);
    --secondary50: hsl(270, 100%, 85%, 50%);
    --secondary55: hsl(270, 100%, 85%, 55%);
    --secondary60: hsl(270, 100%, 85%, 60%);
    --secondary65: hsl(270, 100%, 85%, 65%);
    --secondary70: hsl(270, 100%, 85%, 70%);
    --secondary75: hsl(270, 100%, 85%, 75%);
    --secondary80: hsl(270, 100%, 85%, 80%);
    --secondary85: hsl(270, 100%, 85%, 85%);
    --secondary90: hsl(270, 100%, 85%, 90%);
    --secondary95: hsl(270, 100%, 85%, 95%);
    
    /* accent variants */
    --accent5: hsl(335, 100%, 83%, 5%);
    --accent10: hsl(335, 100%, 83%, 10%);
    --accent15: hsl(335, 100%, 83%, 15%);
    --accent20: hsl(335, 100%, 83%, 20%);
    --accent25: hsl(335, 100%, 83%, 25%);
    --accent30: hsl(335, 100%, 83%, 30%);
    --accent35: hsl(335, 100%, 83%, 35%);
    --accent40: hsl(335, 100%, 83%, 40%);
    --accent45: hsl(335, 100%, 83%, 45%);
    --accent50: hsl(335, 100%, 83%, 50%);
    --accent55: hsl(335, 100%, 83%, 55%);
    --accent60: hsl(335, 100%, 83%, 60%);
    --accent65: hsl(335, 100%, 83%, 65%);
    --accent70: hsl(335, 100%, 83%, 70%);
    --accent75: hsl(335, 100%, 83%, 75%);
    --accent80: hsl(335, 100%, 83%, 80%);
    --accent85: hsl(335, 100%, 83%, 85%);
    --accent90: hsl(335, 100%, 83%, 90%);
    --accent95: hsl(335, 100%, 83%, 95%);
    
    /* void variants */
    --void5: hsl(274, 13%, 11%, 5%);
    --void10: hsl(274, 13%, 11%, 10%);
    --void15: hsl(274, 13%, 11%, 15%);
    --void20: hsl(274, 13%, 11%, 20%);
    --void25: hsl(274, 13%, 11%, 25%);
    --void30: hsl(274, 13%, 11%, 30%);
    --void35: hsl(274, 13%, 11%, 35%);
    --void40: hsl(274, 13%, 11%, 40%);
    --void45: hsl(274, 13%, 11%, 45%);
    --void50: hsl(274, 13%, 11%, 50%);
    --void55: hsl(274, 13%, 11%, 55%);
    --void60: hsl(274, 13%, 11%, 60%);
    --void65: hsl(274, 13%, 11%, 65%);
    --void70: hsl(274, 13%, 11%, 70%);
    --void75: hsl(274, 13%, 11%, 75%);
    --void80: hsl(274, 13%, 11%, 80%);
    --void85: hsl(274, 13%, 11%, 85%);
    --void90: hsl(274, 13%, 11%, 90%);
    --void95: hsl(274, 13%, 11%, 95%);
    
    /* danger variants */
    --danger5: hsl(354, 100%, 68%, 5%);
    --danger10: hsl(354, 100%, 68%, 10%);
    --danger15: hsl(354, 100%, 68%, 15%);
    --danger20: hsl(354, 100%, 68%, 20%);
    --danger25: hsl(354, 100%, 68%, 25%);
    --danger30: hsl(354, 100%, 68%, 30%);
    --danger35: hsl(354, 100%, 68%, 35%);
    --danger40: hsl(354, 100%, 68%, 40%);
    --danger45: hsl(354, 100%, 68%, 45%);
    --danger50: hsl(354, 100%, 68%, 50%);
    --danger55: hsl(354, 100%, 68%, 55%);
    --danger60: hsl(354, 100%, 68%, 60%);
    --danger65: hsl(354, 100%, 68%, 65%);
    --danger70: hsl(354, 100%, 68%, 70%);
    --danger75: hsl(354, 100%, 68%, 75%);
    --danger80: hsl(354, 100%, 68%, 80%);
    --danger85: hsl(354, 100%, 68%, 85%);
    --danger90: hsl(354, 100%, 68%, 90%);
    --danger95: hsl(354, 100%, 68%, 95%);
}