body {
    /** Page background colour **/
    background-color: #ffffff;
}

.phrase-set-title {
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 3.5rem;
}

@media only screen and (max-width: 420px) {
    .phrase-set-title {
        font-size: 1.5rem;
    }   
}

.phrase-set-message {
    font-family: 'Montserrat';
    font-weight: 200;
}

.creator {
    font-family: 'Montserrat';
    font-weight: 200;
}

.create-date {
    font-family: 'Montserrat';
    font-weight: 200;
}

.o-phrase {
    font-family: 'Montserrat';
    font-weight: 200;
    text-align: right;
}

.t-phrase {
    font-family: 'Montserrat';
    font-weight: bold;
    font-style: italic;
    text-align: left;
}

.phrase-card--play {
    background-color: rgba(237, 120, 0, 1) !important;
}

.phrase-card--loading {
    border-width: 2px !important;
    animation: glow 0.5s infinite;
    -webkit-animation: glow 0.5s infinite;
    -moz-animation: glow 0.5s infinite;
    -o-animation: glow 0.5s infinite;

}

@-webkit-keyframes glow {
    0% {
    border-color: rgba(237, 120, 0, 0.1);
    }  
    50% {
    border-color: rgba(237, 120, 0, 1);
    }
    100% {
    border-color: rgba(237, 120, 0, 0.1);
    }
}
@keyframes glow {
    0% {
        border-color: rgba(237, 120, 0, 0.1);
        }
        50% {
        border-color: rgba(237, 120, 0, 1);
        }
        100% {
        border-color: rgba(237, 120, 0, 0.1);
        }
}
@-moz-keyframes glow {
    0% {
        border-color: rgba(237, 120, 0, 0.1);
        }
        50% {
        border-color: rgba(237, 120, 0, 1);
        }
        100% {
        border-color: rgba(237, 120, 0, 0.1);
        }
}
@-o-keyframes glow {
    0% {
        border-color: rgba(237, 120, 0, 0.1);
        }
        50% {
        border-color: rgba(237, 120, 0, 1);
        }
        100% {
        border-color: rgba(237, 120, 0, 0.1);
        }
}

.phrase-card {
    border: transparent 2px solid;
    background-color: #e8e8e8;
    transition: background-color 0.2s ease-in-out 0.1s;
}

.phrase-card:hover {
    cursor: pointer;
}

.deeplink-btn {
    border-radius: 2.5em !important;
    font-family: 'Montserrat';
}

.qr-hint {
    font-family: 'Montserrat';
    font-weight: 200;
}

.error-message {
    font-family: 'Montserrat';
    font-weight: 600;
    color: #000000;
    vertical-align: middle;
    display: inline;
}

.lingophant-text {
    font-family: 'Lora';
    opacity: 0.5;
}