:root {
    --b1blue: rgb(34,71,121);
    --b1grey: rgb(224,224,224);
}

body {
    padding: 50px;
}

.b1blue-small {
    color: var(--b1blue);
    font-size: small;
}

.b1blue-heading {
    color: var(--b1blue);
    font-size: large;
}

a {
    color: var(--b1blue);
    text-decoration: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.b1blue-button {
    background-color: var(--b1blue);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
}

.small-button {
    padding: 0.5em;
    margin-top: 0em;
    margin-bottom: 0em;
}

.b1blue-button:hover {
    background-color: var(--b1grey);
    color: black;
}

.b1blue-button:disabled {
    background-color: var(--b1grey);
    color: gray;
    cursor: not-allowed;
}

.speech-bubble {
	position: relative;
	background: var(--b1grey);
	border-radius: .4em;
	padding: 0.4em;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: var(--b1grey);
	border-bottom: 0;
	border-right: 0;
	margin-left: -70px;
	margin-bottom: -20px;
}

 @media (min-width: 1000px) {
 .centred_left_align_text {
    max-width: 800px
 }
}