boid/examples/css/styles.css

Bird-like behaviours

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background:0 0}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
h1{font-size:2em}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:700}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
/*! suit-base v0.5.0 | MIT License | github.com/suitcss */
:root{--background-base:inherit;--color-base:inherit;--font-base:16px sans-serif;--link-color-base:#069;--link-color-hover-base:var(--link-color-base)}
html{background:var(--background-base);color:var(--color-base)}
a{color:var(--link-color-base);text-decoration:none}
a:active,a:focus,a:hover{color:var(--link-color-hover-base);text-decoration:underline}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,p,pre{margin:0}
button{background:0 0;border:0;padding:0}
fieldset{border:0;margin:0;padding:0}
iframe{border:0}
ol,ul{margin:0;list-style:none;padding:0}
[tabindex="-1"]:focus{outline:0!important}

/*! Sections */

html {
  height: 100%;
}

body {
  background-color: #FFF;
  color: #000;
  font-family: Helvetica, sans-serif;
  font-size: 24px;
  height: 100%;
  line-height: 1.5;
  margin: 0;
}

h1,
h2,
h3 {
  color: #303030;
  font-weight: 400;
  margin: .5em 0;
}

h1 {
  font-size: 48px;
  margin: 0;
  padding-bottom: 20px;
}

h2 {
  font-size: 32px;
}

h3 {

}

p {
  font-size: 16px;
}

header {
  text-align: center;
  width: 100%;
}

pre {
  padding: 50px 0;
  width: 100%;
}

code {
  border-radius: 8px;
  font-size: 16px;
  margin: 0 auto;
  max-width: 632px;
  min-width: 300px;
  width: 80%;
}

@media (max-width: 400px) {
  code {
    font-size: 60%;
  }
}

img {
  display: block;
}

section {
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 auto;
}

section.full {
  height: 100%;
}

ul {
  text-align: center;
}

canvas {
  border: 1px solid #ddd;
  margin: 0 auto;
}

b {
    background-color: #000;
    border-radius: 50%;
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
}

.background {
  height: 100%;
  margin: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
  overflow: hidden;
}