:root {
    --blue: #5A757B;
    --white: #FFE6C5;
    --yellow: #DE9D4A;
    --red: #943031;
    --brown: #53403C;
    --black: #393031;
}

.font-blue { color: var(--blue); }
.background-blue { background-color: var(--blue); }
.font-white { color: var(--white); }
.background-white { background-color: var(--white); }
.font-yellow { color: var(--yellow); }
.background-yellow { background-color: var(--yellow); }
.font-red { color: var(--red); }
.background-red { background-color: var(--red); }
.font-brown { color: var(--brown); }
.background-brown { background-color: var(--brown); }
.font-black { color: var(--black); }
.background-black { background-color: var(--black); }

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.page {
    height: 100vh;
}