@import "dev/flexy";
@import "dev/positions";
@import "dev/material";

body {
}


@include color('ads1',#8113ff );
@include color('ads2', #86adbd);
@include color('trads1',rgba(129, 19, 255, 0.55) );
@include color('trads2', rgba(134, 173, 189, 0.55));

input, body, *, h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI Light',Tahoma !important;
}

.h-p {

    .h-c {
        display: none;
    }
}

.h-p:focus, .h-ac {
    .h-c {
        display: block !important;
    }
}


@mixin media-one {
    @include f;
}

/** breakpoint */
@mixin ms-h1 {
    .brk:after {
        content: '2';
    }
}

@mixin ms-h2 {
    .brk:after {
        content: '1';
    }
}


/** breakpoint */
@mixin ms-w1 {
    .wcord {
        //  background-color: #ffd800;
        width: 100%;
    }

    *, body, input, select, h1, h2, h3, h4, h5 {
        font-size: 8pt  ;
    }
     

    @include mbh-1('api',420px,true);
}

@mixin ms-w2 {
    .wcord {
        //   background-color: #4cff00;
        width: 100%;

        *, body, input, select, h1, h2, h3, h4, h5 {
            font-size: 9pt  ;
        }
    }

    

    .brk:after {
        content: '2';
    }
}

@mixin ms-w3 {
    .wcord {
        //   background-color: #ff6a00;
        width: 100%;
    }

    *, body, input, select, h1, h2, h3, h4, h5 {
        font-size: 10pt ;
    }

    

    .brk:after {
        content: '3'; 

    }
}

@mixin ms-w4 {
    .wcord {
        width: 1010px;
    }

    *, body, input, select, h1, h2, h3, h4, h5 {
        font-size: 10pt ;
    }

    .brk:after {
        content: '4';
    }
}

@include mbw-3('api',420px,720px,1010px,true);

/* important to change after use*/
@mixin media-one {
    display:block;
}

#categories{ 

    font-weight:bold !important;

}

#categories div{
    border-radius:3px;
}