/*
 * Ayyub Muhammad
 * Blog Personal
 * Information About Me
 */
html {
  display: block;
}
a:link, a:visited, a:focus{
	color:#000;
	text-decoration: none;
}
body {
  margin: 0 auto;
  display: block;
  position: relative;
  background: linear-gradient(
    360deg,
    #111111,
    #05002d,
    #171e41,
    #222222,
    #101010
  );
  background-size: 1000% 1000%;
  -webkit-animation: AnimationName 21s ease infinite;
  -moz-animation: AnimationName 21s ease infinite;
  -o-animation: AnimationName 21s ease infinite;
  animation: AnimationName 21s ease infinite;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Keyframe */
@-webkit-keyframes AnimationName {
  0% {
    background-position: 51% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 51% 0%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 51% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 51% 0%;
  }
}
@-o-keyframes AnimationName {
  0% {
    background-position: 51% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 51% 0%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 51% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 51% 0%;
  }
}

/* Reset CSS */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
hr {
  border-color: rgba(34, 34, 34, 0.2);
  margin: 10px auto;
}
.lo-part {
  position: relative;
  width: 100%;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

/* Background Animated */
#Background {
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-perspective: 300;
  -moz-perspective: 300;
  -ms-perspective: 300;
  -o-perspective: 300;
  perspective: 300;
  position: fixed;
}
#d1,
#d2,
#d3 {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#d1,
#d1:before,
#d1:after,
#d2,
#d2:before,
#d2:after,
#d3,
#d3:before,
#d3:after {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#d1:before,
#d1:after,
#d2:before,
#d2:after,
#d3:before,
#d3:after {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0BAMAAAA5+MK5AAAAJFBMVEX////////////////////////////////////////////////Vd7HLAAAADHRSTlMARFVmd4iZqrvM3e7VNOnbAAADp0lEQVR4Xu3dwZGbMBQG4BcTg3EuKYESKMElUIJLoARKoASXmmtmsoeNLUBC33fb0zKDEZLe+1HUB4BHfGiNkl2jIGPsgyEyBjR//XGJzMDFdOYT0HxjHtzHF+jrWYECsBiVP3MzK/ibHVGaINv57hqlm+MkeHqITQSK4LnxDHH1IubdmZoxSiETPxUdYKORK43WTB6wLqvsJWCatSSqg/XHXiB08QFAVwFLwuLeK3aC8uWw+z6PDSnw6kfXLnMub8GLTQxFbZAKKpRcwGjC7atM+2Z0/Kw8QBjvX1Ga/v8vnZ9nutpr5GqOe7lFA1aXQJIhps0pA0ub+4+JNcF6vPm6JIA9yB/19Rn3Slffd8/qXvQGiK/g/rOWUqJpEn0RYNqwnvd8dzlxsW9YBDnsPucis1eYzospsEWu7PkuoT2gO2V+YClnqNLpzqyvaBeAANi82fBlZTPFAeiFquuYCGJSTFfbYhlFWvDgAcBNV4fgP3gGkYE58lxE4H72uMo10rmXWUxGuwlCBgC3AqJxT2kWyDTVbk4CgPMq5DuxJ4il3j0AZ1w0Jc4Ox12vVECVZ7Ev5uXfIL3i43mxBJiCpju+wWYgfZwSXCutFtgpX+3ub8xoMaR4pw4nGaqgVQ1TQQCBZeMzDmBSJiweo0zRe+CVtJoLgPIagAW9kCN0zmevDlPKw8E8IzwSHEUHYMBg2LG5jKsLqaX51E+XJo9XMc/NbzP4Ro3vXtBVl5B/1NVvPtjmKLXUCiBhiJQ3Tif4Xf5eKYLbYEvpVcW2nlx3e/Deye2wTUD6Cr6NKoOulmd93ajAQyZP3WWTiu8aIJVMmoX4sPX/V8r3scQ29VWJPqyG63dBl7jjjN5mGDK6Ok2EDlCTUakQLBGFO3TZz6/tJvbo1WexbvcMUFj3C24r3ki3wGkebFMCYyo3+NuWVqXDyItM1V22LK3nvvN5QA8IGrNoRTbLZODFeD36GBWYvhRTz5iiVgqknsl5gy5kYVMdkrhPNOqO5FMOoznqBsKYbNUK057tINAXWRGjSz5aNF7UZ6NCACDTrgHQvMhaEZzNAIC+wca9PHa6C8L+oOI9BwAWjmCSBNL+INoDIHx7lj7HuZJpI+o+L3EVchrD7IwCQ8pDQkQ6cM6QohA380I/ouxekyAqTRflwBwMxzsNIn9VHAggCyqXgscFLJTX2ADgJIrVV7EUpE3obK3ji4agAOa0ArSzOTsTEozdj4xfDYMEWsb1VYA/KFNOcBXJpxsAAAAASUVORK5CYII=);
  content: "";
  -webkit-animation: 22s warp linear infinite;
  -moz-animation: 22s warp linear infinite;
  -ms-animation: 22s warp linear infinite;
  -o-animation: 22s warp linear infinite;
  animation: 22s warp linear infinite;
  visibility: visible;
  background-position: 50% 50%;
}
#d1:before {
  background-position: -190px 80px;
}
#d1:after {
  background-position: 90px -180px;
  -webkit-animation-delay: -2s;
  -moz-animation-delay: -2s;
  -ms-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;
}
#d2:before {
  background-position: 210px 180px;
  -webkit-animation-delay: -6s;
  -moz-animation-delay: -6s;
  -ms-animation-delay: -6s;
  -o-animation-delay: -6s;
  animation-delay: -6s;
}
#d2:after {
  background-position: -120px 40px;
  -webkit-animation-delay: -10s;
  -moz-animation-delay: -10s;
  -ms-animation-delay: -10s;
  -o-animation-delay: -10s;
  animation-delay: -10s;
}
#d3:before {
  background-position: 130px 140px;
  -webkit-animation-delay: -14s;
  -moz-animation-delay: -14s;
  -ms-animation-delay: -14s;
  -o-animation-delay: -14s;
  animation-delay: -14s;
}
#d3:after {
  background-position: -150px -90px;
  -webkit-animation-delay: -18s;
  -moz-animation-delay: -18s;
  -ms-animation-delay: -18s;
  -o-animation-delay: -18s;
  animation-delay: -18s;
}

