html
{
    --lightblue:   #AED9FF;
    --chromeblue:  #518DB9;
    --lightsalmon: #FFAB86;
    --salmon:      #FF6F62;
    --orange:      #F45702;
    --ivory:       #FFFEF0;
}

body
{
    /*background:  url("bg1-gr-white.png");*/
    font-family: kei, paybooc, Roboto, serif;
    font-size:   12px;
    color:       #518DB9;
    background:  repeating-linear-gradient(
                         to right,
                         #AED9FF,
                         #AED9FF 30px,
                         #D2EAFF 20px,
                         #D2EAFF 50px);
}

h1, h3
{
    color: #518DB9;
}

a
{
    text-decoration: none;
    color:           #F45702;
}

a:hover
{
    text-decoration: underline;
    color:           #F45702;
}

.txt-closed
{
    font-size:   5em;
    font-weight: bolder;
    color:       #FD7062;
}

.top-bar
{
    height:          10vh;
    border-radius:   18px;
    background:      linear-gradient(to top, #FFAB86, 40%, #FF6F62) no-repeat;
    background-size: 100%;
}

.video-container
{
    width:      auto;
    max-width:  100%;
    margin:     auto;
    text-align: center;
}

.video-container iframe
{
    width:     100%;
    max-width: 100%;
    margin:    auto;
}

#header-discord, #header-twitter
{
    zoom:  0.5;
    color: #518DB9;
    fill:  #518DB9;
}

#lang-container
{
    order:   4;
    padding: 10px;
}

#header-discord-btn, #header-twitter-btn
{
    order: 3;
}

#navs-flex
{
    padding: 0 10px;
}

#lang-dropdown
{
    display:    inline-block;
    /* height: 0; */
    align-self: center;
    height:     auto;
    margin:     auto;
    padding:    0;
}

#lang-dropdown:hover
{
    box-shadow: none !important;
}

#lang-container .dropdown-item:focus, #lang-container .dropdown-item:hover
{
    text-decoration: none;
}

#lang-dropdown .dropdown-item:focus, #lang-dropdown .dropdown-item:hover
{
    color: transparent;
}

#header-discord-btn, #header-discord g path, #header-twitter-btn, #header-twitter path
{

    color: var(--ivory);
    fill:  var(--ivory);
}

#header-discord g path, #header-twitter path
{
    color: var(--ivory);
    fill:  var(--ivory);
}

#header-discord-btn:hover #header-discord g path, #header-twitter-btn:hover #header-twitter path
{

    color: #518DB9;
    fill:  #518DB9;
}

#header-discord g path:hover, #header-twitter path:hover
{
    color: #518DB9;
    fill:  #518DB9;
}

.language-icon-alt
{
    display: none;
}

.logo-link
{
    width:  30vh;
    height: 100%;
}

.logo-top
{
    width:               100%;
    height:              100%;
    background-image:    url(LogoAdjustedSize.png);
    background-repeat:   no-repeat;
    background-position: 20px center;
    background-size:     contain;
    background-size:     auto 80%;
}

.no-svg .language-icon-alt
{
    display:          block;
    width:            100px;
    height:           100px;
    background-image: url(translate.png);
}

.dropdown-menu
{
    color:            #518DB9;
    background-color: #FFFEF0;
}

.screen-container
{
    display:         flex;
    overflow:        hidden;
    align-content:   center;
    align-items:     center;
    flex-wrap:       wrap;
    justify-content: space-around;
    width:           100%;
    min-height:      calc(100vh - 80px);
    padding-top:     5vh;
    padding-bottom:  5vh;
    justify-items:   center;
}

.screen
{

    /*transition: all .25s;*/
    /*text-align: center;*/
    /*height: 40px;*/
    /*position: relative;*/
    display:        block;
    max-width:      50%;
    margin:         8px 0 32px 8px;
    margin-top:     0;
    margin-bottom:  0;
    vertical-align: middle;
    border:         2px solid #518DB9;
    border-radius:  5px;
    box-shadow:     #518DB9 1px 1px 0,
                    #518DB9 2px 2px 0,
                    #518DB9 3px 3px 0,
                    #518DB9 4px 4px 0,
                    #518DB9 5px 5px 0,
                    #518DB9 6px 6px 0,
                    #518DB9 7px 7px 0,
                    #518DB9 8px 8px 0;
}

.screen-inner
{
    line-height: 1.5rem;
    margin:      8px 8px 8px 8px;
    padding:     1.15rem;
}

.screen-inner > div, li
{
    padding: 1.15rem 0 0 0;
}


.editor-container
{
    position: relative;
}

#hamburguer
{
    position:      fixed;
    z-index:       100;
    top:           10px;
    left:          15px;
    display:       none;
    align-self:    center;
    flex:          0 1 30px;
    /* background-color: rgba(0, 0, 0, 0.5); */
    height:        40px;
    margin-right:  20px;
    padding:       5px;
    padding-top:   10px;
    border-radius: 5px;
    background:    #518DB9;
    background:    transparent;
}

#hamburguer span
{
    position:         relative;
    z-index:          1;
    display:          block;
    width:            28px;
    height:           4px;
    margin-bottom:    5px;
    transition:       transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                      opacity 0.55s ease;
    transition:       0.5s;
    transform-origin: 4px 0px;
    border-radius:    3px;
    border-radius:    0;
    background:       #FFFEF0;
}

#hamburguer.active span
{
    background: #518DB9;

}

.docs-logo > a
{
    width:  20%;
    height: 10vh;
}

.docs-logo > a > img
{
    object-fit: contain
}

.screen
{
    background-color: #FFFEF0
}

.shuba-button
{
    font-size:        larger;
    height:           100%;
    text-align:       center;
    vertical-align:   middle;
    text-decoration:  none;
    border-style:     none !important;
    background-color: #FF6F62;
    box-shadow:       none;
}

.shuba-button:hover
{
    transition: all .25s;
    box-shadow: inset 0px -10px 5px 0px #FFFFF0;

}

#nav-tab button
{
    font-size: larger;
}

#dropdown-toggle svg
{
    padding-top: 40%;
}

.nav
{
    align-items: center;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active
{
    color:        #FFFEF0;
    border-style: none !Important;
    border-color: transparent;
}

.nav-tabs .nav-link
{
    text-transform: uppercase;
    color:          #FFFEF0;
}

.nav-tabs .nav-link.active
{
    color: #518DB9;
}

.nav-link, .nav-link:focus, .nav-link:hover
{
    color: #518DB9;
}

.nav-link.active
{
    background-color: #FF6F62 !important;
    box-shadow:       inset 0px -10px 5px 0px #FFFFF0;
}

#home #header-discord-btn, #home #header-twitter-btn
{
    display: none;
}

#lang-container .dropdown-menu
{
    min-width:          130px;
    padding:            0 20px 10px;
    -webkit-box-shadow: 0px 5px 6px 2px rgba(0, 0, 0, 0.32);
    box-shadow:         0px 5px 6px 2px rgba(0, 0, 0, 0.32);
}

.flag-icon
{
    margin-right: 15px;
    border:       1px solid #CCC9C9;
}

.form-check-input[type=radio]
{
    position: relative;
    top:      6px;
}


@media (max-width: 900px)
{

    .txt-closed
    {
        font-size:   3em;
        font-weight: bolder;
        color:       #FD7062;
    }

    .screen-inner
    {
        margin:  3px;
        padding: 5px;

    }

    .screen
    {
        max-width:   95%;
        margin-top:  30px;
        margin-left: -10px;
    }

    #previewSection
    {
        width:      90%;
        margin:     auto !important;
        margin-top: 20px !important;
        padding:    2px !important;
    }

    #result
    {
        display: none;
    }

    .editor-container
    {
        height: auto !important;
    }

    #right-tools
    {

        position:         absolute !important;
        right:            0 !important;
        width:            150px !important;
        padding:          0 !important;
        background-color: transparent !important;
        box-shadow:       none !important;
    }

    #right-tools button
    {
        font-size: 15px !important;
    }

    #center-interface
    {
        text-align: left !important;
    }

    #hamburguer
    {
        display: block;
    }

    nav .mx-auto
    {
        overflow:   hidden;
        max-height: 0;
        transition: 0.5s;
    }

    nav .mx-auto.active
    {
        max-height: 100vh;
    }

    #container-topbar
    {
        padding: 0;
    }

    .top-bar
    {
        overflow:                hidden;
        flex-wrap:               wrap;
        height:                  auto;
        max-height:              10vh;
        transition:              0.5s;
        border-radius:           18px;
        border-top-left-radius:  0;
        border-top-right-radius: 0;
        background:              linear-gradient(to top, #FFAB86, 40%, #FF6F62) no-repeat;
        background-size:         100%;
    }

    .top-bar.active
    {
        max-height: 100vh;
    }

    .logo-link
    {
        flex:       0 1 50%;
        width:      30vh;
        height:     100%;
        height:     10vh;
        margin:     auto;
        text-align: center;
    }

    .nav
    {
        display:        flex;
        align-items:    center;
        flex-direction: row;
        flex-wrap:      wrap;
        width:          100%;
        margin-bottom:  0;
        padding-left:   0;
        list-style:     none;
    }

    #nav-tab button
    {
        font-size:        larger;
        padding-top:      0;
        padding-bottom:   10px;
        text-transform:   uppercase;
        background:       none;
        background-color: transparent !important;
        box-shadow:       none;
    }

    #nav-tab button::before
    {
        display:       block;
        width:         90%;
        height:        3px;
        margin:        auto;
        margin-bottom: 10px;
        content:       " ";
        background:    white;
    }

    .nav-tabs .nav-link
    {
        flex:                    1 1 100%;
        order:                   2;
        height:                  auto;
        margin-bottom:           -1px;
        padding:                 15px;
        border:                  1px solid transparent;
        border-top-left-radius:  .25rem;
        border-top-right-radius: .25rem;
        background:              0 0;
    }

    button#header-discord-btn, button#header-twitter-btn
    {
        display: none;
        flex:    1 1 50%;
    }

    .dropdown, .dropend, .dropstart, .dropup
    {
        position:   relative;
        align-self: center;
        flex:       1 1 50%;
        order:      1;
    }

    #lang-dropdown
    {
        padding-top:    0;
        padding-bottom: 0;
        border:         none;
        box-shadow:     none;
    }

    #header-discord, #header-twitter
    {
        height:      30px;
        padding-top: 0;
        color:       #518DB9;
        fill:        #518DB9;
        /* padding-top: 0; */
    }

    .logo-top
    {
        width:               100%;
        height:              100%;
        background-image:    url(LogoAdjustedSize.png);
        background-repeat:   no-repeat;
        background-position: center;
        background-size:     contain;
        background-size:     auto 80%;
    }

    #lang-container
    {
        position: fixed;
        top:      2vh;
        right:    0;
    }

    #home #header-discord-btn, #home #header-twitter-btn
    {
        display:    block;
        border:     none;
        background: transparent;

    }

    #navs-flex
    {
        flex:       1 1 100%;
        width:      100%;
        max-width:  initial;
        margin:     auto;
        margin-top: 20px;
    }

    div#soundButtons
    {
        position: relative;
        left:     -10px;
    }
}