nav .navbar-brand
{
    /* size for brand */
    font-size: xx-large;
}

/* colors for brand */
nav .navbar-brand .blue
{
    color: #156de9;
}
nav .navbar-brand .red
{
    color: #e42c22;
}
nav .navbar-brand .yellow
{
    color: #f3b420;
}
nav .navbar-brand .green
{
    color: #09a034;
}

main .form-control
{
    /* center form controls */
    display: inline-block;

    /* override Bootstrap's 100% width for form controls */
    width: auto;
}
main
{
    /* scroll horizontally as needed */
    overflow-x: auto;


    /* center contents */
    text-align: center;
}

main img
{
    /* constrain images on small screens */
    max-width: 100%;
}

button.btn
{
    box-shadow: 5px 5px 8px rgba(0,0,0,0.8);
    padding: 10px;
    margin-top:10px;
    cursor:pointer;
    white-space: normal;
}

button.navbar-toggler
{
    box-shadow: 5px 5px 8px rgba(0,0,0,0.2);

}
.boxed
{
    padding: 20px;
    border-style: solid;
    border-radius: 30px;
    box-shadow: 5px 5px 8px rgba(0,0,0,0.2);
}

div
{
    margin-top: 30px;
}
input
{
    max-width: 80%;
}

/* arabic font */
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/almarai/v5/tsstApxBaigK_hnnQ1iFow.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }