/* kumogai CSS. */

/* Global vairables */
/* CAN'T USE VARIABLES FOR rgba, SO DON'T BOTHER USING RGBA, JUST MAKE TWO CALLS, ONE FOR COLOR, ONE FOR ALPHA */
:root {
	--siteColor1: orange; 
	--siteColor2: #333; /* charcoal */
	--siteColor2rgb: 0, 0, 0;
	--siteColor2opacity: 0.9; /* shame we have to do it this way in 2020... */
	--siteColor3: linen; /* white */
	--siteColor3rgb: 255, 255, 255;
	--siteColor3opacity: 0.95;
	--siteColor4: #800080; /* purple */
	/* TO USE: color: var(--siteColor1); BE MINDFUL OF RGBA VALUES THAT USE THIS */
}

:root {scrollbar-color: var(--siteColor1) var(--siteColor2); scrollbar-width: thin;}

* {box-sizing: border-box;} /* just to make sure */

/* END Global vars */
html, body {
	height: 100%;
	box-sizing: border-box; 
	/*margin: 0;
	padding: 0;*/
}

/* NOTES;  SINCE FF ANDROID DOESN'T IMPL. clamp() (why?... August, 2020)
clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) */

/* ALL MEDIA QUERIES */
/* TO REMOVE POINTER SELECTIONS ON TOUCHSCREENS (EXAMPLE!) */
/* @media (any-hover: none) {  OR any-pointer.  WRONG WAY TO DO, CORRECT WAY BELOW! 
	#pointerSelector {display: none;}
} */
@media (pointer: coarse) {
	#pointerChoice { display: none; } /*SHOULD BE GENERIC, LIKE A CLASS, BUT - GOOD ENOUGH FOR NOW... */
}

a:link {color: var(--siteColor1);} /* THESE DON'T SEEM TO BE WORKING. INVESTIGATE, OR REMOVE.  APPEARS NEAR BOTTOM TOO... */
a:visited {color: var(--siteColor1);}
a:hover {color: var(--siteColor1);}
a:active {color: var(--siteColor1);}

@media screen and (width: 700px) { /* NOT WORKING. FIX! */
	main {width: 80%, margin: 0 auto;}
}
/* END MEDIA QUERIES */  /* I LIED, NO, CHANGED. USE MEDIA QUERY TO DETERMINE INITIAL DARK/LIGHT MODE?  BELOW IS THE SYNTAX.  
FIGURE WHERE TO THREAD THIS IN, OR RE-COMPARTMENTALIZE WOULD BE EVEN BETTER...

@media (prefers-color-scheme: dark) {
	set everything dark...;
}
@media (prefers-color-scheme: light) {
	set everything light...;
}
*/

body {
	height: 100%;
	/*line-height: 1rem; /* DOES THIS MAKE SENSE?  DON'T THINK SOO... REVIEW... */
	/* FIX! below needs to use --domainName instead of gr. Need orig art at 1,000px X 1,000px! if can't find, re-create.
	Doh! can't use variables in quoted strings.  damn. */
	background: #000 url("/gear/img/kumogai-logo-orange.svg") no-repeat center center;  
	background-attachment: fixed; /* is this old school?  revisit */
	background-size: contain;
	font-family: "Varela Round", sans-serif;
	color: var(--siteColor3);
	cursor: url("/gear/img/cursor/kumogai-logo-orange-32.png") 9 2, auto;
	box-sizing: border-box;
	margin: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

p {display: block !important;} /* 2024-07-23 Hack to overcome "display: initial;" being set on text after lang switch animation...FIX LATER! */

/* generic toggle - override specifics (colors, etc.) with ID */
.toggle {
	width: 3em;
	height: 1em;
	position: relative;
	border-radius: 0.5em;
	border: 1px solid var(--siteColor1);
	display: inline-block;
	cursor: pointer;
}
.toggle > div {
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: var(--siteColor1);
	position: absolute;
	top: 0; /* FIX! needs a slight nudge upwards */
	left: 0;
}
/* end generic toggle */

/* dark/light mode */
#modeChoice > div.toggle {
	background-image: linear-gradient(to right, var(--siteColor2), var(--siteColor3));
}
/* end dark/light mode */

@keyframes lightToDark {
	from {background-color: var(--siteColor3);}
	to {background-color: var(--siteColor2);}
}
/*@keyframes lightMainToDark {
	from {background-color: rgba(var(--siteColor3rgb), 0.95); color: var(--siteColor2)}
	to {background-color: rgba(var(--siteColor2rgb), 0.9); color: var(--siteColor3)}
}*/
@keyframes lightMainToDark { /* SINCE USING opacity INSTEAD OF rgba, DON'T NEED SITE COLOR RGB, CONSIDER DELETING */
	from {background-color: var(--siteColor3); opacity: var(--siteColor3opacity); color: var(--siteColor2);}
	to {background-color: var(--siteColor2); opacity: var(--siteColor2opacity); color: var(--siteColor3);}
}
@keyframes darkToLight {
	from {background-color: var(--siteColor2);}
	to {background-color: var(--siteColor3);}
}
@keyframes darkMainToLight {
	from {background-color: var(--siteColor2); opacity: var(--siteColor2opacity); color: var(--siteColor3);}
	to {background-color: var(--siteColor3); opacity: var(--siteColor3opacity); color: var(--siteColor2);}
}
@keyframes slideToRight {
	from {left: 0;}
	to {left: 2em;}
}
@keyframes slideToLeft {
	from {left: 2em;}
	to {left: 0;}
}
@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fadeOut {
	from {opacity: 1;}
	to {opacity: 0;}
}
/* end dark/light mode */

