@font-face { font-family: 'cream-DEMO'; src: url('fonts/cream-DEMO.otf'); font-display: swap; }
@font-face { font-family: 'CREAMPUFF'; src: url('fonts/CREAMPUFF.ttf'); font-display: swap; }
@font-face { font-family: 'DrippingCool'; src: url('fonts/DrippingCool.ttf'); font-display: swap; }
@font-face { font-family: 'Spray'; src: url('fonts/Spray.ttf'); font-display: swap; }
@font-face { font-family: 'TastyDrips'; src: url('fonts/TastyDrips.ttf'); font-display: swap; }
@font-face { font-family: 'WOODCUTTER DRIPPING CLASSIC FONT'; src: url('fonts/WOODCUTTER DRIPPING CLASSIC FONT.ttf'); font-display: swap; }
@font-face { font-family: 'Original Quotes'; src: url('fonts/Original Quotes.otf'); font-display: swap; }
html, body { float: left; width: 100%; height: 100vh; display: inline-block; margin: 0; padding: 0; border: 0; outline: 0; z-index: 100; box-shadow: 1px -1px 6px 4px #000; font: 1.2em; font-family: 'CREAMPUFF', 'Helvetica', 'Arial'; color: #ccc; font-weight: 100; scrollbar-width: none; }
#bg { position: fixed; width: 100%; }
#bgi { position: fixed; width: 100%; height: 100%; overflow: hidden; font-size: 1.5em; background: #0009; text-shadow: -1px -1px 0 rgba(255,255,255,0.3), 1px 1px 0 rgba(0,0,0,0.0); font-family: 'Original Quotes'; }


.body { float: left; animation: rotate 12s infinite; position: absolute; width: 100%; height: 100vh; margin: 0; padding: 0; z-index: 1000; }
.body:hover {  animation: paused; }
.bim { float: left; position: absolute; width: 98%; min-height: 100%; margin: 0; padding: 0 1%; z-index: 1000; background: #ba4a00 url('media/ai/19.webp') repeat fixed 0% 0% / 100%; }
.bimo { position: absolute; left: 0; right: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 10; background: #ba4a0051; }
@keyframes rotate {  0% { transform: rotate(0deg) scaleX(-1); overflow: hidden; }  
					50% { transform: rotateX(-360deg) rotateY(-180deg) scale(0.05); overflow: hidden; }  
				   100% { transform: rotateX(360deg) scale(1); overflow: hidden; }}

video { float: left; z-index: -100; position: realtive; width: 33.333%; margin: -50px 0 0 0; }

a { color: #fff; text-decoration: none; }
a:hover { color: #c96174; }


.head { position: relative; margin: 20px 0 0 0; text-align: left; z-index: 100; }
.head a { line-height: 50px; margin: 0 15px; font-weight: 100; }
.head h1 { float: left; margin: 0; font-weight: 100; }

ol { list-style: none; float: left; width: 20%; margin: -3% 0.5% 0 0.5%; padding: 2%; color: #ccc2; font-size: 1.2em; }
ol > li { lsit-style: none; clear: left; float: left; width: 100%; margin: 5% 0; }

ul { position: relative; z-index: 100; list-style: none; display: inline-flex; flex-wrap: wrap; gap: 20px; margin: 30vh 0 100px 0; padding: 0; }
ul:after { content: ''; display: block; flex-grow: 10; }
ul a { display: flex; height: 100%; object-fit: cover; vertical-align: bottom; display: flex; flex-grow: 1; }
li { display: flex; flex-grow: 1; transition: transform .5s; }
li:hover { transform: scale(1.03); z-index: 100; }
a img { max-height: 450px; min-width: 100%; object-fit: cover; vertical-align: bottom; display: flex; flex-grow: 1; }
@media (max-aspect-ratio: 1/1) { li { height: 30vh; } }
@media (max-height: 480px) { li { height: 80vh; } }
@media (max-aspect-ratio: 1/1) and (max-width: 480px) { ul { flex-direction: row; } li { height: auto; width: 100%; } img { width: 100%; max-height: 75vh; min-width: 0; } }

.tl, .tr { width: auto; font-size: 1.5em; } 
.tl { float: left; }
.tr { float: right; }
.tl a, .tr a { color: #ccc; }
.tl a:hover, .tr a:hover { color: #c96174; }
.tm { clear: both; width: 100%; } 
.tb { clear: both; position: relative; z-index: 10; width: 100%; margin: 250px 0 0 0; color: #eee; text-shadow: 1px 1px 5px #826047; font-size: 1.8em; font-family: 'cream-DEMO'; }
p { display: inline-block; width: 100%; maring: 50px 0 0 0; }
.tm > h1 { width: 100%; font-size: 3em; font-weight: 100; text-align: center; margin: 30px 0 0 0; color: #fff; font-family: 'WOODCUTTER DRIPPING CLASSIC FONT'; line-height: 1.5em; }
.tm > h5 { width: 100%; font-size: 0.9em; font-weight: 100; text-align: center; margin: 80px 0 0 0; }
div { float: left; width: 100%; } 
h2 { width: 100%; font-size: 1.5em; font-weight: 100; text-align: center; margin: 0 0 50px 0; font-weight: 900; }
h3 { width: 100%; font-size: 1em; line-height: 1.5em; font-weight: 100; text-align: center; margin: 10px 0; }
h3 a { text-decoration: underline; font-weight: 900; }
.small { margin: 0; font-size: 2em; font-family: 'Original Quotes'; }
li:hover .ribbon { display: block; }
footer { clear: both; width: 100%; position: relative; z-index: 100; display: inline-block; font-size: 2em; text-align: center; font-family: 'Original Quotes'; color: #eee; text-shadow: 1px 1px 5px #826047; }
::-webkit-scrollbar { none; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0 #fff; border-radius: 0; }
::-webkit-scrollbar-thumb { background: #fff; border-radius: 0; -webkit-box-shadow: inset 0 0 0 #000; font-size: 2em; display: inline-block; width: .2em; height: .4em; border: .05em solid rgba(205,205,205,1); position: relative; border-radius: 0; z-index: 1; }

.glaze { font-family: 'WOODCUTTER DRIPPING CLASSIC FONT'; color: #eee; text-shadow: 1px 1px 5px #826047; font-size: 0.9em; }

h2 { position: relative; z-index: 1000; float: left; width: 100%; font-size: 3em; text-align: center; font-family: 'cream-DEMO'; color: #eee; text-shadow: 1px 1px 5px #826047; }
.clear { clear: both; width: 100%; margin: 27vh 0 0 0; }
.front { float: left; position: relative; z-index: 1000; color: #eee; text-shadow: 1px 1px 5px #826047; font-family: 'Original Quotes'; font-size: 2em; }
.box { float: left; width: 40%; margin: 0 30%; color: #eee; text-shadow: 1px 1px 5px #826047; font-family: 'cream-DEMO'; font-size: 1.3em; }
.indent { float: left; text-indent: 40px; }

.about { float: left; width: 60%; margin: 80px 20% 0 20%; line-height: 1.5em; }
.about > img { float: right; min-width: 50%; max-width: 50%; min-height: auto; max-height: 500px; object-fit: contain; }
.about > h3 { text-align: center; }

#imageContainer > li a > video { max-height: 450px; min-width: 100%; margin: 0 0 1px 0; object-fit: cover; vertical-align: bottom; display: flex; flex-grow: 1; z-index: 1000; }

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	video { width: 50%; }
	ol { width: 28.3%; }
	ol > li { height: auto; }
	.tl, .tr { width: 100%; text-align: center; }
	.tm > h1 { font-size: 2em; }
	h2 { font-size: 1.8em; }
	.glaze { font-size: 1.2em; }
	.box { width: 60%; margin: 80px 20% 0 20%; }
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
	video { width: 50%; }
	ol { width: 45%; }
	ol > li { height: auto; }
	.tl, .tr { width: 100%; text-align: center; }
	.tm > h1 { font-size: 2em; }
	h2 { font-size: 1.8em; }
	.glaze { font-size: 1.2em; }
	.box { width: 60%; margin: 80px 20% 0 20%; }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	video { width: 50%; }
	ol { width: 45%; }
	ol > li { height: auto; }
	.tl, .tr { width: 100%; text-align: center; }
	.tm > h1 { font-size: 2em; }
	h2 { font-size: 1.8em; }
	.glaze { font-size: 1.2em; }
	.box { width: 80%; margin: 80px 10% 0 10%; }
}
@media only screen and (min-width: 100px) and (max-width: 768px) {
	video { width: 100%; }
	ol { width: 95%; }
	ol > li { height: auto; }
	.tl, .tr { width: 100%; text-align: center; }
	.tm > h1 { font-size: 2em; }
	h2 { font-size: 1.8em; }
	.glaze { font-size: 1.2em; }
	.box { width: 86%; margin: 80px 7% 0 7%; }
}