@font-face {
    font-family: 'Roboto Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Regular'), url('../assets/fonts/Roboto-Regular.woff') format('woff');
    }

@font-face {
    font-family: 'Roboto Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Bold'), url('../assets/fonts/Roboto-Bold.woff') format('woff');
    }

body {
	animation: gradient-animation 8s ease infinite;
	background: #000;
	background: linear-gradient(142deg,#000000,#666666);
  background-size: 120% 120%;
	color: #fff;
	font-family:'Roboto Regular'
}

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

a {
	color: #fff;
	text-decoration: none
}

a.navbar-brand { font-size: 66% }

.time-til-next-haiku {
	--duration: 60;
	margin: 0 auto;
	width: 90vw
}

.time-til-next-haiku div {
	background: linear-gradient(to right, #3a3a3a, #626262);
	height: 3px
}

@keyframes haikutime {
  to { transform: scaleX(0) }
}

.time-til-next-haiku div {
  /* ... */
  animation: haikutime calc(var(--duration) * 1s) steps(var(--duration)) forwards;
  transform-origin: left center;
}

.time-til-next-haiku[data-style="smooth"] div { animation: haikutime calc(var(--duration) * 1s) linear forwards }
.time-til-next-haiku[data-style="fixed"] div { width: calc(var(--duration) * 5%) }

div#wrapper {
	display: flex;
	flex-direction: column;
	height: 90vh;
	justify-content: space-between;
	margin: 0 auto;
	width: 90vw
}

.head-section { display: flex }

.head-split {
	display: flex;
	flex: 50%
}

.head-split.right { justify-content: right }

div.haiku {
	display: flex;
	flex-direction: column;
	font-size: 4vw;
	font-weight: 700;
	height: 35vh;
	opacity: 0.9
}

div.haiku span { display: flex }
div.haiku span.one { animation: fadeIn 5s }
div.haiku span.two { animation: fadeIn 10s }
div.haiku span.three { animation: fadeIn 15s }
div.haiku span.four { animation: fadeIn 25s }

@keyframes fadeIn {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

div.refresh {
	display: block;
	text-align: center;
	width: 100%
}

.pulse-button, a.pulse-button {
	-moz-animation: pulse 6s infinite cubic-bezier(0.66, 0, 0, 1);
	-ms-animation: pulse 6s infinite cubic-bezier(0.66, 0, 0, 1);
	-webkit-animation: pulse 6s infinite cubic-bezier(0.66, 0, 0, 1);
	animation: pulse 6s infinite cubic-bezier(0.66, 0, 0, 1);
	background: -webkit-linear-gradient(to top, #999, #fafafa);
	background: #999;
	background: linear-gradient(to top, #999, #fafafa);
	border: none;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.7);
	color: #999;
	cursor: pointer;
	font-weight: 700;
	height: 100px;
	opacity: 0.6;
	text-shadow: 1px 1px 0px #e8e8e8;
	text-transform: uppercase;
	transition: opacity 1s;
	width: 100px
}

.pulse-button:hover { opacity: 0.9 }

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

a.navbar-brand, footer, .socials { opacity: 0.3 }

div.socials img {
	margin-right: 1%;
	margin-top: 0.6%
}

.socials a:hover { opacity: 0.9 }

/* -- SEARCH -- */
section.search {
	display: flex;
	justify-content: center;
	opacity: 0.6
}

form#search-form {
	display: flex;
	margin: 3%
}

input#s {
	-webkit-border-radius: 6px 6px 6px 6px;
	border: solid 3px #e8e8e8;
	border-radius: 6px 6px 6px 6px;
	box-sizing: border-box;
	display: flex;
	font-size: large;
	height: 3vh;
	padding: 2vh
}

/* -- TOOLTIP - */
.tooltip .tooltiptext {
	background: #333;
	border-radius: 6px;
  color: #fff;
  opacity: 0.6;
  padding: 0.3% 0.6%;
  position: absolute;
  top: 6%;
  visibility: hidden;
  width: auto;
  z-index: 1
}

.tooltip:hover .tooltiptext { visibility: visible }

@media only screen and (max-width: 430px) {
	.head-section { display: block }
	.head-split { width: 100% }
	.head-split.right { justify-content: center }
	.tooltip .tooltiptext { top: 16% }

	div.haiku { font-size: 7vw }
	a.navbar-brand, footer { font-size: small }

	.pulse-button {
		height: 80px;
		width: 80px
	}

	.socials { margin-bottom: 10% }
}

@media only screen and (max-width: 400px) {
	.tooltip .tooltiptext { top: 19% }
}

@media only screen and (max-width: 360px) {
	.tooltip .tooltiptext { top: 23% }
}