/* ==========================================================================
   variables
   ========================================================================== */

:root
{
	--col-wht: #eee;
}



/* ==========================================================================
   fonts
   ========================================================================== */



/* ==========================================================================
   animations
   ========================================================================== */

@keyframes monkey1anim													{ 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } }
@keyframes monkey2anim													{ 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }



/* ==========================================================================
   reset
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,ins,q,s,small,strike,strong,sub,sup,var,b,u,i,ol,ul,li,form,label,article,aside,canvas,details,figure,figcaption,footer,header,hgroup,nav,output,section,summary,time,mark,audio,video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
article,aside,figcaption,figure,footer,nav 								{ display: block; }
body 																	{ line-height: 1; }
ol, ul 																	{ list-style: none; }
* 																		{ margin: 0; padding: 0; }
*, *:before, *:after 													{ box-sizing: border-box; }

button 																	{ margin: 0; padding: 0; border: 0; outline: 0; background: transparent; -webkit-appearance: none; font-family: 'gotham', Helvetica, Arial, sans-serif; font-size: 1em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button::-moz-focus-inner 												{ padding: 0; border: 0; }



/* ==========================================================================
   universal styles
   ========================================================================== */

body 																	{ width: 100vw; height: 100dvh; background: #0c0e11; display: grid; place-items: center; }

h1 																		{ width: clamp(18rem, 90vw, 48rem); font-size: 1rem; line-height: initial; margin: initial; font-weight: initial; letter-spacing: initial; text-transform: initial; color: initial; }
h1 svg 																	{ pointer-events: none; }
h1 #monkey, h1 #monkey2, h1 #business 									{ fill: var(--col-wht); }
h1 #vine-games															{ transform: translateY(-13%); opacity: 0; transition: transform .25s cubic-bezier(0.05, 0.5, 0.36, 1.94), opacity .125s; }
h1 #games 																{ /*animation: glow .125s linear infinite;*/ fill: #00ffff; transform-origin: 49.7778% 62.4444%; transition: transform .375s cubic-bezier(0.61, -1.12, 0.46, 2.23) .125s; transform: rotate(0); }
h1 #vine #leaves														{ fill: #00ff00; }
h1 #vine #lt 															{ fill: #ffe2b4; }
h1 #vine #rt 															{ fill: #ffa500; }
h1 #crt-vine, .games h2 #crt-games										{ fill: #ffa8ff; mix-blend-mode: multiply; }

h1 #monkey 																{ opacity: 1; animation: monkey1anim .5s infinite; }
h1 #monkey2																{ opacity: 0; animation: monkey2anim .5s infinite; }

.loaded h1 #vine-games													{ transform: translateY(0); opacity: 1; }
.loaded h1 #games 														{ transform: rotate(-5deg); }



/* ==========================================================================
   custom styles
   ========================================================================== */



/* ==========================================================================
   media queries
   ========================================================================== */

@media only screen and (max-width: 60em) /* 960 */
{

}

@media only screen and (max-width: 47.9375em) /* 767 */
{

}

@media only screen and (max-width: 40em) /* 640 */
{

}