/* Website colour palette
• Background (#201C21)
• Raised Background (#332D35)
• Accent 1 (#8627B3)
• Accent 2 (#8627B3)
• Accent 3 (#312534)
• Text Static (#B8A2C2)
• Text Highlighted (#E0C8EC)
• Text Locked (#413347)
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
body {
    background: #201C21;
    background: radial-gradient(circle, #2d1d32 0%, #201C21 100%);
    font-family: 'Montserrat', sans-serif;
    margin: 0px;
    padding: 0px;
}

h2 {
    color: #b8a2c289;
    text-align: center;
    font-size: 2.3em;
    margin: 7.3em 0em;
}

/* Button elements */

.button-primary {
    background-color: #8627B3;
    color: #B8A2C2;
    font-size: 14px;
    margin: 2.5em 1em 2em 0.8em;
    padding: 12px;
    border: 0px;
    border-radius: 6px;
    transition-duration: 0.3s;
}

.button-primary:hover {
    background-color: #a135d2;
    color: #E0C8EC;
    transition-duration: 0.3s;
}

.button-secondary {
    background-color: #453647;
    color: #B8A2C2;
    font-size: 14px;
    margin: 2.5em 1em 2em 0.8em;
    padding: 12px;
    border: 0px;
    border-radius: 6px;
    transition-duration: 0.3s;
}

.button-secondary:hover {
    background-color: #4a3b4b;
    color: #E0C8EC;
    transition-duration: 0.3s;
}

/* Header & Site Links */

a {
    text-decoration: none;
    color: #B8A2C2;
    transition-duration: 0.5s;
}

a:hover {
    color: #E0C8EC;
    transition-duration: 0.5s;
}

header {
    padding: 2em 2.5em;
    display: flex;
    justify-content: space-between;
}

nav ul, nav li {
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;
    margin: 0.45em 1em 1em 1em;
}

/* Cards */

.card {
    background-color: #332d357b;
    margin: 2em 4em;
    padding: 1.5em 2.5em 1.5em 2.5em;
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff0b;
}

.card-title {
    color: #B8A2C2;
    padding: 1em 0.5em 0.4em;
    margin: 0;
}

.card-content {
    color: #b8a2c2c0;
    padding: 0em 0em 0em 0.8em;
    margin: 0;
}

/* Footer */

footer {
    padding: 0.3em;
}

footer>p {
    color: #ffffff33;
    font-size: 12px;
    text-align: center;
    padding: 0em 0em 2em;
}