/*! my classes and ID terms ( to avoid confusing myself )
#top : TableOfContent for small & mediums
.container : acting on behalf of hidden body
.logo-search : kind of navigation bar
.my-doc : after container ( kind of main ),  contains
#main-doc or main : containing the actual documentation
.top-table : kind of "#navbar" (table of content), 
        i did this in order to bypass the script of the challenge
.
.
.
for other, just the structure of the HTML*/
/*! my classes and ID terms */

/* GLOBAL STYLING */

/*Repository */
:root{
    --highlight-color: #721E02;
    --button-bg:linear-gradient(45deg,  #022e79,  #0a409e);
/*Repository End*/

}
*{
    margin: 0;
    box-sizing: border-box;
    
}
.tableDmat a:link{
    text-decoration:none;
}
.top-table a:link{
    text-decoration:none;
}
p{
    line-height: 1.5rem;
}
strong{
    font-weight: 900;
}
main, nav, footer > *{
    margin:0% 1%;
}
em, a{
 color:var(--highlight-color);
 font-weight: bold;
}
/* GLOBAL STYLING */

/* body */
body{
    /* position: relative; */
    background:#fff;/* #e9e8e8*/
    overflow:hidden;
}
    /* body > container */
    .container{
        width:100vw;
        height:100vh;
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr;
    }
        /* scrollbars styling  */ 
        *::-webkit-scrollbar{
            width:var(--vertical-scrl-width);
        }
        *::-webkit-scrollbar-track{
            background:#e9e8e8;
        }
        *::-webkit-scrollbar-thumb:horizontal{
            background: #902d0caf;
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='right' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 13.3 20' enable-background='new 0 0 13.3 20' xml:space='preserve'%3E%3Cpolygon id='right' fill='%23902D0C' points='5.3,10 0,14 0,20 13.3,10 0,0 0,6 '/%3E%3C/svg%3E");        
            border-radius: 20%;
        }
        *::-webkit-scrollbar-thumb:vertical{
            background: #902d0caf;
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='bottom' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 13.3' enable-background='new 0 0 20 13.3' xml:space='preserve'%3E%3Cpolygon id='bottom' fill='%23902D0C' points='10,5.3 14,0 20,0 10,13.3 0,0 6,0 '/%3E%3C/svg%3E");        
            border-radius: 50%;
            height: 30vh;
        }
        *::-webkit-scrollbar-thumb:hover{
            background: #902d0cff;
        }

        *::-webkit-scrollbar-button:horizontal:increment {
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='right' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 13.3 20' enable-background='new 0 0 13.3 20' xml:space='preserve'%3E%3Cpolygon id='right' fill='%23902D0C' points='5.3,10 0,14 0,20 13.3,10 0,0 0,6 '/%3E%3C/svg%3E");        
            background-repeat: no-repeat;
        }
        
        *::-webkit-scrollbar-button:horizontal:decrement {
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='left' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 13.3 20' enable-background='new 0 0 13.3 20' xml:space='preserve'%3E%3Cpolygon id='left' fill='%23902D0C' points='8,10 13.3,14 13.3,20 0,10 13.3,0 13.3,6 '/%3E%3C/svg%3E");        
            background-repeat: no-repeat;
        }
        
        *::-webkit-scrollbar-button:vertical:increment {
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='bottom' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 13.3' enable-background='new 0 0 20 13.3' xml:space='preserve'%3E%3Cpolygon id='bottom' fill='%23902D0C' points='10,5.3 14,0 20,0 10,13.3 0,0 6,0 '/%3E%3C/svg%3E");        
            background-repeat: no-repeat;
        }
        
        *::-webkit-scrollbar-button:vertical:decrement {
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='top' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 13.3' enable-background='new 0 0 20 13.3' xml:space='preserve'%3E%3Cpolygon id='top' fill='%23902D0C' points='10,8 14,13.3 20,13.3 10,0 0,13.3 6,13.3 '/%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
        }
        /* scrollbars styling  */ 
        
        /* --> container > logo-search */
        #logo-search{
            background:#902d0c ;/*#dd4814*/
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding:6px 2%;
            grid-area:1/1/2/2;
        }
            .ubuntu-icon{
                min-width: calc(140px + 3vw);
            }
            #top{
                width:100%;
                display: flex;
                justify-content: center;
            }

            /* HIDING THE <button> and #top on HIGHER screens  */
            @media (min-width:730px){
                #top{
                    display: none;
                }
                .back-to-top{
                    display: none;
                }
                footer a{
                    display: none ;
                    }


                #top{
                    width:100%;
                    padding: 5% 2%;
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                }
                #top h3{
                    width: 100%;
                    font-size: calc(1.2rem + 0.5vw);
                    border-bottom: 2px solid;
                    text-align: center;
                    padding-bottom: 10%;
                    line-height: calc(1.7rem + 0.7vw);
                    font-weight: normal;
                }
                #top p{
                    display: none;
                }
                .top-table{
                    display: none;
                }

            }
            /* HIDING THE <button> and #top on HIGHER screens END */

            /* SHOWING THE <button> and #top on MEDIUM screens  */
            @media (min-width:420px) and (max-width:730px){

                    #top{
                        width:100%;
                        padding: 5% 2%;
                        display:flex;
                        flex-direction: column;
                        align-items: center;
                        }
                        #top{
                            width:100%;
                            padding: 5% 2%;
                            display:flex;
                            flex-direction: column;
                            align-items: center;
                        }
                        #top h3{
                            width: 100%;
                            font-size: calc(1.2rem);
                            border-bottom: 2px solid;
                            text-align: center;
                            padding-bottom: 10%;
                            line-height: calc(1.7rem);
                        }
                        #top p{
                            font-size: calc(1.2rem);
                            padding: 10% 0% 10%;
                        }
        
                    form{
                        width: 100%;
                        display:flex;
                        justify-content: center;
                    }
            }
            /* SHOWING THE <button> and #top on MEDIUM screens  */

            /* HIDDING THE form from logo bar and SHOWING THE form on the #top */
            @media (max-width:420px){
                #logo-search{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                form{
                    display:none;
                }
                #top{
                    width:100%;
                    padding: 5% 2%;
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                }
                #top h3{
                    width: 100%;
                    font-size: calc(1.2rem);
                    border-bottom: 2px solid;
                    text-align: center;
                    padding-bottom: 10%;
                    line-height: calc(1.7rem);
                }
                #top p{
                    font-size: calc(1.2rem);
                    padding: 10% 0% 10%;
                }
                #top form{
                    width:100%;
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                    margin:0% 0% 8%;
                    
                }
            }
            @media (min-width:420px){
                #top form{
                    display:none;
                }
            }
                .back-to-top{
                    cursor: pointer;
                    padding:2%;
                    margin:2% 0%;
                    border-radius: 20%;
                    background:var(--button-bg);
                    outline:none;
                    color: #fff;
                    animation:back 3s infinite linear;
                }
                @keyframes back{
                    0%{
                        transform:scale(0.9, 0.9);
                    }
                    50%{
                        transform:scale(1, 1);
                    }
                    100%{
                        transform:scale(0.9, 0.9);
                    }
                }
                .back-to-top:hover{
                    background:#06b521;
                    transition-delay: 10ms;
                }


        /* --> container > logo-search END */

        /* --> container > my-doc */
        .my-doc{
            grid-area:2/1/3/2;
            display:grid;
            grid-template-areas: 
            "aside main";
            grid-template-columns:auto 1fr;
            overflow: hidden;
        }
        /* --> .my-doc > navbar */
            #navbar{
                margin-left: 0;
                grid-area:aside;
                display:flex;
                flex-direction:column;
                overflow: hidden;
                border-right:10px solid;
                border-right-color: var(--highlight-color);
            }
            #navbar::-webkit-scrollbar{
                width:var(--vertical-scrl-width-navbar);
            }
    
            @media (max-width:730px){
                #navbar{
                    display: none;
                }
            }
        
            .main-header{
                padding:7% 2.5%;
                font-size: 1.6rem;
                line-height: 2rem;                    
                border-bottom: 1px solid;
                border-bottom-color: var(--highlight-color);
                text-align: center;
            }
            
                #navbar a{
                    display:inline;
                    font-size: 1.1rem;
                    line-height: 1.5rem;
                    color:var(--highlight-color);
                    
                }
                /* #navbar a:hover{
                } */
                    .tableDmat{
                        width:100%;
                        overflow:auto;
                        padding-top: 10%;
                        padding-right:5%;
                        padding:10% 5% 5% ;
                    }
                    .tableDmat p:nth-child(1){
                        text-align: center;
                        font-size: 1.6rem;
                        line-height: 1.5rem;
                        padding:0% 2.5% 5%;
                            
                    }
        
        /* --> .my-doc > navbar END*/
            #main-doc{
                width: 100%;
                grid-area:main;
                overflow: auto;
                margin:0%;
                padding: 2%;
            }
            #main-doc header{
                    font-size :calc(1.5rem + 0.3vw);
                    font-weight: 700;
                    line-height:calc(1.8rem + 0.3vw);/* 3rem*/
                }
                section{
                    margin-bottom: 5%;
                }
                article{
                    padding:0% 2%;
                }
                code{
                    margin:2%;
                }
                    pre{
                        overflow: auto;
                        padding:2%;
                        background: rgb(231, 227, 227);
                        border : 3px dotted black;
                    }
                /* #navbar{
                    display: none;
                } */
        /*--> container > my-doc END*/
    /* body > container END*/
/* body END */