@font-face {
    font-family: 'Noto_Sans';
    src: url("../../fonts/noto-sans-latin-500-normal.woff2") format("woff2");
    src: url("../../fonts/noto-sans-latin-500-normal.woff") format("woff");
}
@font-face {
    font-family: 'Roboto_regular';
    src: url("../../fonts/roboto-regular-webfont.woff2") format("woff2");
    src: url("../../fonts/roboto-regular-webfont.woff") format("woff");}

/*todo : add roboto*/
body{
    margin: 0;
    font-family: 'Noto_Sans', 'Roboto_regular', Calibri Light, Calibri ,serif;
    font-size: 18px;

}

h1 {
    color: #FFFFFF;
    font-size: 55px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 115%;
}

h2 {
    font-size: 2em;
    font-weight: 900;
    line-height: 115%;
}

h3 {
    font-size: 2em;
    font-weight: 900;
    line-height: 115%;
}

p{
    font-size: 1em;
    line-height: 160%;
    color: var(--dark-color);
}


.line-separator{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    height: 2px;
    background: var(--cream);
    overflow: hidden;
    &.large{
        width: 100%;
    }
}

.form-control:focus, :focus-visible {
    box-shadow: 0 0 0 .25rem var(--medium-brick);
    border-color: var(--medium-brick);
    outline-color: var(--medium-brick);
}

#flash_message {
    position: relative;
    top: 180px;
    left: 0;
    right: 0;
    text-align: center;
}

#isImpersonator {
    top: 160px;
    left: 50%;
    position: absolute;
    transform: translate(-50%)
}


@media (max-width: 992px) {
    body{
        font-size: 14px;
    }

    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 1.8em;
        font-weight: 900;
        line-height: 115%;
    }

    h3 {
        font-size: 1.6em;
        font-weight: 900;
        line-height: 115%;
    }

    p{
        font-size: 1em;
        line-height: 160%;
        color: var(--dark-color);
    }

}