body{
	font-family: 'worksans', sans-serif;
	margin: 0;
	padding: 0;
	background-image: url('bg.jpg');
	/* background-size: auto; */
	background-repeat: no-repeat;
	background-position: center;
	max-width: 100%;
	max-height: auto;
  }

  @font-face {
    font-family: 'worksans';
    src: url('../fonts/worksans/WorkSans-Medium.woff') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'worksans';
    src: url('../fonts/worksans/WorkSans-Bold.woff') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'worksans';
    src: url('../fonts/worksans/WorkSans-MediumItalic.woff') format('opentype');
    font-weight: normal;
    font-style: oblique;
}

@font-face {
    font-family: 'worksans';
    src: url('../fonts/worksans/WorkSans-BoldItalic.woff') format('opentype');
    font-weight: bold;
    font-style: oblique;
}

h1{
	text-align: center;
	font-size: 5vmax;
	margin-top: 5%;
}

h2{
	text-align: center;
	font-weight:bold;
}

p{
	text-align: center;
	font-weight:bold;
	margin-left: 10%;
	margin-right: 10%;
	font-size: small;
	margin-bottom: 5%;
}

.glitch-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   /* background-color: #222; */
}

.glitch {
   position: relative;
   font-size: 7vmax;
   font-weight: 700;
   line-height: 1.2;
   color: #fff;
   letter-spacing: 5px;
   z-index: 1;
}

.glitch:before,
.glitch:after {
   display: block;
   content: attr(data-glitch);
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.8;
}

.glitch:before {
   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: #0ff;
   z-index: -1;
}

.glitch:after {
   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color:orangered;
   z-index: -2;
}

@keyframes glitch-color {
   0% {
	  transform: translate(0);
   }

   20% {
	  transform: translate(-3px, 3px);
   }

   40% {
	  transform: translate(-3px, -3px);
   }

   60% {
	  transform: translate(3px, 3px);
   }

   80% {
	  transform: translate(3px, -3px);
   }

   to {
	  transform: translate(0);
   }
}

/* 
div{
  animation: glitch 1s linear infinite;
} */

/* @keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
} */


form {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

label {
	font-weight: bold;
	margin-right: 10px;
}

input[type="text"] {
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

button{
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #0ff;
	color:#fff;
	border: none;
	cursor: pointer;
}

#result{
	margin-left: auto; 
	margin-right: auto;
	border-color:orangered;
}

table {
	margin-top: 20px;
	border-collapse: collapse;
	text-align: center;
	word-wrap: normal;
}

th, td {
	padding: 10px;
	border: 1px solid #fff;
	background-color: black;
	color: white;
	text-align: center;
	word-wrap: normal;

}