:root {
    --mainColor: hsl(176, 57%, 27%);
    --mainColorTransparent: hsl(176, 57%, 27%, 0.8);
    --mainColorMoreTransparent: hsl(176, 57%, 27%, 0.2);
    --mainYellow: hsl(54, 86%, 59%);
    --lightYellow: hsl(54, 77%, 79%);
    --darkGrey: hsl(0, 0%, 26%);
    --lightGrey: hsl(240, 0%, 95%);
    --darkTurquoise: hsl(175, 83%, 16%);
    --darkTurquoiseTransparent: hsl(175, 83%, 16%, 0.7);
    --veryDarkTurquoise: hsl(175, 85%, 10%);
    --lightGreen: hsl(119, 67%, 33%);
    --darkGreen: hsl(119, 83%, 23%);
    --lightBlue: hsl(239, 100%, 72%);
    --outlineRed: hsl(0, 68%, 36%);
    --whiteTransparent: hsl(0, 0%, 100%, 0.6);
    --greenVeryTransparent: hsla(176, 57%, 27%, 0.2);

    --mainFont: 'bebas-reg';
    --secondaryFont: 'kanit-reg';
    --textFont: 'open-sans';

    --lightWhiteGlow: 0 0 5px rgba(255, 255, 255, 0.2),
                      0 0 10px rgba(255, 255, 255, 0.2),
                      0 0 20px rgba(255, 255, 255, 0.2),
                      0 0 40px rgba(255, 255, 255, 0.2);

    --lightGoldenGlow: 0 0 5px hsla(61, 100%, 49%, 0.4),
                      0 0 10px hsla(61, 100%, 49%, 0.4),
                      0 0 20px hsla(61, 100%, 49%, 0.4),
                      0 0 40px hsla(61, 100%, 49%, 0.4);

    --subtleDropShadow: 0 0 5px rgba(0, 0, 0, 0.2),
                      0 0 10px rgba(0, 0, 0, 0.2),
                      0 0 20px rgba(0, 0, 0, 0.2),
                      0 0 40px rgba(0, 0, 0, 0.2);
    
    --normalBoxShadow: 3px 3px 10px var(--darkGrey);
    --subtleTextShadow: 1px 1px 10px black;
    --bottomEdgeShadow: 0 4px 6px rgba(0, 0, 0, 0.3);

    --mainGradient: linear-gradient(
                                    90deg,
                                    var(--darkTurquoiseTransparent) 10%,
                                    var(--mainColorTransparent) 100%
                                  );
}