/*  
    halkaBox.js , url: https://github.com/ahmednooor/halkaBox.js
    Version: 1.5.0
    Author: Ahmed Noor , url: https://github.com/ahmednooor
    License: MIT , url: https://opensource.org/licenses/MIT
*/


 *, *:before, *:after {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
       /* body {
            max-width: 100vw;
            overflow-x: hidden;
            font-family: sans-serif;
            margin: 0 auto;
            background-color: white;
        }
        */
		/*
        .wrapper {
            margin: 0 auto;
            max-width: 800px;
        }
		*/
        header h1 {
            text-align: center;
            margin-top: 30px;
        }
        
        header h1 a {
            color: black;
            text-decoration: none;
        }
        
        header h1 a:hover, header h1 a:focus {
            color: black;
            text-decoration: none;
        }
        
        header h1 code {
            font-size: 1.5rem;
            font-weight: normal;
        }
        
        header h1 code span {
            font-size: 1rem;
        }
        
        header .menu {
            text-align: center;
        }
        
        header .menu a {
            display: inline-block;
            padding: 10px;
            color: royalblue;
            text-decoration: none;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: 1px solid royalblue;
            line-height: 1;
            margin: 0 6px;
        }
        
        header .menu a:hover, header .menu a:focus {
            background-color: royalblue;
            color: white;
        }
        
        .gallery {
            margin: 0 auto;
            text-align: center;
        }

        .gallery .dscr {
            font-size: 1.5rem;
        }
        /*
        .gallery a {
            display: inline-block;
            width: 192px;
            height: 192px;
            border: 1px solid royalblue;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            overflow: hidden;
            background-color: white;
        }
		*/
		
		 .gallery a {
            display: inline-block;
            width: 192px;
            height: 192px;
            border: 0px solid royalblue;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            overflow: hidden;
            background-color: white;
        }

        .gallery a img {
            display: block;
            width: 190px;
            height: 190px;
            padding: 10px 10px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            overflow: hidden;
            -o-object-fit: cover;
            object-fit: cover;
            -o-object-position: center;
            object-position: center;
        }
        
        .usage {
            max-width: 610px;
            padding: 0 10px;
        }
        
        .usage h2, .usage h4, .usage h3 {
            text-align: center;
        }
        
        .usage h4 code {
            font-size: 1.5rem;
            font-weight: normal;
        }
        
        .usage code a {
            color: royalblue;
            text-decoration: none;
        }
        
        .usage code a:hover, footer code a:focus {
            text-decoration: underline;
        }
        
        .usage h3 code {
            font-weight: normal;
        }
        
        .usage pre {
            display: block;
            max-width: 600px;
            width: auto;
            margin: 0 auto;
            color: darkblue;
            border: 1px dotted royalblue;
            padding: 10px;
            line-height: 1.4;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            overflow: auto;
            background-color: white;
        }
        
        .usage pre span {
            color: royalblue;
        }
        
        .usage pre span em {
            color: orangered;
            font-style: normal;
        }
        
        footer {
            text-align: center;
            padding-bottom: 20px;
        }
        
        footer code {
            font-size: 1rem;
            font-weight: normal;
        }
        
        footer code a {
            color: royalblue;
            text-decoration: none;
        }
        
        footer code a:hover, footer code a:focus {
            text-decoration: underline;
        }
        
        @media only screen and (max-width: 640px) {
            .gallery a {
                width: 142px;
                height: 142px;
            }

            .gallery a img {
                width: 140px;
                height: 140px;
                padding: 8px 8px;
            }
        }