/* Animated */
@-webkit-keyframes warp {
  from {
    opacity: 0;
    -webkit-transform: rotate(-30deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(30deg) translateZ(300px);
  }
}
@-moz-keyframes warp {
  from {
    opacity: 0;
    -moz-transform: rotate(-30deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    -moz-transform: rotate(30deg) translateZ(300px);
  }
}
@-ms-keyframes warp {
  from {
    opacity: 0;
    -ms-transform: rotate(-30deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    -ms-transform: rotate(30deg) translateZ(300px);
  }
}
@-o-keyframes warp {
  from {
    opacity: 0;
    -o-transform: rotate(-30deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    -o-transform: rotate(30deg) translateZ(300px);
  }
}
@keyframes warp {
  from {
    opacity: 0;
    transform: rotate(-30deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    transform: rotate(30deg) translateZ(300px);
  }
}

/* Modal */
#modal-dialog {
  display: flex;
  margin: auto;
  width: 100%;
  height: 100vh;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.modal-dialog-header {
    font-size: 1.5em;
    margin: 0 auto 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #555;
}
.modal-dialog-wrap {
  display: block;
  background-color: rgba(255, 255, 255, 0.55);
  padding: 30px;
  font-size: 21px;
  text-align: center;
  font-family: monospace;
  color: #111;
  border-radius: 10px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.8);
  z-index: 101;
}
.modal-dialog-footer ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 5px;
  margin: 20px auto 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  align-items: center;
  align-content: center;
}
.modal-dialog-footer ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
}
.modal-dialog-footer ul li a.fbx {
  color: #1d3e82;
}
.modal-dialog-footer ul li a.wax {
  color: #00756a;
}
.modal-dialog-footer ul li a.twx {
  color: #2196f3;
}
.modal-dialog-footer ul li a.blgx {
  color: #ff5722;
}
.modal-dialog-footer ul li a.linx {
  color: #00b900;
}
.btn-dlx {
  display: block;
  margin: 25px auto 0;
  padding: 5px;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.2s linear;
}
.btn-dlx:hover {
  background: #333;
  transition: all 0.2s linear;
}

/* Responsive */
@media screen and (max-width: 728px) {
  #modal-dialog,
  .modal-dialog-wrap {
    max-width: 95%;
  }
}