@font-face{
    font-family: Oxanium;
    src: url('/assets/fonts/oxanium/Oxanium-Regular.woff2');
    }
    @font-face{ 
    font-family: Oxanium;
    src: url('/assets/fonts/oxanium/Oxanium-Bold.woff2');
    font-weight: bold;
    
    }

            body {
                font-family: 'Oxanium';
                margin: 0;
                background: var(--mainBG);
                color: var(--textColor);
                background-attachment: fixed;

            }
            p {
                font-size: 20px;
            }

            * {
                box-sizing: border-box;
            }

            h1,h2,h3{
                text-shadow: var(--textBoldColor) 2px 2px 5px;
            }

            #container {
                max-width: 1000px;
                margin: 0 auto;
            }

            #container a {
                color: var(--textBoldColor);
                font-weight: bold;
            }

            #container a:hover{
                font-style: italic;
            }

            #header {
                width: 100%;
                height: 10px;
                background-size: 100%;
            }
            #navbar {
                height: 40px;
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            #flex {
                display: flex;
            }

            .logocyber{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding-bottom: 10px;
            }
            
            ::selection{
                background-color: var(--bgSelection);
                text-shadow: 2px 2px 5px var(--textColor);
                color: var(--textSelection);
            }

            aside {
                width: 200px;
                padding: 20px;
                font-size: smaller;
                position: fixed;
                left: 70px;
            }

            main {
                flex: 1;
                padding: 20px;
                order: 2;
            }

            .mainbox{
                background: var(--contentBG);
                border-color: var(--contentBG);
                border-width: 1px;
                padding: 20px;
                 border-radius: 0px 0px 30px 0px
                
            }

            .mainbox:hover{
                border-color: var(--textBoldColor);
                border-style: solid;
                border-width: 1px;
            } 

            figcaption{
                font-style: italic;
                font-size: smaller;
                text-align: center;
                padding-top: 5px;
            }

            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
            }

            h1,
            h2,
            h3 {
                color: var(--textBoldColor);
                text-transform: uppercase;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                color: var(--textBoldColor);
            }

            #listalol li {
                padding-bottom: 10px;
            }



            a[target="_"]::after {
                content: url(/assets/general/icons/outlink2.png);
                 filter: var(--outlinkColor);
                 padding-left: 3px;
                 vertical-align: top;
}

            .reference a {
                font-size: 10px;
                text-decoration: none;
                vertical-align: top;
            }

            #listaref ol a{
                font-size: smaller;
                text-decoration: none;
            }

            #listaref ol a:hover{
                text-decoration: underline;
            }

            .navbutton{
                background-color: var(--buttonBG);
                color: var(--textBoldColor);
                width: 160px;
                height: 30px;
                border-radius: 0px 0px 15px 0px;
                border-color: var(--textColor);
                margin-left: 10px;
                font-family: 'Oxanium';
            } 

            .navbutton:hover{
                border-color: var(--textBoldColor);
                cursor: pointer;
            }

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
            }

                .charflex{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        max-width: 100%;
        columns: 2;
    }

    .imgflex{
        height: 150px;
        width:  150px;
        position: relative;
        display: flex;
    }
    .textflex{
        padding-left: 10px;
        max-width:80%;
        height: 160px;
        overflow: scroll;
        border-style: solid;
        border-radius: 0px 0px 10px 0px;
    }
    .char:nth-child(even){text-align: right;}

    .deivi:nth-child(odd){border-radius: 0px 0px 0px 10px;}
    

            @media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }
                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 1;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
                aside {
                    position: relative;
                    left: 0px;
                }
                .char{text-align: center;}
         .char:nth-child(even){text-align: center;}
        .deivilegal{justify-content: center;}
        .deivi{height:300px}
            }