:root {
    --dark-pink: #AD4949;
    --light-pink: #FFDCDC;
    --light-blue: #d6e4f5;
    --dark-blue: #313F78;
    --light-purple: #e7daf0;
    --dark-purple: #6c3194;
    --light-green: #dcf5e3;
    --mid-green: #88bb96;
    --dark-green: #2a5436;
    --light-grey: #eeeeee;
    --mid-grey: #c2c0c0;
    --dark-grey: #757575;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

p a {
    color: var(--dark-pink);
}

.btn {
    display: inline-block;
    background: var(--btn-color);
    border: 2px solid var(--btn-color);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
}

.btn:hover {
    filter: brightness(0.8);
}

.btn:focus {
    border: 2px solid white;
}

.btn--dark-pink {
    --btn-color: var(--dark-pink);
}

.btn--dark-blue {
    --btn-color: var(--dark-blue);
}

.btn--dark-purple {
    --btn-color: var(--dark-purple);
}

@media (max-width: 1320px) {
.container {
    padding: 0 1rem;
}
}