html, body, section, article, header, div, span, object, figure, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
  {
    margin: 0; 
    padding: 0; 
    border: 0;
  }

*, *:after, *:before 
  {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
  }

:root 
  {
    --gats: 10px;
    --gatl: 40px;
    --link: #007f82;
    --pad: 3em;
  }

body 
  {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    background-color: #b1e4e8; 
    scrollbar-gutter: stable both-edges;
    -webkit-text-size-adjust: 100%;
  }

h1, h2 {font-size: 1.2em;}

a 
  {
    color: var(--link); 
    text-decoration: none; 
    border-width: 0 0 1px 0;
    border-style: dotted;
    border-color: var(--link);
  }

a:hover {color: var(--link); border-style: solid;}
b, strong {font-weight: 600;}

ul {margin: 0 0 0 20px; list-style-type: disc;}
li {padding: 0; margin: 0; width: auto;}

img {max-width: 100%; height: auto;}

.box 
  {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

section, section > * {gap: var(--gatl);}
div.box {gap: var(--gats);}
aside {gap: var(--gata);}

.balk {flex-wrap: nowrap;}
.blok {flex-wrap: wrap;}

.brr {flex-direction: row;}
.bcc {flex-direction: column;}

body > *
  {
    align-items: center;
    justify-content: center;
    width: 100vw; 
    padding: var(--pad) 0;
  }

section 
  {
    background-color: #fff; 
    padding: var(--pad);
    width: calc(100vw - 6em);
    max-width: 1100px;
  }

@media only screen and (max-width: 499px)
{

  :root 
  {
    --gata: 20px;
    --adeel: 1;
    --ddeel: 1;
  }

  footer {flex-direction: column;}
  footer * {width: 100%;}

}

@media only screen and (min-width: 500px) and (max-width: 799px)
{

  :root 
  {
    --gata: 20px;
    --adeel: 3;
    --ddeel: 1;
  }

}

@media only screen and (min-width: 800px)
{

  article > * {width: calc(( 100% - var(--gatl) ) / 2 );}

}

@media only screen and (min-width: 800px) and (max-width: 1049px)
{

  :root 
  {
    --gata: 25px;
    --adeel: 4;
    --ddeel: 2;
  }

}

@media only screen and (min-width: 1050px)
{

  :root 
  {
    --gata: 40px;
    --adeel: 6;
    --ddeel: 3;
  }

}

@media only screen and (min-width: 500px)
{

  footer {flex-direction: row;}
  footer > figure {width: calc( ( 100% - var(--gatl) ) / var(--adeel) );}
  footer > aside {width: calc( ( var(--adeel) - 1 ) * ( ( 100% - var(--gatl) ) / var(--adeel) ) );}

  aside > * {width: calc( ( 100% - ( ( var(--ddeel) - 1 ) * var(--gata) ) ) / var(--ddeel) );}

}