<commit_before>html {
  box-sizing: border-box;
}
 
*, *:before, *:after {
  box-sizing: inherit;
}

html {font-size: 16px; font-family: "Proxima Nova", Helvetica, Arial, sans-serif;} // This is just for reference

// Variables

$space-1: 0.5rem; //  8px
$space-2:   1rem; // 16px
$space-3: 1.5rem; // 24px
$space-4:   2rem; // 32px

// Layout

.inline       { display: inline; }
.block        { display: block; }
.inline-block { display: inline-block; }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-scroll { overflow: scroll; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after { clear: both; }

.float-left  { float: left; }
.float-right { float: right; }

.fit { max-width: 100%; }

.half-width { width: 50%; }
.full-width { width: 100%; }

// White Space

// Margin
.m0  { margin:        0; }
.mt0 { margin-top:    0; }
.mr0 { margin-right:  0; }
.mb0 { margin-bottom: 0; }
.ml0 { margin-left:   0; }
.mx0 { margin-left:   0; margin-right: 0;}
.my0 { margin-top:    0; margin-bottom: 0;}

.m1  { margin:        $space-1; }
.mt1 { margin-top:    $space-1; }
.mr1 { margin-right:  $space-1; }
.mb1 { margin-bottom: $space-1; }
.ml1 { margin-left:   $space-1; }
.mx1 { margin-left:   $space-1; margin-right: $space-1;}
.my1 { margin-top:    $space-1; margin-bottom: $space-1;}

.m2  { margin:        $space-2; }
.mt2 { margin-top:    $space-2; }
.mr2 { margin-right:  $space-2; }
.mb2 { margin-bottom: $space-2; }
.ml2 { margin-left:   $space-2; }
.mx2 { margin-left:   $space-2; margin-right: $space-2;}
.my2 { margin-top:    $space-2; margin-bottom: $space-2;}

.m3  { margin:        $space-3; }
.mt3 { margin-top:    $space-3; }
.mr3 { margin-right:  $space-3; }
.mb3 { margin-bottom: $space-3; }
.ml3 { margin-left:   $space-3; }
.mx3 { margin-left:   $space-3; margin-right: $space-3;}
.my3 { margin-top:    $space-3; margin-bottom: $space-3;}

.m4  { margin:        $space-4; }
.mt4 { margin-top:    $space-4; }
.mr4 { margin-right:  $space-4; }
.mb4 { margin-bottom: $space-4; }
.ml4 { margin-left:   $space-4; }
.mx4 { margin-left:   $space-4; margin-right: $space-4;}
.my4 { margin-top:    $space-4; margin-bottom: $space-4;}

.mx-auto { margin-left: auto; margin-right: auto; }

//Padding
.p0  { padding:        0; }
.pt0 { padding-top:    0; }
.pr0 { padding-right:  0; }
.pb0 { padding-bottom: 0; }
.pl0 { padding-left:   0; }
.px0 { padding-left:   0; padding-right: 0;}
.py0 { padding-top:    0; padding-bottom: 0;}

.p1  { padding:        $space-1; }
.pt1 { padding-top:    $space-1; }
.pr1 { padding-right:  $space-1; }
.pb1 { padding-bottom: $space-1; }
.pl1 { padding-left:   $space-1; }
.px1 { padding-left:   $space-1; padding-right: $space-1;}
.py1 { padding-top:    $space-1; padding-bottom: $space-1;}

.p2  { padding:        $space-2; }
.pt2 { padding-top:    $space-2; }
.pr2 { padding-right:  $space-2; }
.pb2 { padding-bottom: $space-2; }
.pl2 { padding-left:   $space-2; }
.px2 { padding-left:   $space-2; padding-right: $space-2;}
.py2 { padding-top:    $space-2; padding-bottom: $space-2;}

.p3  { padding:        $space-3; }
.pt3 { padding-top:    $space-3; }
.pr3 { padding-right:  $space-3; }
.pb3 { padding-bottom: $space-3; }
.pl3 { padding-left:   $space-3; }
.px3 { padding-left:   $space-3; padding-right: $space-3;}
.py3 { padding-top:    $space-3; padding-bottom: $space-3;}

.p4  { padding:        $space-4; }
.pt4 { padding-top:    $space-4; }
.pr4 { padding-right:  $space-4; }
.pb4 { padding-bottom: $space-4; }
.pl4 { padding-left:   $space-4; }
.px4 { padding-left:   $space-4; padding-right: $space-4;}
.py4 { padding-top:    $space-4; padding-bottom: $space-4;}

.t0 { top:    0; }
.r0 { right:  0; }
.b0 { bottom: 0; }
.l0 { left:   0; }

.t1 { top:    $space-1; }
.r1 { right:  $space-1; }
.b1 { bottom: $space-1; }
.l1 { left:   $space-1; }

.t2 { top:    $space-2; }
.r2 { right:  $space-2; }
.b2 { bottom: $space-2; }
.l2 { left:   $space-2; }

.t3 { top:    $space-3; }
.r3 { right:  $space-3; }
.b3 { bottom: $space-3; }
.l3 { left:   $space-3; }

.t4 { top:    $space-4; }
.r4 { right:  $space-4; }
.b4 { bottom: $space-4; }
.l4 { left:   $space-4; }

// Positioning

.relative { position: relative }
.absolute { position: absolute }
.fixed    { position: fixed }

.z1 { z-index: 100 }
.z2 { z-index: 200 }
.z3 { z-index: 300 }
.z4 { z-index: 400 }

.absolute-center {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: table;
}

// Rounded Corners and Circles and Borders

.rounded{
  border-radius:3px;
}

.circle{
  border-radius:50%;
}

.border{
  border:1px solid rgba(0,0,0,.3);
}


// Basscss Flex Object

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

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.flex-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-baseline {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.flex-stretch {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.flex-start {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.flex-end {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flex-first {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
}

.flex-last {
  -webkit-box-ordinal-group: 1025;
  -webkit-order: 1024;
      -ms-flex-order: 1024;
          order: 1024;
}

.flex-auto {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.flex-grow {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

.flex-none {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}


// Code Snipppet Syntax Highlighting https://highlightjs.org/

code {
  font-family: Monaco, monospace;
  -webkit-font-smoothing: antialiased;

  &.hljs { // Override highlight.js theme properties
    background-color: $fill-gray; 
    padding: $space-2 $space-1;
    font-size: $type-5;
    line-height: 1.5; // $line-height variable is too tight for this typeface
  }
}<commit_msg>adding more basic border styles<commit_after>html {
  box-sizing: border-box;
}
 
*, *:before, *:after {
  box-sizing: inherit;
}

html {font-size: 16px; font-family: "Proxima Nova", Helvetica, Arial, sans-serif;} // This is just for reference

// Variables

$space-1: 0.5rem; //  8px
$space-2:   1rem; // 16px
$space-3: 1.5rem; // 24px
$space-4:   2rem; // 32px

// Layout

.inline       { display: inline; }
.block        { display: block; }
.inline-block { display: inline-block; }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-scroll { overflow: scroll; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after { clear: both; }

.float-left  { float: left; }
.float-right { float: right; }

.fit { max-width: 100%; }

.half-width { width: 50%; }
.full-width { width: 100%; }

// White Space

// Margin
.m0  { margin:        0; }
.mt0 { margin-top:    0; }
.mr0 { margin-right:  0; }
.mb0 { margin-bottom: 0; }
.ml0 { margin-left:   0; }
.mx0 { margin-left:   0; margin-right: 0;}
.my0 { margin-top:    0; margin-bottom: 0;}

.m1  { margin:        $space-1; }
.mt1 { margin-top:    $space-1; }
.mr1 { margin-right:  $space-1; }
.mb1 { margin-bottom: $space-1; }
.ml1 { margin-left:   $space-1; }
.mx1 { margin-left:   $space-1; margin-right: $space-1;}
.my1 { margin-top:    $space-1; margin-bottom: $space-1;}

.m2  { margin:        $space-2; }
.mt2 { margin-top:    $space-2; }
.mr2 { margin-right:  $space-2; }
.mb2 { margin-bottom: $space-2; }
.ml2 { margin-left:   $space-2; }
.mx2 { margin-left:   $space-2; margin-right: $space-2;}
.my2 { margin-top:    $space-2; margin-bottom: $space-2;}

.m3  { margin:        $space-3; }
.mt3 { margin-top:    $space-3; }
.mr3 { margin-right:  $space-3; }
.mb3 { margin-bottom: $space-3; }
.ml3 { margin-left:   $space-3; }
.mx3 { margin-left:   $space-3; margin-right: $space-3;}
.my3 { margin-top:    $space-3; margin-bottom: $space-3;}

.m4  { margin:        $space-4; }
.mt4 { margin-top:    $space-4; }
.mr4 { margin-right:  $space-4; }
.mb4 { margin-bottom: $space-4; }
.ml4 { margin-left:   $space-4; }
.mx4 { margin-left:   $space-4; margin-right: $space-4;}
.my4 { margin-top:    $space-4; margin-bottom: $space-4;}

.mx-auto { margin-left: auto; margin-right: auto; }

//Padding
.p0  { padding:        0; }
.pt0 { padding-top:    0; }
.pr0 { padding-right:  0; }
.pb0 { padding-bottom: 0; }
.pl0 { padding-left:   0; }
.px0 { padding-left:   0; padding-right: 0;}
.py0 { padding-top:    0; padding-bottom: 0;}

.p1  { padding:        $space-1; }
.pt1 { padding-top:    $space-1; }
.pr1 { padding-right:  $space-1; }
.pb1 { padding-bottom: $space-1; }
.pl1 { padding-left:   $space-1; }
.px1 { padding-left:   $space-1; padding-right: $space-1;}
.py1 { padding-top:    $space-1; padding-bottom: $space-1;}

.p2  { padding:        $space-2; }
.pt2 { padding-top:    $space-2; }
.pr2 { padding-right:  $space-2; }
.pb2 { padding-bottom: $space-2; }
.pl2 { padding-left:   $space-2; }
.px2 { padding-left:   $space-2; padding-right: $space-2;}
.py2 { padding-top:    $space-2; padding-bottom: $space-2;}

.p3  { padding:        $space-3; }
.pt3 { padding-top:    $space-3; }
.pr3 { padding-right:  $space-3; }
.pb3 { padding-bottom: $space-3; }
.pl3 { padding-left:   $space-3; }
.px3 { padding-left:   $space-3; padding-right: $space-3;}
.py3 { padding-top:    $space-3; padding-bottom: $space-3;}

.p4  { padding:        $space-4; }
.pt4 { padding-top:    $space-4; }
.pr4 { padding-right:  $space-4; }
.pb4 { padding-bottom: $space-4; }
.pl4 { padding-left:   $space-4; }
.px4 { padding-left:   $space-4; padding-right: $space-4;}
.py4 { padding-top:    $space-4; padding-bottom: $space-4;}

.t0 { top:    0; }
.r0 { right:  0; }
.b0 { bottom: 0; }
.l0 { left:   0; }

.t1 { top:    $space-1; }
.r1 { right:  $space-1; }
.b1 { bottom: $space-1; }
.l1 { left:   $space-1; }

.t2 { top:    $space-2; }
.r2 { right:  $space-2; }
.b2 { bottom: $space-2; }
.l2 { left:   $space-2; }

.t3 { top:    $space-3; }
.r3 { right:  $space-3; }
.b3 { bottom: $space-3; }
.l3 { left:   $space-3; }

.t4 { top:    $space-4; }
.r4 { right:  $space-4; }
.b4 { bottom: $space-4; }
.l4 { left:   $space-4; }

// Positioning

.relative { position: relative }
.absolute { position: absolute }
.fixed    { position: fixed }

.z1 { z-index: 100 }
.z2 { z-index: 200 }
.z3 { z-index: 300 }
.z4 { z-index: 400 }

.absolute-center {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: table;
}

// Rounded Corners and Circles and Borders

.rounded{
  border-radius:3px;
}

.circle{
  border-radius:50%;
}

.border{
  border:1px solid rgba(0,0,0,.3);
}

.border-top{
  border-top:1px solid rgba(0,0,0,.3);
}

.border-right{
  border-right:1px solid rgba(0,0,0,.3);
}

.border-bottom{
  border-bottom:1px solid rgba(0,0,0,.3);
}

.border-left{
  border-left:1px solid rgba(0,0,0,.3);
}

// Basscss Flex Object

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

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.flex-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-baseline {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.flex-stretch {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.flex-start {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.flex-end {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flex-first {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
}

.flex-last {
  -webkit-box-ordinal-group: 1025;
  -webkit-order: 1024;
      -ms-flex-order: 1024;
          order: 1024;
}

.flex-auto {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.flex-grow {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

.flex-none {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}


// Code Snipppet Syntax Highlighting https://highlightjs.org/

code {
  font-family: Monaco, monospace;
  -webkit-font-smoothing: antialiased;

  &.hljs { // Override highlight.js theme properties
    background-color: $fill-gray; 
    padding: $space-2 $space-1;
    font-size: $type-5;
    line-height: 1.5; // $line-height variable is too tight for this typeface
  }
}
{'fraction_non_alphanumeric': 0.19633870614834803, 'fraction_numerical': 0.044489825687404276, 'mean_word_length': 2.41604384653712, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3584210', 'n_tokens_mistral': 5962, 'n_tokens_neox': 5717, 'n_words': 1238}