:root {
    --blue: #3182ce;
    --pink: #ed64a6;
    --dark: #292d3e;
    --green: #1de9b6;
    --danger: #e91e63;
}

@font-face {
    font-family: "DanaMed";
    src: url("/fonts/fa/Dana-Medium.ttf") format("truetype");
}

* {
    font-family: DanaMed;
    color: var(--dark);
}

.bg_blue {
    background: var(--blue);
}

.bg_pink {
    background: var(--pink);
}

.bg_dark {
    background: var(--dark);
}

.text_blue {
    color: var(--blue);
}

.text_dark {
    color: var(--dark);
}

.text_pink {
    color: var(--pink);
}

.text_green {
    color: var(--green);
}

.text_danger {
    color: var(--danger);
}

.btn_blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--blue);
    --bs-btn-hover-border-color: var(--blue);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--blue);
    --bs-btn-active-border-color: var(--blue);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--blue);
    --bs-btn-disabled-border-color: var(--blue);
}

.hoverable {
    transition: all 300ms ease;
}

.hoverable:hover {
    box-shadow: 0 0 10px gray !important;
}

.pointer {
    cursor: pointer !important;
}

.is_blur {
    filter: blur(3px);
}

.transition_300 {
    transition: all 300ms ease;
}

.hoverable_text {
    transition: all 300ms ease;
}

.hoverable_text:hover {
    text-shadow: 0 0 5px gray;
}

@media(min-width: 768px) {
    .w-md-50 {
        max-width: 51% !important;
    }
}

@media(max-width: 500px) {
    .min_w_100 {
        min-width: 100% !important;
    }
}

a {
    text-decoration: none;
}


/*------------------specific styles-------------------*/
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#main_menu {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffffbd), color-stop(rgba(255 255 255 / 80%)), to(#ffffff80)), url(/images/lettersBack.png) no-repeat;
    background: linear-gradient(#ffffffbd, rgb(255 255 255 / 80%), #ffffff80), url(/images/lettersBack.png) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* #main_menu {
    background: -webkit-gradient( linear, left top, left bottom, from(#ffffffbd), color-stop(rgba(255 255 255 / 80%)), to(#ffffff80) ), url(../images/lettersBack2.jpg) no-repeat;
    background: linear-gradient(#ffffffbd, rgb(255 255 255 / 80%), #ffffff80), url(../images/lettersBack2.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
} */
.main_content {
    /* position: fixed; */
    width: 100%;
    /* height: calc(100vh - 113.2px); */
    /* bottom: 57px; */
    /* left: 0; */
    overflow: auto;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 57px;
}

#typing_box {
    min-height: 56px;
}

#addSentenceOffCanvas {
    /* position: fixed; */
    /* height: calc(100vh - 113.2px); */
    /* bottom: 57px; */
    /* top: unset !important; */
    overflow: auto;
}

#speech_record_btn.holded::before {}

#speech_record_btn_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

#speech_record_btn_box.holded::before {
    content: "";
    border: 1px solid blue;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    animation: slide-in 2s infinite;
}

@keyframes slide-in {
    0% {
        width: 0px;
        height: 0px;
        opacity: 1;
    }

    100% {
        opacity: 0;
        width: 200px;
        height: 200px;
    }
}

#offline_elem i {
    text-shadow: 0 0 4px white
}

#offline_elem span {
    position: relative;
    left: -10px;
    text-shadow: 0 0 5px white;
    font-size: 26px;
    top: 3px;
    color: #eb1010;
}

#install-prompt{
    position: fixed;
    text-align: center;
    height: 50px;
    bottom: -59px;
    background: #3182ce;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 7px;
    transition: all 400ms ease;
}

#install-prompt.show{
    bottom: 30px;
}

.has_tag::before{
    content: "...";
    position: absolute;
    top: -2px;
    right: 24px;
    width: 30px;
    background: #292d3e;
    text-align: center;
    height: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px white;
    cursor: pointer;
}