@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

*::-moz-selection {
	background : #FD5D8D;
	color      : #2E0B77;
	
}

*::selection {
	background : #FD5D8D;
	color      : #2E0B77;
}

html, body {
	width  : 100%;
	height : 100%;
}

body {
	display        : flex;
	flex-direction : column;
	min-height     : 100vh; /* Ensures the full height of the viewport */
	position       : relative;
	background     : #0F3485;
	overflow       : hidden;
	font-family    : "Press Start 2P", cursive;
	color          : #FFFFFF;
}

body:before {
	content        : "";
	z-index        : 1;
	position       : absolute;
	left           : 0;
	top            : 0;
	right          : 0;
	bottom         : 0;
	background     : radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
	
	mix-blend-mode : overlay;
	pointer-events : none;
}

header {
	display         : flex;
	flex-direction  : row;
	justify-content : space-between;
	width           : 100%;
	padding         : 10px;
}

#brand {
	display        : flex;
	flex-direction : column;
}


#slogan {
	font-size         : 2rem;
	will-change       : text-shadow;
	-webkit-animation : rgbText 2s steps(9) 0s infinite alternate;
	animation         : rgbText 2s steps(9) 0s infinite alternate;
}

#slogan .char {
	will-change             : opacity;
	-webkit-animation       : type 1.2s infinite alternate;
	animation               : type 1.2s infinite alternate;
	-webkit-animation-delay : calc(60ms * var(--char-index));
	animation-delay         : calc(60ms * var(--char-index));
}


.logo {
	font-size         : 2rem;
	will-change       : text-shadow;
	-webkit-animation : rgbText 1s steps(9) 0s infinite alternate;
	animation         : rgbText 1s steps(9) 0s infinite alternate;
}

.sub-logo {
	font-size         : 1rem;
	will-change       : text-shadow;
	-webkit-animation : rgbText 1s steps(9) 0s infinite alternate;
	animation         : rgbText 1s steps(9) 0s infinite alternate;
}


main {
	margin-top     : 4rem;
	margin-left: auto;  /* Corrected from 'margin-outside' */
	margin-right: auto; /* Corrected from 'margin-outside' */
	padding        : 0 0.5rem 0 0.5rem;
	flex           : 1;
	display        : flex;
	flex-direction : row;
	gap            : 2rem;
	justify-content: center; /* Center horizontally */
	width          : 80%; /* Ensure it spans the width of the viewport */
}

#details-container {
	flex : 1;
	font-size: 1.8rem;
}

#now-pouring{
	font-size : 2rem;
}


#glass-container {
	width       : auto; /* Or set a specific width if needed */
	align-items : center; /* Center vertically */
}

footer {
	display        : flex;
	flex-direction : row;
	padding        : 10px;
	width          : 100%;
}


.daily {
	will-change       : text-shadow;
	-webkit-animation : rgbText 1s steps(9) 0s infinite alternate;
	animation         : rgbText 1s steps(9) 0s infinite alternate;
}


/* Default styles */
.abbrev {
	display : none;
}

/* Styles for small screens */
@media (max-width : 400px) {
	
	
	.full {
		display : none;
	}
	
	.abbrev {
		display : inline;
	}
}

@media (max-width : 599px) {
	#glass-container {
		display : none;
	}
}

@media (max-width : 500px) {
	header {
		flex-direction : column;
		align-items    : center;
	}
	
	footer {
		flex-direction : column;
		align-items    : center;
	}
	
	#slogan {
		font-size  : 1.5rem;
		margin-top : 10px;
		width      : 100%;
		text-align : center;
	}
	
	#details-container {
		font-size: 1rem;
	}
	
	
	.logo {
		font-size : 1.25rem;
	}
	
	.sub-logo {
		font-size : 0.75rem;
	}
	
	main {
		margin-top     : 0.15rem;
		flex-direction : column;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	

	
}

/* Animations */

@-webkit-keyframes opacity {
	0% {
		opacity : 0.6;
	}
	20% {
		opacity : 0.3;
	}
	35% {
		opacity : 0.5;
	}
	50% {
		opacity : 0.8;
	}
	60% {
		opacity : 0.4;
	}
	80% {
		opacity : 0.7;
	}
	100% {
		opacity : 0.6;
	}
}

@keyframes opacity {
	0% {
		opacity : 0.6;
	}
	20% {
		opacity : 0.3;
	}
	35% {
		opacity : 0.5;
	}
	50% {
		opacity : 0.8;
	}
	60% {
		opacity : 0.4;
	}
	80% {
		opacity : 0.7;
	}
	100% {
		opacity : 0.6;
	}
}

@-webkit-keyframes rgbText {
	0% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	25% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	45% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
	}
	50% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
	}
	55% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	90% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
	}
	100% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
	}
}

@keyframes rgbText {
	0% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	25% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	45% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
	}
	50% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
	}
	55% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	90% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
	}
	100% {
		text-shadow : -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
	}
}

@-webkit-keyframes type {
	0%, 19% {
		opacity : 0;
	}
	20%, 100% {
		opacity : 1;
	}
}

@keyframes type {
	0%, 19% {
		opacity : 0;
	}
	20%, 100% {
		opacity : 1;
	}
}