* {
  box-sizing: border-box;
  font-family: "Oswald", sans-serif;
}

@font-face {
  font-family: "Pixel";
  src: url(../fonts/Pixel.ttf);
}

html {
  height: 100%;
}

body {
  margin: 0;
  background-color: #0d262d;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
}

[flappy] {
  position: relative;
  border: 5px solid dodgerblue;
  height: 700px;
  width: 1200px;
  margin: 15px;

  background-image: url(../imgs/bg-flappy.png);
  background-position-y: bottom;
  background-repeat: repeat-x;
  background-color: #4dc1cb;

  overflow: hidden;
}

.bird {
  position: absolute;
  width: 60px;
  left: calc(50% - 30px);
}

.pair-of-barriers {
  position: absolute;
  top: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.barrier {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.barrier .barrier-border {
  height: 30px;
  width: 130px;
  background: linear-gradient(90deg, #639301, #a5e82e);
  border: 2px solid #000;
}

.barrier .barrier-body {
  height: 40px;
  width: 110px;
  background: linear-gradient(90deg, #639301, #a5e82e);
  border-left: 2px solid #000;
  border-right: 2px solid #000;
}

.progress {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: "Pixel";
  font-size: 70px;
  z-index: 100;
}