@import url('../textfonts.css');

@font-face {
	font-family: 'PX150';
	src: url('PX150VF.woff2') format('woff2');
	/* format('truetype'); */
}

h1 {
	font-family: arial;
	color: #6600ff 
}

p {
	font-family: arial;
	color: #6600ff 
}

#portfolio-page {
	h1 {
		color: #FA91E3;
		font-family: "PX150", sans-serif;
		font-size: 3rem;
		margin-top: 0;
		margin-bottom: 0;
		
	};

	h2 {
		color: #FFD04F;
		font-family: "PX150", sans-serif;
		font-size: 3rem;
		margin-top: 0;
		margin-bottom: 0;
		
	};
	
	cursor: url('https://idylladrian.github.io/graphics/hello-0.gif'), auto;
	-webkit-ind-animation: cursor 400ms infinite;
	animation: cursor 800ms infinite;

	p {
		font-family: arial, sans-serif;
		/* color: #4FFFCB; */
		color: black;
		font-size: 1rem;
	};

	background-color: #a5f9ff;
	
	image-rendering: pixelated;
	width: 100%;
	height: 100vh;
	max-height: 100vh;
	margin: 0;
	top: 0px;
	/* overflow: hidden; */
}

@-webkit-ind-keyframes cursor {
  0% {cursor: url('https://idylladrian.github.io/graphics/hello-0.gif'), auto;}
  15% {cursor: url('https://idylladrian.github.io/graphics/hello-1.gif'), auto;}
  30% {cursor: url('https://idylladrian.github.io/graphics/hello-2.gif'), auto;}
  45% {cursor: url('https://idylladrian.github.io/graphics/hello-3.gif'), auto;}
  60% {cursor: url('https://idylladrian.github.io/graphics/hello-4.gif'), auto;}
  75% {cursor: url('https://idylladrian.github.io/graphics/hello-5.gif'), auto;}
} 

@keyframes cursor {
  0% {cursor: url('https://idylladrian.github.io/graphics/hello-0.gif'), auto;}
  15% {cursor: url('https://idylladrian.github.io/graphics/hello-1.gif'), auto;}
  30% {cursor: url('https://idylladrian.github.io/graphics/hello-2.gif'), auto;}
  45% {cursor: url('https://idylladrian.github.io/graphics/hello-3.gif'), auto;}
  60% {cursor: url('https://idylladrian.github.io/graphics/hello-4.gif'), auto;}
  75% {cursor: url('https://idylladrian.github.io/graphics/hello-5.gif'), auto;}
}

@keyframes bounce-h1 {
	0% {translate: -10vw 0}
	50% {translate: 0vw 0}
	100% {translate: -10vw 0}
}

@keyframes bounce-h2 {
	0% {translate: -10vw 0}
	50% {translate: -20vw 0}
	100% {translate: -10vw 0}
}

.bucket {
	width: 100vw;
	overflow: clip;
}

.inline-logo {
	height: 3.5rem;
}

.title {
	height: 3.5rem;
	width: 200vw;
	/* border: 2px solid #4FFFCB; */
	background-color: #1460FA;
	/* overflow: clip; */
	h1 {
		animation-name: bounce-h1;
		animation-duration: 5s;
		animation-iteration-count: infinite;
	}

	h2 {
		animation-name: bounce-h2;
		animation-duration: 5s;
		animation-iteration-count: infinite;
	}
}

.scroll {
	height: 10rem;
	overflow: scroll;

	&::-webkit-scrollbar {
        display: none;
    }
    scrollbar-width: none;
    -ms-overflow-style: none; 
}

.scroll-container {
	width: 200vw;
}

.art-display {
	max-height: 75vh;
}

#possession-painting-icon {
	
}

.possession-image {
	background-image: url('https://idylladrian.github.io/graphics/possession1.jpeg');
	width: 10%;
	height: 10%;
}

#possession-painting {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
}

@keyframes shake {
	0% {rotate: 0;}
	25% {rotate: 0.025turn;}
	50% {rotate: -0.025turn;}
	75% {rotate: 0.025turn;}
	100% {rotate: 0turn;}
}

.interact-img {
	height: 10rem;
	filter: saturate(50%) opacity(50%);
}

.interact-img:hover {
	filter: saturate(100%);
	animation-name: shake;
	animation-duration: 1s;
}

.loader-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.loader {
	display: block;
	background-image: url('https://idylladrian.github.io/graphics/frog_loader.gif');
	width: 9vw;
	height: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 7vw;
	animation: loader 0.9s infinite ease;
}

@keyframes loader {
	0% { transform: translateX(0px);}
	7% { transform: translateX(-30px);}
	14% { transform: translateX(-50px);}
	21% { transform: translateX(-80px);}
	28% { transform: translateX(-110px);}
	35% { transform: translateX(-120px);}
	42% { transform: translateX(-130px);}
	49% { transform: translateX(-14vw);}
	56% { transform: translateX(-150px);}
	63% { transform: translateX(-150px);}
	70% { transform: translateX(-150px);}
	77% { transform: translateX(-150px);}
	84% { transform: translateX(-150px);}
	91% { transform: translateX(-60px);}
	100% { transform: translateX(0px);}
}



label {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: solid;
	border-width: 1%;
	border-color: #4FFFCB;
	color: #4FFFCB;
	font-family: arial;
	height: 100%;
	vertical-align: text-bottom;
	text-align: center;
	padding-top: 5%;
	padding-bottom: 5%;
	font-weight: bold;
}

label:hover {
	background-color: #4FFFCB;
	color: #0D1029;
}

.visually-hidden {
	position: absolute;
	left: -100vw;
}


#info-box {
	box-sizing: border-box;
	border: solid;
	border-width: 1%;
	border-color: #4FFFCB;
	background: #102830;
	width: 80%;
	height: 80%;
	margin: auto;
	padding: 1%;
}


.graphic {
	display: block;
	position: absolute;
	/* left: 50%; */
	background-repeat: no-repeat;
	background-origin: content-box;
	margin: auto;
}

#graphic-possession {
	display: none;
	position: fixed;
	background-repeat: no-repeat;
	background-origin: content-box;
	left: 10px;
	top: 10px;
	background-image : url('https://idylladrian.github.io/graphics/possession1.jpeg');
	background-size: calc(70vw / 1.5) calc(88.425vw / 1.5);
	padding-left: calc(calc(100% - calc(70vw / 1.5)) / 2);
	padding-right: calc(calc(100% - calc(70vw / 1.5)) / 2);
	padding-top: calc(calc(100% - calc(88.425vw / 1.5)) / 2);
	width: calc(70vw / 1.5);
	height: calc(88.425vw / 1.5);
}

/* popup */
.btn-mobile {
}

.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* background-color: white; */
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
	/* border-radius: 0px; */
	/* padding: 20px; */
	text-align: center;
	display: none;
	z-index: 1000;
}

.popup h2 {
	margin: 0 0 10px;
}

.got-em {
	width: 32vw; 
	height: 24vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	z-index: 999;
}

.popup-trigger {
            cursor: pointer;
            width: 100px;
            height: auto;
        }