@font-face {
    font-family: 'chakrapetch';
    src: url('https://webbudata.com/static/fonts/Chakra_Petch/ChakraPetch-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --sp_fonts_lang: 'chakrapetch', 'Comfortaa', 'Montserrat', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}

* { min-width: 0; min-height: 0; }  /* flexbox issue */

html#languages {
    width: 100%;
    height: 1000%;  /* using 1000% so that the gradient doesnt end abruptly if there is scrolling and it should be long to have contrast even at the bottom between font and bg in long story in mobile */
    font-family: var(--sp_fonts_lang);
    /*background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);*/
    background-color: #000000;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #000000 100%);

    color: black;
}

a {
    color: black;
    font-family: var(--sp_fonts_lang);
}

a:visited {
    text-decoration: none;
}

p {
    margin-bottom: 30px;
    font-size: 20px;
}

input, select {
    font-family: var(--sp_fonts_lang);
}

input[type=button], input[type=submit] {
    -webkit-appearance: none; /* Disable rounded buttons in ios */
    color: black; /* be explicit as iOS makes it white */
}

#top_bar_language {
    background: rgba(0, 0, 0);
    width: 100%;
    height: 75px;
    margin-bottom: 20px;
    margin-top: 0px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

#top_bar_inner_language {
    display: flex;
    width: var(--contentwidth);
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

a#webbu_header {
    color: white;
    font-family: var(--sp_fonts_lang);
    text-decoration: none;
}

a#webbu_header:visited {
    color: white;
    text-decoration: none;
}

#align_left_top_bar {
    flex: 2;
}

#align_right_top_bar {
    flex: 5;
    text-align: right;
    font-size: 32px;
}

.top_bar_link {
    color: white;
    font-size: 18px;
    text-decoration: none;
    padding-right: 10px;
    cursor: pointer;  /* even for contact which triggers js (not link) */
}

.top_bar_link:visited {
    color: white;
    text-decoration: none;
}

.top_bar_link:hover {
    opacity: 0.6;
}

#top_flag {
    text-shadow: 0px 0px 10px white;
    font-size: 24px;
}

#user_account_link {
    text-align: center;
    border: 1px solid white;
    border-radius: 3px;
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 5px;
}

#user_account_link:hover {
    color: #FCDF03;
    background-color: #222;
}

#upgrade_link {
    color: #FCDF03;
}

#upgrade_link_white {
    color: #FFFFFF;
}

#language_image_div {
    width: 60%;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    background: #FCDF03;
    border-radius: 10px;
    text-align: center;
    box-shadow: 5px 5px 5px black;
}

#left_div {
    display: inline-flex;  /* good for mobile when image is smaller and needs vertical align */
    align-items: center;
    height: 100%;
}

#right_div {
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin-left: 10%;
    vertical-align: top;
    min-width: 5px;
}

#right_div_text {
    text-align: left;
}

#learn_language_img {
    max-height: 200px;
}

#language_sign_up_form {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
/*    border: 1px solid white;*/
    padding: 10px;
    padding-bottom: 20px;
    text-align: center;
/*    background: rgba(0, 0, 0, 0.2);*/
    background-color: #000000;
    background-image: linear-gradient(180deg, #FBDF00 0%, #FBD100 100%);
    border-radius: 10px;
    box-shadow: 5px 5px 5px black;
}

#sign_up_title {
    font-size: 20px;
}

#email_login_input {
    display: block;
    width: 95%;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #cccccc;  /* border-radius adds a shadow, so we remove it */
    font-size: 16px;  /* big to prevent iOS auto zoom */
    box-sizing: border-box;
}

#user_select_level {
    display: block;
    height: 40px;
    width: 95%;
    cursor: pointer;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #cccccc;  /* border-radius adds a shadow, so we remove it */
    font-size: 16px;  /* big to prevent iOS auto zoom */
    box-sizing: border-box;
    font-family: var(--sp_fonts_lang);
}

#sign_up_button {
    height: 40px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #cccccc;  /* border-radius adds a shadow, so we remove it */
    background-color: white;  /* disable blue submit buttons in iOS */
}

#sign_up_button:hover {
    opacity: 0.7;
}


#show_me_div {
    margin-left: auto;
    margin-right: auto;
    width: var(--contentwidth);
    text-align: center;
}


.show_me_link {
    display: block;
    margin-bottom: 10px;
}

/* Mobile navigation menu */

#mobile_navigation_modal_box {
}

#modal_content_navigation {
    background-color: black;
    width: 85%;
}


#menu_button {
    display: none;  /* only visible in mobile*/
    font-size: 28px;
    margin-left: 10px;
}

#menu_button:hover {
    opacity: 0.6;
}


.nav_link {
    display: block;
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding-bottom: 20px;
}

.nav_link:visited {
    color: white;
}

.nav_link:hover {
    opacity: 0.6;
}

.flag_link {
    text-decoration: none;
}

.flag_link:visited {
    text-decoration: none;
}



#footer_bar {
    width: 100%;
    height:500px;
    background-color: black;
    color: white;
    padding-top: 20px;
}


#footer_bar_inner {
    width: var(--contentwidth);
    margin-left: auto;
    margin-right: auto;
}

.footer_bar_link {
    display: block;
    margin-top: 20px;
    color: white;
    font-size: 14px;
    text-decoration: none;
/*    padding-right: 16px;*/
    cursor: pointer;  /* even for contact which triggers js (not link) */
}


.footer_bar_link:visited {
    color: white;
}

@media screen and (max-width: 1600px) {
    #top_bar_inner_language {
        width: var(--contentwidthwider1);
    }
}


@media screen and (max-width: 1300px) {

    #top_bar_inner_language {
        width: var(--contentwidthwider2);
    }

    /* This is to make sure that the divs below dont become too small for their content when window is 1200-1300px wide   */
    #language_image_div {
        width: 70%;
    }

    #language_sign_up_form {
        width: 70%;
    }

}


@media screen and (max-width: 1200px) {

    #align_right_top_bar {
        flex: 7;  /* increase size of right top bar vs left (logo) when screen is smaller */
    }

    #language_image_div {
        width: 95%;
    }

    #left_div {
    }

    #right_div {
        margin-left: 10px;
    }

    #language_sign_up_form {
        width: 95%;
    }
}


/* Mobile ------------------------------------------- */
@media screen and (max-width: 900px) {


    #top_bar_language {
        margin-bottom: 10px;
    }

    #top_bar_inner_language {
        width: 90%;
    }

    #align_right_top_bar {
        padding-right: 20px;
    }

    #language_image_div {
        width: 95%;
    }

    #left_div {
    }

    #right_div {
        margin-left: 10px;
        height: 200px;
        background: #FCDF03;
    }

    #right_div_text {
        text-align: left;
    }

    #learn_language_img {
        display: block;
        max-height: 140px;
    }

    #language_sign_up_form {
        width: 90%;
    }

    .top_bar_link {
        display: none;
    }

    #menu_button {
        display: inline-block; 
    }

    #sign_up_button { 
        font-size: 16px;
    }

}


/* Mini Mobile, like ipod touch 7th gen ------------------------------------------- */
@media screen and (max-width: 350px) {

    #left_div {
    }

    #right_div {
        margin-left: 1px;
    }

    #right_div p {
        margin: 5px;
        font-size: 18px;
    }

    #learn_language_img {
        max-height: 100px;
    }
}