@import url(https://fonts.googleapis.com/css?family=Righteous);
* {

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}


h2{
  position: absolute;
  font-family: 'Righteous', serif; 
  color: aliceblue;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none}
.box-outer {
  overflow: hidden;
  margin: 0 auto;
  width: 200px;
  height: 200px;
}
.main_box {
  width: 200px;
  height: 200px;
  position: relative;
  background: #f34c4c;
  border: 5px solid hsla(230,40%,50%,1);

}

.bar {
  position: absolute;
  width: 50px;
  height: 5px;
  background: #fff;
  transition: all 1s linear;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.bar.delay {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.top {
  top: -5px;
  left: -5px;
}
.right {
  top: 18px;
  right: -28px;
  transform: rotate(90deg);
}
.bottom {
  bottom: -5px;
  left: -5px;
}
.left {
  top: 18px;
  left: -28px;
  transform: rotate(90deg);
}
@-webkit-keyframes h-move {
  0% {
    left: -5px;
  }
  100% {
    left: 200px;
  }
}
@keyframes h-move {
  0% {
    left: -5px;
  }
  100% {
    left: 200px;
  }
}
.top, .bottom {
  -webkit-animation-name: h-move;
  animation-name: h-move;
}
@-webkit-keyframes v-move {
  0% {
    top: -5px;
  }
  100% {
    top:228px;
  }
}
@keyframes v-move {
  0% {
    top: -5px;
  }
  100% {
    top:228px;
  }
}
.right, .left {
  -webkit-animation-name: v-move;
  animation-name: v-move;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px; 
  padding: 10px; 
}

.column{
  width: 100%;
  margin-bottom: 20px;
  margin-left: 0
}

/*fasjasfas*/

@import url(https://fonts.googleapis.com/css?family=Righteous);

*, *:before, *:after {
  margin: 17 0 0 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

html, body {
  height: 100%;
}
body {
  margin-top: 70px;

  text-align: center;
  background-color: hsla(230,40%,50%,1);
}
body:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  height: 20%;
}

h1 {
  display: inline-block;
  color: white;
  font-family: 'Righteous', serif;
  font-size: 6em; 
  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
}
h1:after {
  content: attr(data-shadow);
  position: absolute;
  top: .06em; left: .06em;
  z-index: -1;
  text-shadow: none;
  background-image:
    linear-gradient(
      45deg,
      transparent 45%,
      hsla(48,20%,90%,1) 45%,
      hsla(48,20%,90%,1) 55%,
      transparent 0
    );
  background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shad-anim 15s linear infinite;
}

@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}
}