@media (max-width: 991.98px) {
    .text {
        font-size: 1.5rem!important;
    }
}

@font-face {
    font-family: GeogrotesqueRegular;
    src: url("GeogrotesqueRegular.otf");
}

html, body{
    height: 100%;
}

.container {
    font-family: GeogrotesqueRegular !important;
}

.record_btn {
    height: 30vh!important;
    width: 30vh!important;
    font-size: 3vh;
    border-radius: 50% !important;

    position: relative;

    padding: 0;

    overflow: hidden;

    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

    background-color: #1976D2;
    color: #ecf0f1;

    transition: background-color .3s;

    margin-left: auto !important;
    margin-right: auto !important;
}

.record_btn:hover, .record_btn:focus {
    background-color: #42A5F5;
}

.record_btn > * {
    position: relative;
}

.record_btn span {
    display: block;
    padding: 12px 24px;
}

.record_btn.red {
    background-color: #D32F2F;
}

.record_btn.blue_dark {
    background-color: #1976D2;
}

.record_btn.gray {
    background-color: #616161;
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.text {
    font-size: 2rem;
    text-align: center;
}

.white {
    color: white;
}