/* CSS files add styling rules to your content */


h1 {
  font-size: 70px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'suisse-int-bold', mono; /* this should be the rest of the output you got from Google fonts */
  color: #FFFFFF;
  text-align: center;
}

/*
div.glitch1 {
  position: relative;
}
div.glitch1::before {
  clip: rect(44px, 450px, 56px, 0);
  content: attr(data-text);
  position: absolute;
  top: 1;
  left: 3px;
  text-shadow: -1px 0 red;
  width: 110%;
  height: 100%;
  background: green;
  color: #f2f7ff;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}


div.glitch1::after {
  clip: rect(44px, 450px, 56px, 0);
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: -2px;
  width: 100%;
  height: 110%;
  background: red;
  color: grey;
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

*/

p,div.glitch1,div.glitch2 {
  font-size: 70px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'suisse-int-medium', mono; /* this should be the rest of the output you got from Google fonts */
  color: #FFFFFF;
  text-align: center;
  position: relative;
  top: 0px;
  }




div.wrapper {
   display: flex;
    text-align: center;
    justify-content: space-between;

}

    #animation_container {
        height: 600px;
        display: table;
        background-color: transparent;
    }

    #animation_container .animation_container {
        vertical-align: middle;
        display: table-cell;
    }

    #animation_container .animation_container img {
        max-height: 600px;
        align-items: center;
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 37.5%;
}


#start_recording{
  margin-left: 35px;
}

#start_reading{
  margin-right: 35px;
}


button{
  font-size: 30px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'suisse-int-medium', mono; /* this should be the rest of the output you got from Google fonts */
  color: white;
  padding: 40px 100px;
  position: relative;
  text-align: center;
  /* top: 400px; */
  cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
  background-color: transparent;
  border: none;
}

button:hover {
  background-color: #8babba;
  color: #6574c6
}

#transcript {
  color: #6574c6;
}

#response {
  color: #8babba;
  /*position: absolute;
  top:900px */
}


body {

	color: #fff;
	background: linear-gradient(-41deg, #6574c6, #8babba, #3e5560, #004c17);
	background-size: 200% 700%;
	-webkit-animation: Gradient 37s ease infinite;
	-moz-animation: Gradient 37s ease infinite;
	animation: Gradient 37s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}