body, html {
	max-width: 100%;
	overflow: hidden;
	scroll-behavior: smooth;
}

noscript {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-family: 'Comic Sans MS', cursive;
	background-color: white;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 3em;
	text-align: center;
	padding: 0.5em;
}
noscript small {
	font-family: sans-serif;
	font-size: 0.8rem;
}

img.senft {
	max-width: 128px;
	height: 128px;
}

.hero-bgimage {
	background-image: url("pixabay-4990187.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.hero.is-warning .title, .hero.is-warning .subtitle {
	color: white;
	text-shadow: 0 0 .3em black, 0 0 .5em black, 0 0 1em black, 0 0 2em black;
}

#faq, #testimonials {
	margin-top: 4rem;
}

/* @media screen and (min-width:1200px) {
	.hero {
		background-image: url("logo.svg"), url("pixabay-4990187.jpg");
		background-repeat: no-repeat;
		background-size: auto 90%, cover;
		background-position: right 1em center, center;
	}
} */

div.header {
	padding: .5em;
}

div.artist {
	width: 512px;
	margin: 2em;
	padding: .5em;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2), 0 5px 10px 0 rgba(0,0,0,0.2);
}

#dropdown-hash {
	display: none;
}

#blockchain-ticker {
	position: relative;
	background-color: white;
	height: 4em;
	background-color: #ffdd57;
	box-shadow: 0 0 2em rgba(0,0,0,0.2) inset;
}

#blockchain-ticker > span {
	color: white;
	text-shadow: 0 0 0.5em black,  -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
	font-weight: bold;
	transition: all 0.3s ease;
	opacity: 1;
	transform: translateX(0);
	display: block;
	width: 100%;
	height: 4em;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	margin-top: 1em;
}

@media screen and (max-width:768px) {
	#blockchain-ticker > span {
		white-space: pre-wrap;
	}
	#blockchain-ticker, #blockchain-ticker > span {
		height: 5em;
	}
}

#blockchain-ticker > span.appearing {
	transform: translateX(5em);
	opacity: 0;
}

#blockchain-ticker > span.removing {
	transform: translateX(-5em);
	opacity: 0;
}

.blockchain-ticker-loading {
  animation: spin 1.1s infinite linear;
  display: inline-block;
  margin-right: 1em;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.faq-section .card, .faq-section .card-header, .faq-section .card-content, .faq-section .card-header-title {
  box-shadow: none;
  padding-left: 0;
}


#kat3rcoin-exchange-rate-wrapper {
  background-image: url("./plot_template.png");
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 100%;
  max-height: 100%;
  padding-left: 9%;
  padding-right: 5%;
  margin: 1em;
}

#kat3rcoin-exchange-rate {
  width: 100%;
  height: 100%;
}


div.artist {
	padding: 1em;
}

div.artist-header {
	margin-bottom: 1em;
	padding: .5em;
	font-size: 1.2em;
}

div.gallery {
	display: flex;
	justify-content: space-around;
}

div.senft-gallery-item {
	display: flex;
	flex-direction: column;
}

div.senft-gallery-item * {
	margin-left: auto;
	margin-right: auto;
}

.step-1-outer .step-1-inner, .step-2-outer .step-2-inner{
	display: block;
}

.step-1-inner, .step-2-inner{
	display: none;
}

@media print {
	*:not(.step-2-outer #senft-image) {
		visibility: hidden;
		position: unset;
	}
	.step-2-outer .modal-card-body > div:first-child {
		position: absolute !important;
		top:0;
		left:0;
  		width: 100vw;
	  	height: 100vh;
	}
	.step-2-outer #senft-image {
		visibility: visible;
		object-fit: contain;
		max-width: 100%;
		max-height: 100%;
		width: 100%;
		height: 100%;
	}
}

#copy-downloadlink-button {
    position: relative;
    overflow: hidden;
}

#copy-downloadlink-button:active {
    color: transparent;
}

#copy-downloadlink-button:after {
    position: absolute;
    width: 100%;
	height: 100%;
	padding-top: .5em;
    left: -100%;
    margin-left: 200%;
    transition: left 0.1s linear, margin-left 300ms ease-out;
    content:'✅';
    color:black;
}

#copy-downloadlink-button:active::after {
    left: 0;
    margin-left: 0;
    transition: left 0.1s ease-out;
}

#downloadlink-wrapper {
	display: flex;
	align-items: center;
}

#downloadlink-wrapper input {
	flex-grow: 1;
}

@media screen and (max-width:768px) {
	#downloadlink-wrapper {
		flex-direction: column;
	}
	a[href="certificate.pdf"], #downloadlink-wrapper>* {
		width: 100%;
	}
}

footer.footer p {
	max-width: 600px;
	margin: auto;
	text-align: center;
	padding-bottom: 1em;
}
footer.footer p a {
	margin: 0 1em;
}
a[rel="me"] svg {
	height:1em;
	transform: scale(2) translate(0, 10%);
}


.bg-fade:before {
	content: '';
	display: block;
	background-image: url('./page_bg.png');
	background-repeat: no-repeat;
	position: absolute;
	opacity: .1;
	width: 100%;
	height: 100%;
}
.bg-fade {
	margin: 0 !important;
}

.bg-fade > *:not(#buy-senft-modal) {
	max-width: 1000px;
	margin: auto;
	padding-left: 10px;
	padding-right: 10px;
}