/******************************
* Variables
******************************/
/******************************
* This breakpoint mixin is from:
* https://github.com/lukasborawski/bigos/blob/v-0.3/src/_mixins.scss
******************************/
/******************************
* Reset / default styles
******************************/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html, body {
  height: 100%; }

body {
  background: #e3e3e3;
  font-family: Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  line-height: 23px;
  margin: 0; }
  body.ie {
    background: #d8d8d8;
    color: darkgray; }
  @media only screen and (min-width: 1024px) {
    body {
      font-size: 15px; } }

img {
  cursor: url(../images/rsz_cursor-eyes.png) 4 12, pointer;
  height: auto;
  max-width: 100%; }

/******************************
* Typography
******************************/
h1, h2, h3, p, ul {
  -webkit-transition: all .25s;
  transition: all .25s; }

h1:hover, h2:hover, h3:hover {
  cursor: default; }

h1 {
  font-size: 20px;
  color: blue;
  display: inline-block;
  margin: 0 0 10px -10px;
  line-height: 32px;
  position: relative; }
  @media only screen and (min-width: 1024px) {
    h1 {
      margin: 0 0 30px -10px; } }
  .ie h1 {
    color: darkgray; }

h2 {
  font-size: 18px;
  margin: 20px 0 5px 0;
  padding-bottom: 1px; }

p {
  margin: 0 0 20px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s; }
  p.text--small {
    font-size: 12px; }

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

.blockrain-game-holder {
  color: #fff;
  font-size: 18px;
  line-height: 140%;
  margin: 0;
  padding: 0;
  position: relative; }

/* Touch Controls */
.blockrain-touch {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid white;
  border-radius: 100%;
  display: block;
  height: 50px;
  line-height: 50px;
  position: absolute;
  text-align: center;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  width: 50px;
  z-index: 10; }

.blockrain-touch:active {
  background: rgba(255, 255, 255, 0.3); }

.blockrain-touch-left {
  bottom: 10px;
  left: -60px; }

.blockrain-touch-left::after {
  content: "<"; }

.blockrain-touch-right {
  bottom: 10px;
  right: -60px; }

.blockrain-touch-right::after {
  content: ">"; }

.blockrain-touch-rotate-left {
  bottom: 80px;
  left: -60px; }

.blockrain-touch-rotate-left::after {
  content: "<o"; }

.blockrain-touch-rotate-right {
  bottom: 80px;
  right: -60px; }

.blockrain-touch-rotate-right::after {
  content: "o>"; }

.blockrain-touch-drop {
  bottom: -60px;
  left: 50%;
  margin-left: -25px; }

.blockrain-touch-drop::after {
  content: "."; }

/* Buttons */
.blockrain-btn {
  background: none;
  border: 2px solid #fff;
  color: #fff;
  cursor: default;
  display: inline-block;
  font-size: 18px;
  padding: 15px 30px;
  position: relative;
  text-align: center;
  text-decoration: none; }

.blockrain-btn::before {
  border: 2px solid #fff;
  border-right: none;
  border-top: none;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease; }

.blockrain-btn::after {
  border: 2px solid #fff;
  border-bottom: none;
  border-left: none;
  bottom: 0;
  content: "";
  left: 100%;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease; }

.blockrain-btn:hover::before {
  bottom: -8px;
  left: 5px;
  right: -8px; }

.blockrain-btn:hover::after {
  bottom: -8px;
  right: -8px;
  top: 5px; }

/* Score */
.blockrain-score-holder {
  position: absolute;
  right: 20px;
  text-align: right;
  top: 20px; }

.blockrain-score-msg {
  font-size: 14px;
  line-height: 100%;
  margin-bottom: 0.2em; }

.blockrain-score-num {
  font-size: 20px;
  font-weight: bold; }

/* Menu */
.blockrain-start-holder, .blockrain-game-over-holder {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0; }

.blockrain-start, .blockrain-game-over {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%; }

.blockrain-start-msg, .blockrain-game-over-msg {
  font-size: 18px;
  margin-bottom: 30px; }

/******************************
* Animations
******************************/
@-webkit-keyframes bgcolour-flip {
  20% {
    background-color: darkgreen; }
  40% {
    background-color: darkgoldenrod; }
  60% {
    background-color: darkblue; }
  80% {
    background-color: darkslateblue; }
  100% {
    background-color: darkmagenta; } }
@keyframes bgcolour-flip {
  20% {
    background-color: darkgreen; }
  40% {
    background-color: darkgoldenrod; }
  60% {
    background-color: darkblue; }
  80% {
    background-color: darkslateblue; }
  100% {
    background-color: darkmagenta; } }

