/* general styles */
body {
	background-image: url(../img/bg_ugly_tile.png);
	background-color: #000; 
	color: #fff;
	padding: 5%;
	font-size: 150%;
	font-family: New Times Roman;
}

#intro {
	display: flex;
}

#intro-bvw img {
	width: 148px;
}

#intro-text {
	width: calc(100% - 148px)
}

#disclaimer {
	font-size: 75%;
	text-align: center;
	padding: 5%;
}

#disclaimer p {
	border: #ff0000;
	border-style: dotted;
	padding: 1%;
}

.smol {
	font-size: 40%
}

.red {
	color: #ff0000
}

/* the 90s are calling, they want marquee back */
.marquee {
	margin: 0 auto;
	overflow: hidden;
	box-sizing: border-box;
}

.marquee span {
	display: inline-block;
	width: max-content;

	padding-left: 100%;
	/* show the marquee just outside the paragraph */
	will-change: transform;
	animation: marquee 15s linear infinite;
}

.marquee span:hover {
	animation-play-state: paused
}

@keyframes marquee {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-100%, 0); }
}

/* oh boi */
.blink {
    animation-name: animation_blink;
    animation-timing-function: linear;
    animation-duration: 1.5s; 
    animation-iteration-count: infinite;            
}

@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }    
}

/* ascii-art */
.ascii-art {
	font-size: 150%;
}

@media screen and (max-width: 1023px) {
	.ascii-art {
		font-size: 100%;
	}
}

@media screen and (max-width: 624px) {
	.ascii-art {
		font-size: 75%;
	}
}


@media screen and (max-width: 475px) {
	.ascii-art {
		font-size: 72%;
	}
}

@media screen and (max-width: 397px) {
	.ascii-art {
		font-size: 50%;
	}
}