* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Pixels";
  src: url("//db.onlinewebfonts.com/t/640bccf731fd712f99b3b3ef2b89d628.eot");
  src: url("//db.onlinewebfonts.com/t/640bccf731fd712f99b3b3ef2b89d628.eot?#iefix")
      format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/640bccf731fd712f99b3b3ef2b89d628.woff2")
      format("woff2"),
    url("//db.onlinewebfonts.com/t/640bccf731fd712f99b3b3ef2b89d628.woff")
      format("woff"),
    url("//db.onlinewebfonts.com/t/640bccf731fd712f99b3b3ef2b89d628.ttf")
      format("truetype"),
    url("//db.onlinewebfonts.com/t/640bccf731fd712f99b3b3ef2b89d628.svg#Pixels")
      format("svg");
}
p {
  font-family: "Pixels";
  font-size: 35px;
}

body {
  background: blue;
}
.container {
  width: 100%;
  height: 100%;
}
.row-template {
  width: 100%;
}
.text p {
  color: white;
}
.inputtext {
  background: transparent;
  border: none;
  outline: none;
  font-family: "Pixels";
  color: white;
  font-size: 35px;
  padding-left: 5px;
}

.img {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img p {
  font-size: 105px;
}

.img img {
  width: 47%;
}

img.imgcontent {
  width: 179px;
}

img.ns {
  width: 100%;
  height: 100%;
}

.displayissue {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.2s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
  overflow: hidden;
}
@keyframes shake {
  0% {
    transform: translate(3px, 3px) rotate(0deg);
  }
  10% {
    transform: translate(-2px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.imgcontent {
  display: flex;
  justify-content: space-evenly;
}

.contentsub {
  width: 45%;
}

img {
  width: 45%;
  cursor: pointer;
}

p.contact {
  width: 100%;
  height: 8%;
  display: flex;
  justify-content: space-around;
  padding-top: 25px;
  align-items: center;
}

.contact img {
  width: 40px;
}

.mainimgcontent {
  display: flex;
  justify-content: center;
  align-items: center;
}

img.imgpixel {
  width: 45%;
}

.contentimg {
  width: 50%;
  height: 50%;
}

.contentimg img {
  width: 50%;
  padding-left: 25%;
}

.contentplc {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: auto;
  align-content: start;
}
.contentplc:after {
  display: block;
  content: "";
  margin: 8px;
  flex: 999 999 auto;
}
.contentpl {
  color: black;
  flex: 4 1 auto;
  margin: 8px;
  width: 123px;
  background: #62a1ef;
  height: 115px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contentmain {
  width: 73%;
  display: flex;
  margin-left: 35px;
}

.displayissue p {
  font-size: 80px;
}

.contentpl p {
  text-align: center;
}

.contentpl p {
  text-align: center;
}

a {
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.contentpl p {
  text-align: center;
}

a {
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.contenty {
  display: flex;
  justify-content: space-between;
}

.contented {
  width: 80%;
  padding-left: 5%;
}

.prol {
  width: 100%;
  display: flex;
  padding: 2%;
}

.imgcontentprol img {
  width: 37px;
  margin-right: 16%;
}

.imgcontentprol {
  display: flex;
  justify-content: flex-end;
  width: 17%;
}

a.lbtn {
  background: orange;
  font-family: "Pixels";
  font-size: 35px;
  width: 11%;
  color: white;
  padding: 4px;
  cursor: pointer;
  padding-top: 0;
  display: flex;
  text-decoration: none;
  box-shadow: 2px 2px 2px 2px orange;
}

a.lbtn:hover {
  margin-top: 2px;
  margin-left: 2px;
}

.ns {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ns img {
  width: 18%;
  animation: peek 25s infinite;
  position: absolute;
}

@keyframes peek {
  0% {
    top: 0%;
    left: 0%;
  }
  100% {
    top: 100%;
    left: 100%;
  }
}

.imgsd {
  width: 100%;
  height: 100%;
}

img.retroimg {
  width: 100%;
  height: 100%;
  animation: retro 4s 1;
}
@keyframes retro {
  0% {
    transform: scale(100);
  }
  100% {
    transform: scale(1);
  }
}

.retrorev {
  width: 100%;
  height: 100%;
  animation: retrorev 4s 1;
  overflow: hidden;
}

@keyframes retrorev {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(100);
  }
}

.retorcontent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.retorcontent button {
  background: #2e3434;
  border: none;
  box-shadow: 2px 2px 2px black;
  width: 2%;
  height: 3.5%;
  border-radius: 50%;
  position: absolute;
  transform: skew(-27deg, 40deg);
  top: 51%;
  left: 42%;
  opacity: 0;
  cursor: pointer;
  animation: retrocontent 2s infinite;
}

@keyframes retrocontent {
  0% {
    background: #ff2100;
  }
  100% {
    background: #2f3535;
  }
}