/* Body elements: */
:root {
/* Colours: */
    --body-color: white;
    --Cmeas_container-bgColor: rgba(236, 34, 202, 0.5); /* also: .btn-primary*/
    --Cchange-bgColor: rgba(27, 219, 86, 0.8);
    --CscoreDown-bg: mediumvioletred;
    --CscoreUp-bg: greenyellow;
    --CscoreUp-color: black;
/*    content:      */
    --Icontent-bgColor: rgba(0, 0, 0, 0.2);
    --CactiveWord-bgColor: greenyellow;
    --CcorrectCharacter-color: mediumblue;
    --CwrongCharacter-color: mediumvioletred;
    --Iinput-bgColor: rgba(255, 255, 255, 0.6);
    --CbtnPrimary-bg: var(--Cmeas_container-bgColor);
    --CbtnPrimary-bg-focus: rgba(236, 34, 202, 0.8);
    --Cmodal-color: black;
/* Font sizes: */
    --h1-fontSize: 30px;
    --Crow-fontSize: 30px;
    --Ctitle-fontSize: 15px;
    --Cchange-fontSize: 16px;
}
body {
    background: url("images/sky-690293_1920.jpg") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    color: var(--body-color);
    font-family: "Quattrocento Sans", sans-serif;
}
h1 {
    font-size: var(--h1-fontSize);
}
.row, #content, #input {
    font-size: var(--Crow-fontSize);
}
.meas_container {
    background-color: var(--Cmeas_container-bgColor);
    margin-bottom: -12px;
}
.icons {
    width: 90px;
    height: 90px;
}
.title {
    font-size: var(--Ctitle-fontSize);
}
.change {
/*	background-color: var(--Cchange-bgColor);*/
    display: inline-block;
    font-size: var(--Cchange-fontSize);
    border-radius: 5px;
}
.scoreDown, .scoreUp {
}
.scoreDown {
    background: var(--CscoreDown-bg);
}
.scoreUp {
    background: var(--CscoreUp-bg);
    color: var(--CscoreUp-color);
}
/* ---------------- Content: ---------------- */
#content {
    height: 105px;
    background-color: var(--Icontent-bgColor);
    margin: 5px auto;
    overflow: hidden;
    padding: 0 5px;
    line-height: 35px;
}
.activeWord {
    background-color: var(--CactiveWord-bgColor);
    border-radius: 5px;
}
.correctCharacter {
    color: var(--CcorrectCharacter-color);
}
.wrongCharacter {
    color: var(--CwrongCharacter-color);
}
#input {
    background-color: var(--Iinput-bgColor);
    width: 100%;
    padding: 3px;
}
.keyboard {
	min-height: 200px;
    max-height: 300px;
    background: url("images/keyboard-white.png") no-repeat center center;
    background-size: contain;
    margin-top: 5px;
    margin-bottom: 10px;
}
.btn-primary {
	background: var(--CbtnPrimary-bg);
    opacity: 0.5;
}
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary:hover {
	background: var(--CbtnPrimary-bg-focus);
    opacity: 1;
}
/* ---------------- Modal: ---------------- */
.modal {
    color: var(--Cmodal-color);
}
.result {
    font-size: 20px;
}
.result img {
    width: 300px; 
    height: 200px;
}
#name {
	margin-top: 10px;
}