:root {
	--color-bg:var(--color-light-gray);
	--color-everything-else:var(--color-dark-green);
}

@media (prefers-color-scheme: dark) {
	:root {
			--color-bg: var(--color-dark-green);
			--color-everything-else: var(--color-light-gray);
		}
}


body {
	background:var(--color-bg);
	color:var(--color-everything-else);
}


.pad {
	height:var(--gap-spacing);
}
.pad-double {
	height:calc(var(--gap-spacing)*2);
}

.six-column-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);	
	grid-column-gap: 2vw;
	grid-row-gap: 2vw;
	margin-bottom: 2vw;
}

.flex{
	display: flex;
}

.flex.row{
	flex-direction: row;
}

.flex.column{
	flex-direction: column;
}

.inline.flex{
	display: inline-flex;
}

.dot-grid-bg{
	background: url('/assets/images/lil-square.svg');
	background-repeat: space;
	color: var(--color-bg);
	background-size: 0.81vw;

}

.dot-grid-bg.dark{
	color: var(--color-everything-else);
}

p.smol-p{
	font-size: 1vw;
}

p.larger-p{
	font-size: 1.5vw;
}

canvas.ascii-fire {
	width:100%;
	height:20vw;
}



.ascii-button {
	margin-bottom: 1vw;
	cursor: pointer;
	width: auto;
}

.ascii-button p {
	line-height: 100%;
	margin-bottom: 0px;
	font-size: max(12px, 1.25vw)
}

.slashes {
	line-height: auto
}

.slashes.left {
	padding-right: 4px;
}

.slashes.right {
	padding-left: 4px;
}

.ascii-button .button {
	pointer-events: none;
	font-size: max(12px, 1.25vw);
	border:none;
	position:relative;
}
.ascii-button .button-arrow {
	display:inline-block;
}
.ascii-button:hover .button-arrow {
	transform:translateX(0.5vw);
}
.ascii-button .button:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 1vw;
    top: 0;
    left: 0.3vw;
    background: url(/assets/images/dash-light.svg);
    background-repeat: round;
    background-size: 2.1vw 0.2vw;
    background-position: left;
    transform: scaleY(0.1);
    transform-origin: top center;
}
.ascii-button .button:after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 1vw;
    bottom: 0;
    left: 0.3vw;
    background: url(/assets/images/dash-light.svg);
    background-repeat: round;
    background-size: 2.1vw 0.2vw;
    background-position: left;
    transform: scaleY(0.1);
    transform-origin: bottom center;
}
.fire-trans {
	pointer-events:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1000;
}
.fire-trans canvas {
	width:100%;
	height:100%;
}


.grid-work .img {
	background:white;
	opacity:0.1;
}
.grid-work .span-4 .img {
	aspect-ratio: 1/1;
}
.grid-work .span-8 .img {
	aspect-ratio: 1/1;
}
.grid-work .span-12 .img {
	aspect-ratio: 4/3;
}