:root {
    --theme-primary: #84828F;
    --theme-secondary: #6A687A;
    --theme-tertiary: #536271;
    --theme-quaternary: #3E4C5E;
    --theme-quinary: #2C3D55;
    --theme-border: #2C3D55;
    
    --text-color: #E0E1DD;
    --accent-color: var(--theme-primary);
    --primary-bg: var(--theme-tertiary);
    --secondary-bg: var(--theme-quaternary);
}

/*
color pallet:
0D1B2A
1B263B
415A77
778DA9
E0E1DD
*/
@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

body {
    font-family: 'Roboto';
    background-color: var(--primary-bg);
}

* {
    color: var(--text-color);
}

.main_button{
    padding: 14px;
    border: none;
    box-shadow: 1px 1px 1px 1px rgba(7,7,7,0.2);
    border-radius: 4px;
    background-color: var(--secondary-bg);
    cursor: pointer;
}

.main_button_type2 {
    padding: 14px;
    border-style: solid;
    border-width: 3px;
    border-color: var(--theme-border);
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
}

.theme-primary { color: var(--theme-primary); }
.theme-secondary { color: var(--theme-secondary); }
.theme-tertiary { color: var(--theme-tertiary); }
.theme-quaternary { color: var(--theme-quaternary); }
.theme-quinary { color: var(--theme-quinary); }

.bg-theme-primary { background-color: var(--theme-primary); }
.bg-theme-secondary { background-color: var(--theme-secondary); }
.bg-theme-tertiary { background-color: var(--theme-tertiary); }
.bg-theme-quaternary { background-color: var(--theme-quaternary); }
.bg-theme-quinary { background-color: var(--theme-quinary); }

body.main-page {
    background-color: var(--theme-tertiary);
    transition: background-color 0.3s ease;
}