:root {
    --button-text-color: #222;
    --blue-background: #d8ecf7;
    --blue-border: #afcde3;
    --gray-background: #e2e2e2;
    --gray-border: #bdbdbd;
    --green-background: #d9edc2;
    --green-border: #b2ce96;
    --purple-background: #e2e2f9;
    --purple-border: #bebde9;
    --red-background: #f9dbdb;
    --red-border: #e9b3b3;
    --yellow-background: #fef5c4;
    --yellow-border: #fadf98;
    --blue-hover-background: #83a2be;
    --gray-hover-background: #919191;
    --green-hover-background: #86a36e;
    --purple-hover-background: #9291c7;
    --red-hover-background: #c78787;
    --yellow-hover-background: #ecb870;
}
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
}
.content-box-blue {
    background-color: var(--blue-background);
    border: 1px solid var(--blue-border);
}
.content-box-gray {
    background-color: var(--gray-background);
    border: 1px solid var(--gray-border);
}
.content-box-green {
    background-color: var(--green-background);
    border: 1px solid var(--green-border);
}
.content-box-purple {
    background-color: var(--purple-background);
    border: 1px solid var(--purple-border);
}
.content-box-red {
    background-color: var(--red-background);
    border: 1px solid var(--red-border);
}
.content-box-yellow {
    background-color: var(--yellow-background);
    border: 1px solid var(--yellow-border);
}
.button-blue,
.button-gray,
.button-green,
.button-purple,
.button-red,
.button-yellow {
    color: var(--button-text-color) !important;
    padding: 13px 20px;
    -webkit-appearance: button;
}
.button-blue:hover,
.button-gray:hover,
.button-green:hover,
.button-purple:hover,
.button-red:hover,
.button-yellow:hover {
    color: var(--fifth-color) !important;
    text-decoration: none !important;
}
.button-blue {
    background-color: var(--blue-border);
    border: 1px solid var(--blue-border);
}
.button-blue:hover {
    background-color: var(--blue-hover-background);
    border: 1px solid var(--blue-hover-background);
}
.button-gray {
    background-color: var(--gray-border);
    border: 1px solid var(--gray-border);
}
.button-gray:hover {
    background-color: var(--gray-hover-background);
    border: 1px solid var(--gray-hover-background);
}
.button-green {
    background-color: var(--green-border);
    border: 1px solid var(--green-border);
}
.button-green:hover {
    background-color: var(--green-hover-background);
    border: 1px solid var(--green-hover-background);
}
.button-purple {
    background-color: var(--purple-border);
    border: 1px solid var(--purple-border);
}
.button-purple:hover {
    background-color: var(--purple-hover-background);
    border: 1px solid var(--purple-hover-background);
}
.button-red {
    background-color: var(--red-border);
    border: 1px solid var(--red-border);
}
.button-red:hover {
    background-color: var(--red-hover-background);
    border: 1px solid var(--red-hover-background);
}
.button-yellow {
    background-color: var(--yellow-border);
    border: 1px solid var(--yellow-border);
}
.button-yellow:hover {
    background-color: var(--yellow-hover-background);
    border: 1px solid var(--yellow-hover-background);
}