/* index and docs  page custom styles */
:root{
    --conditional-color: #fabf8f;
    --print-color: yellow;  /* used for objects */
    --function-color: #;
    --loop-color: #c944c9;
    --method-color: green;
    --variable-color:#15a194;
    --syntax-weight: 400;
    --paragraph-color: #7f7f7f;
    --string-int-color: #c5cff0;
}
html{
    -webkit-font-smoothing:antialiased;
    font-smooth: 2em;
    scroll-behavior: smooth;
    font-family: 'Rubik',sans-serif;
    letter-spacing: 1.1px;

}
.title{
    font-family: 'Rubik', sans-serif;
    font-weight: 300 !important;
    letter-spacing: 1px;
}

p{
    color: #676767;
}


/* color and font style for objects, functions, variables, conditions, loops, arrays etc. */
#print{
    color: var(--print-color);
    font-weight: var(--syntax-weight);
}
#condition{
    color: var(--conditional-color);
    font-weight: var(--syntax-weight);
}
#loop{
    color: var(--loop-color);
    font-weight: var(--syntax-weight);

}
#varName{
    color: var(--variable-color);
    font-weight: var(--syntax-weight);
}
#stringInt{
    color: var(--string-int-color);
    font-weight: var(--syntax-weight);
}

.container-fluid{
    padding-bottom: 30px;
}

#intro,
#variables,
#dataTypes,
#conditionals,
#loops,
#functions,
#arrays,
#importFunction,
#helperFunctions {
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #0B409C;
    letter-spacing: 1px;
}
#black-background{
    color: #fff;
    background-color: rgb(2, 21, 54);
    padding: 5px 25px 5px 25px;
    width: 25%;
}
.download_column-panel{
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.panel_items{
    width: 25%;
    border: 1px solid #32903F;
    display: flex;
    flex-direction:column;
    align-items: center;
    padding: 30px;
    border-radius: 5px;
    margin: 0 2% 2% 0%;
}
.panel_items p{
    font-size: 18px;
}
.panel_items button{
    background: #32903F;
    border:none;
    outline:none;
    padding: 10px;
    border-radius: 5px;
}
.panel_items button a{

     color: #fff;
     text-decoration:none;
     font-size: 13px;

}
.panel{
    display:none;
}
/* example styles */
.note p{
    font-size: 14px;
}
.fixedWidthParagraph{
    width:60%;
    text-align: justify;
    font-size: 14px;
}
.example {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 1);
    font-family: 'Rubik', sans-serif;
    width: 60%;
    margin: 15px 0 15px 00;
    border-left: 3px solid #32903f;
}
.note {
    display: flex;
    flex-direction: column;    
    background: #ffffcc;
    font-family: 'Rubik', sans-serif;
    width: 60%;
    margin: 15px 0 15px 00;
    padding: 15px 15px;
    border-left: 3px solid yellow;
}

.example-lang {
    font-size: 12px;
    color: #32903F;
    line-height: 0.5px;
    letter-spacing: 1px;
    padding: 10px 10px 10px 10px;
    align-self: flex-end;
}

.example-one {
    font-size: 13px;
    padding-left: 20px;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 300;
}

.example-output {
    border: 1px solid #ccc;
    background-color:  #efefef;
    width: 60%;
    display: flex;
    flex-direction: column;
}

.example-output-name {
    font-size: 12px;
    line-height: 0.5px;
    letter-spacing: 1px;
    padding: 10px 10px 10px 10px;
    align-self: flex-end;
}

.example-output-value {
    font-size: 16px;
    color: black;
    padding-left: 20px;
}
@media (max-width:1000px){
    .download_column-panel {
        flex-direction: column;
        width: 90%;
        align-items: flex-start;
    }

    .panel_items {
        width: 45%;
    }
}
@media (max-width:600px){

    
    p{
        font-size: 12.5px;
    }
    .download_column-panel{
        flex-direction:column;
        width: 90%;
        align-items: flex-start;
    }

    .panel_items{
        width: 90%;
    }
   .fixedWidthParagraph {
        width:100%;
        text-align: left;
        text-align: justify;
    }
    .example, .example-output{
        width: 100%;
    }
    #black-background{
        width: 100%;
    }
    .note{
        width: 100%;
    }

    #sidebar-wrapper {
        width: 0;
        display: none;
    }

    #page-content-wrapper {
        margin-left: 0px;
    }
}