/******************************
* Buttons/links
******************************/
.btn--action {
  background-color: blue;
  color: #fff;
  display: inline-block;
  margin-top: 20px;
  padding: 5px 10px;
  text-decoration: none;
  -webkit-transition: all .25s;
  transition: all .25s; }
  .ie .btn--action {
    background-color: darkgray; }
  .btn--action:hover {
    -webkit-animation: bgcolour-flip 1s infinite;
            animation: bgcolour-flip 1s infinite; }

.btn--gif {
  display: inline-block;
  position: relative;
  text-transform: uppercase; }
  @media only screen and (min-width: 1025px) {
    .btn--gif {
      cursor: default;
      font-size: 16px;
      font-weight: bold; } }
  @media only screen and (min-width: 1025px) {
    .btn--gif:hover {
      color: #fff; }
      .btn--gif:hover:after {
        -webkit-animation: bgcolour-flip 1s infinite;
                animation: bgcolour-flip 1s infinite;
        height: 20px; } }
  @media only screen and (min-width: 1025px) {
    .btn--gif:after {
      background: #1defff;
      bottom: 1px;
      content: " ";
      display: inline-block;
      height: 1px;
      left: 0;
      position: absolute;
      -webkit-transition: all 0.15s;
      transition: all 0.15s;
      width: 100%;
      z-index: -1; } }

/******************************
* Main content wrapper
******************************/
.main-content {
  margin: 10px;
  max-width: 951px;
  position: relative; }
  @media only screen and (min-width: 1024px) {
    .main-content {
      margin: 0 auto; } }

/******************************
* Main content blocks (article)
******************************/
.section {
  cursor: url(../images/rsz_cursor-cool.png) 70 60, pointer; }
  .section:nth-child(even) {
    margin: -15px 0 -13px 12px;
    position: relative;
    width: 100%;
    z-index: 3824798234234; }
    @media only screen and (min-width: 1024px) {
      .section:nth-child(even) {
        margin: -28px 0 -28px 32px; } }
  .section__header {
    margin: 0 auto;
    max-height: 400px;
    max-width: 900px;
    overflow: hidden; }
  .section__content {
    background-color: #fff;
    padding: 39px 49px 83px 49px;
    position: relative;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    z-index: 123; }
    .section:nth-child(even) .section__content {
      background-color: #fff5e1;
      color: #000; }
      .ie .section:nth-child(even) .section__content {
        background-color: #fff;
        color: darkgray; }
    .section__content:hover {
      -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
              box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); }
    @media only screen and (max-width: 1024px) {
      .section__content {
        padding: 29px; } }
    .is-bottom .section__content {
      display: none; }
      @media only screen and (min-width: 1025px) {
        .is-bottom .section__content {
          background-color: #9e6a02;
          cursor: url(../images/rsz_trophy.png) 4 12, pointer;
          display: block; } }
      .ie .is-bottom .section__content {
        background-color: darkgray; }
    .section__content.has-related-things {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
  .section__text {
    width: 100%; }
    .has-related-things .section__text {
      max-width: 100%;
      width: 100%; }
      @media only screen and (min-width: 1025px) {
        .has-related-things .section__text {
          max-width: 550px; } }
  .section__related-things {
    display: none; }
    @media only screen and (min-width: 1025px) {
      .section__related-things {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        position: relative;
        right: -72px;
        text-align: right;
        width: 300px; } }

.text--big-devices {
  display: none; }
  @media only screen and (min-width: 1024px) {
    .text--big-devices {
      display: block; } }

.text--extra-strong {
  background-color: #C30000;
  color: #fff;
  padding: 3px 5px; }
  .ie .text--extra-strong {
    background-color: darkgray; }

.text--highlighted {
  color: #C30000; }
  .ie .text--highlighted {
    color: darkgray; }

.project__list {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.project__item {
  padding: 5px 0; }
  .project__item:first-of-type {
    padding-top: 0; }
  .project__item__title:first-of-type {
    margin-top: 0; }

/******************************
* Small `loose` elements
******************************/
.overlay {
  background-color: blue;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9839043434; }
  .ie .overlay {
    color: darkgray; }

.img__bunkers {
  display: block; }
  .ie .img__bunkers {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale"); }
  @media only screen and (min-width: 1025px) {
    .img__bunkers {
      position: relative;
      top: -60px; } }

.side-gif {
  background-image: url(../images/coding.gif);
  background-position: center center;
  background-size: cover;
  height: 55%;
  position: relative;
  width: 100%; }

.related-links__list {
  list-style-type: none;
  margin: 0;
  padding: 0; }

/******************************
* Game (Tetris)
******************************/
.game {
  -ms-flex-item-align: end;
      align-self: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 500px;
  position: relative;
  width: 250px; }