/* custom/common pointer */
/*  NOTE: just to remember - ⬀ U+2b00; is a stroked pointer... */
/* end custom/common pointer */

.todo {font-family: monospace; color: red;}

/* WEB FONTS - MAKE SURE CORRESPONDING <link> IS IN THE <head> */
h1, h2 {font-family: 'Syncopate', sans-serif;} /* ★★★★★ */
/*h1, h2 {font-family: 'Rock Salt', cursive;}*/ /* ★★★★★ */
/*h1, h2 {font-family: 'Architects Daughter', cursive;}
h1, h2 {font-family: 'Happy Monkey', cursive;}
h1, h2 {font-family: 'Kaushan Script', cursive;}
h1, h2 {font-family: 'Permanent Marker', cursive;}
h1, h2 {font-family: 'Sarina', cursive;}
h1, h2 {font-family: 'Zhi Mang Xing', cursive;}*/
/* END WEB FONTS */

.flexy {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 1rem auto;
}

header, nav, footer {
	background-color: var(--siteColor2);
	text-align: center;
}

header {border-bottom: 0.25rem solid var(--siteColor1); padding-top: 1em;}

nav {
	//border-bottom: 2px solid var(--siteColor1);
}

main {
	padding: 15px;
	/*background-color: rgba(var(--siteColor2rgb), 0.9);*/
	background-color: var(--siteColor2);
	opacity: var(--siteColor2opacity);
}

footer {
	border-top: 0.25rem solid var(--siteColor1);
}

/* PLAY WITH SVG IMAGES... */
/* unfortunately, can't use --domainName in the background url below 'cause interpoloation doesn't occur in quoted strings.
not gonna use a preprocessor just for this */
.anchorLogo {display: inline-block; width: 2em; height: 2em; background: url("/gear/img/kumogai-logo-orange.svg") no-repeat center/contain;
margin: 0; padding: 0;}
/* ABOVE SEEMS EASIEST IMPL. FOR THIS...
img.anchorImageLogo {display: inline-block; width: 2em; height: 2em; margin: 0; padding: 0; border: 1px dotted blue;}

object.objLogo {display: inline-block; width: 2em; height: 2em; cursor: pointer; border: 1px dotted red;}
object.objLogo:hover {cursor: pointer;}

svg.svgLogo {width: 2em; height: 2em; border: 1px dotted white;}
svg.svgLogo image {width: 2em; height: 2em;}*/
/* END PLAY WITH SVG IMAGES */


/* NEXT FOUR MUST BE IN THIS ORDER! */
a:link {color: var(--siteColor1);}
a:visited {color: var(--siteColor1);}
a:hover {color: var(--siteColor1);}
a:active {color: var(--siteColor1);}

/* NEEDED SO THAT BOTH LANGS DON'T LOAD, THEN JUMP */
:lang(ja) {
	opacity: 0;
	display: none;
}
:lang(en) {
	opacity: 0;
	display: none;
}

a {text-decoration: none;
	display: inline; /* don't want to do this, but can't find where it's getting set to block? */
}

ul {list-style-type: none;}

li::before {
	content: '\2699		'; /* gear ⚙ - consider, and list others */
}

/* MOVE BELOW TO WOOD.CSS IF/WHEN WOOD.CSS IS AUTO-LOADED INTO ALL WOOD SUB-PAGES */
.wood-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	outline: 1px dotted red; /* dev/debug */
}

#fullsize {
	width: 80%;
	margin: 1rem auto;
	outline: 1px dotted yellow; /* dev/debug */
	/*background-color: hotpink; SHOWING IN DEVTOOLS, BUT I CAN'T SEE IT... */
}

#fullsize > img {
	width: 100%;  /* not entirely sure if this is what I want here?...eval... */
	display: inline-block;
	background-color: lime;
}

img.caro-thumb {
	cursor: pointer;
}

.buy-now {
	border: 1px solid black;
	/*border-radius-left: 50%;  THIS MAKES A FOOTBALL SHAPE, NOT A PILL */
	/*border-bottom-left-radius: 1% 50%;  /* FUCKING NIGHTMARE!!!  CAN'T BELIEVE THIS IS STILL SO DIFFICULT TO MAKE A PILL SHAPE IN 2024!!! FUCK CSS!!! REVISIT... */
	border-radius: clamp(.5rem, 1vh, 1rem);  /* THIS WORKS WELL ENOUGH FOR NOW... */
	background: linear-gradient(to right, yellow, purple);
	width: fit-content;
	margin: 1rem auto;
	padding: 0.5rem;
	color: black;
	cursor: pointer;
}

.buy-now:hover {
	border: 1px solid red;
	color: whitesmoke;
}