* {
    font-family: 'Roboto', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(253, 253, 75, 0.05) 100%);
    min-height: 100vh;
}

.navbar {
    background-color: white;
    border-bottom: 5px solid #fdfd4b;
}

.navbar-toggler {
    border-color: #fdfd4b !important;
}

.main {
    padding-top: 2vw;
    padding-bottom: 5vw;
}

.labour, 
.conservative,
.scottish-national-party,
.no-recommendation,
.plaid-cymru,
.liberal-democrat,
.democratic-unionist-party,
.alliance,
.sinn-fein,
.green,
.independent,
.national-health-action-party,
.ulster-unionist-party,
.social-democratic-and-labour-party,
.not-sure
{
    padding: 0.5em;
    display: inline-block;
    background-color: lightgrey;
    border-radius: 5px;
}

.labour {
    background-color: red;
    color: white;
}

.conservative {
    background-color: darkblue;
    color: white;
}

.scottish-national-party {
    background-color: yellow;
}

.liberal-democrat {
    background-color: orange;
}

.green, .plaid-cymru {
    background-color: green;
    color: white;
}

.recommendation {
    font-size: 2em;
    display: block;
}

.recommendation-sm {
    display: block;
}

.winner {
    font-weight: bold;
}

.main a {
    color: inherit;
    text-decoration: none;
    border-bottom: 3px solid #fdfd4b;
    transition: background-color 0.2s;
}

a:hover {
    color: inherit;
    text-decoration: none;
    background-color: #fdfd4b;
}

.share-buttons a, .share-buttons a:hover {
    border-bottom: 0px;
    background-color: transparent;
}

.share-buttons a svg {
    transition: fill 0.2s;
}

.share-buttons a:hover svg {
    fill: #fdfd4b;
}

.highlight {
    background-color: #fdfd4b;
    padding: 0.1rem 0.5rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

h1 {
    margin-top: 2rem;
}

h6 {
    margin-top: 2rem;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}

.rule-below {
    padding-bottom: 1rem;
    border-bottom: 1px solid lightgrey;
}

.share-buttons {
    text-align: right;
}

.share-buttons svg {
    max-width: 50px;
}

.table {
    font-size: 0.9em;
}

footer {
    text-align: center;
    padding: 2em;
}

/* map */
svg .st1, svg .st2 { fill: white; stroke: grey; }
svg a:hover path { fill: grey; }
/* end map */


@media only screen and (min-width: 600px) {
    .table-responsive {
        display: table !important;
    }
}