@font-face {
	font-family: "ARCO Typography";
	src: url("/static/fonts/ARCO.woff2") format("woff2"), url("/static/fonts/ARCO.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

html, body {
	background-color: #112;
	margin: 0;
	padding: 0;
	color: #eef;
}

a {
	text-decoration: none;
}

.arco { font-family: "ARCO Typography", "sans-serif"; }
.fredoka { font-family: "Fredoka One", "sans-serif"; }
.accent { color: #dfb22e; }
.secondary { color: #aab; }

a.accent:visited { color: #dfb22e; }
a.accent:hover { color: #df702e; }

.float-left { float: left; }
.float-right { float: right; }
.condensed > * {
	margin: auto;
	max-width: 720px;
}

.waves {
	position: absolute;
	top: 0;
	z-index: 1;
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	width: 100%;
	background-image: url("/static/img/waves.png");
	min-height: 33vh;
	max-height: 50vh;
}

.content {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 100%;
}

.logo {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("/static/img/logo.png");
	height: 35vh;
}

.logo .logo-link {
	display: block;
	height: 100%;
	width: 400px;
	max-width: 90vw;
	margin: auto;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
	supported by Chrome, Edge, Opera and Firefox */
}

.btn {
	transition: 150ms ease-in-out;
	opacity: 1;
	height: 72px;
	border-radius: 32px;
	line-height: 34px;
	vertical-align: middle;
	border: none;
	font-size: 36px;
	margin: 0;
	padding: 0 0 5px 0;
}

.btn[disabled] {
	transition: 150ms ease-in-out;
	opacity: 0.3;
}

.btn-full {
	width: 100%;
}

.btn-danger { background-color: rgb(217, 57, 57); }
.btn-danger:hover { background-color: rgb(181, 34, 73); }

.btn-danger.btn-outline {
	border: 1px solid rgb(217, 57, 57);
	background: none;
	color:  rgb(217, 57, 57);
}
.btn-danger.btn-outline:hover {
	border: 1px solid rgb(181, 34, 73);
	background: none;
	color: rgb(181, 34, 73);
}

.btn-primary { background-color: #3C7FF4; }
.btn-primary:hover { background-color: #2855F3; }

.flash {
	border-radius: 16px;
}

.flash h4 {
	margin: 0.5rem;
}

.flash.error {
	border: 1px solid rgb(217, 57, 57);
	color: rgb(217, 57, 57);
}

.flash.message {
	border: 1px solid #0acb6a;
	color: #0acb6a;
}

.standard-secret-tab-bar {
	width: 100%;
	margin-bottom: 42px;
}

.standard-secret-tab-bar .tab-item {
	width: 50%;
	display: inline-block;
}

.standard-secret-tab-bar .tab-item.selected,
.standard-secret-tab-bar .tab-item.selected:hover,
.standard-secret-tab-bar .tab-item.selected:visited {
	color: #eef;
	cursor: default;
}

.standard-secret-type-container {
	display: none;
}

.standard-secret-type-container.selected {
	display: block;
}

body.dialog-open {
	overflow: hidden;
	padding-right: 15px;
}

#redemption-dialog {
	background-color: #223;
	border-radius: 16px;
	color: #eef;
	border: none;
	padding: 24px 0;
}

#redemption-dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.75);
}

#redemption-dialog .dialog-button-container {
	width: 60vw;
	min-width: 200px;
	max-width: 350px;
	height: 50px;
	margin: auto;
}

.item-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.item-card {
	border: 1px solid rgba(255, 255, 255, 0.25);
	text-align: left;
	list-style: none;
	overflow: hidden;
	max-width: 239px;
	min-width: 144px;
	width: 40vw;
	display: inline-block;
	background-color: #001;
	vertical-align: top;
	margin: 1rem 0.3rem 1rem 0.3rem;
}

.item-card.hidden {
	display: none;
}

.item-card.locked {
	border: 1px solid rgba(255, 255, 255, 0.15);
	background-color: rgba(0, 0, 17, 0.3);
	opacity: 0.75;
}

.item-card .card-body {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	height: 61px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.item-card.locked .card-body {
	background-color: rgba(0, 0, 17, 0.7);
}

.item-card.locked img {
	opacity: 0.5;
}

.item-card.secret {
	background: linear-gradient(124deg, rgba(170,49,84,.1) 0%, rgba(232,97,174,.1) 23%, rgba(231,176,0,.1) 65%, rgba(234,105,4,.1));
	background-size: 500% 500%;
	border: solid 1px rgba(231,176,0,.4);
	
	-webkit-animation: rainbow 20s ease infinite;
	-z-animation: rainbow 20s ease infinite;
	-o-animation: rainbow 20s ease infinite;
	animation: rainbow 20s ease infinite;
}

.item-card .bg {
	z-index: 10;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0);
}

.item-card.secret .card-body {
	background: linear-gradient(124deg, rgba(170,49,84,1) 0%, rgba(232,97,174,1) 23%, rgba(231,176,0,1) 65%, rgba(234,105,4,1));
	background-size: 500% 500%;
	
	-webkit-animation: rainbow 20s ease infinite;
	-z-animation: rainbow 20s ease infinite;
	-o-animation: rainbow 20s ease infinite;
	animation: rainbow 20s ease infinite;
}

.item-card .card-body h3 {
	margin: -5px 0 0 0;
	line-height: 21px;
	font-size: 1.25em;
}

.item-card.secret .card-body {
	color: white;
}

.item-card iframe {
	width: 537px;
	height: 776px;
	padding: 0;
    font-size: 0;
	position: absolute;
	z-index: 1;
	top: -38px;
	left: 0;

	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
}

.item-card img {
	object-fit: contain;
	width: 100%;
    font-size: 0;
}

.item-card.outfit-card img {
	height: calc(100% - 61px);
	padding: 0;
}

.item-card.sticker-card img {
	max-height: 270px;
	min-height: 140px;
	height: 45vw;
	padding: 10px;
}

.item-card .cover {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.item-card.selectable:hover {
	background-color: #112;
	cursor: pointer;
}

.item-card.selectable.secret:hover .bg {
	background: linear-gradient(124deg, rgba(255,255,255,0), rgba(255,255,255,0.4));
	mix-blend-mode: overlay;
}

#redemption-dialog button.dialog-btn {
	height: 100%;
	width: 40%;
	line-height: 50px;
	vertical-align: middle;
	text-align: center;
	display: inline-block;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	font-size: 30px;
}

#redemption-dialog button.dialog-btn.secondary {
	opacity: 0.7;
}

#redemption-dialog button.dialog-btn.secondary:hover {
	opacity: 1.0;
}

#redemption-dialog button.dialog-btn.accent:hover {
	color: white;
}

#redemption-dialog button.dialog-btn:focus {
    outline-width: 0;
}

#redemption-dialog.response.error .response-text {
	color: rgb(217, 57, 57);
}

