/* VARIABLES */
:root {
    --color-primary: #c9cacf;
    --color-secondary: #f2f2f3;
    --color-tertiary: #5260ff;
    --color-success: #2dd36f;
    --color-warning: #ffc409;
    --color-danger: #eb445a;
    --color-dark: #3d3e43;
    --color-medium: #92949c;
    --color-light: #f4f5f8;
    --base-rem-size: 12px;
}

/* BASE ELEMENTS */
html {
    font-size: var(--base-rem-size);
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: var(--color-dark);
    color: var(--color-primary);
}

a {
    transition: color 0.3s;
}

.container {
    width: 80%;
    margin: 5rem auto;
    padding: 3rem;
    border-radius: 1rem;
    box-shadow:  16px 16px 36px #626369,
    -16px -16px 36px #c2c5cf;
}

.container a {
    color: var(--color-tertiary);
}

.container a:hover {
    color: var(--color-secondary);
}