#redemption-dialog.response.success .response-text,
#redemption-dialog.response.success-item .response-text {
	color: #0acb6a;
}

#redemption-dialog.response.success-item .response-content .dialog-button-container {
	display: none;
}

#redemption-dialog .spinner {
	width: 300px;
	text-align: center;
}

.redemption-secret-entry-form {
	width: 100%;
}

.redemption-secret-entry-form .redemption-secret-entry {
	width: 64%;
	height: 64px;
	padding: 0.5em 1em 0.5em 1em;
	border: none;
	border-radius: 28px;
	background-color: #eef;
	font-size: 20px;
	color: #001;

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.redemption-secret-entry-form .redemption-secret-entry::placeholder {
	color: #889;
}

.redemption-secret-entry-form .redemption-secret-entry-submit {
	width: 34%;
	height: 64px;
	padding: 0.5em 1em 0.5em 1em;
	border: none;
	border-radius: 28px;
	background-color: #0acb6a;
	font-size: 20px;
	color: #001;

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.redemption-secret-entry-form .redemption-secret-entry-submit:hover {
	background-color: #16d877;
}
  
@-webkit-keyframes rainbow {
	0%{background-position:0% 82%}
	50%{background-position:100% 19%}
	100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
	0%{background-position:0% 82%}
	50%{background-position:100% 19%}
	100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
	0%{background-position:0% 82%}
	50%{background-position:100% 19%}
	100%{background-position:0% 82%}
}
@keyframes rainbow { 
	0%{background-position:0% 82%}
	50%{background-position:100% 19%}
	100%{background-position:0% 82%}
}

canvas.confetti {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: none;
	pointer-events: none;
	padding: 0;
	margin: 0;
	z-index: 10000;
}