@import url("gold.css") layer(gold);
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Micro+5&display=swap');


:root {
    --bg: #0f0f23;
    --text: #cccccc;
    --green: #00cc00;
    --dark-green: #009900;
    --gold: #ffff66;
    --silver: #9999cc
}

body {
    font-family: 'Source Code Pro';
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
}

h1 {
	color: var(--dark-green);
    font-weight: bold;
}

p {
	text-align: center
}

b {color: var(--gold)}
em {color: var(--silver)}

button {
    border: 1px solid var(--dark-green);
    cursor: pointer;
    width: 12rem;
    transition: all .1s linear;
    a {text-decoration: none;}
}

button:hover {
    border: 1px solid var(--green);
    filter: brightness(1.05);
}

/* EVC2 */

#plate {
	display: grid;
	.cell {
		width: 100%;
		height: 100%;
		background: yellow;
		&[engraved] {
			background: red
		}
	}
}

/* AOC1 */

#lock_wrapper {
	border: 1px solid var(--silver)
}

@property --turn {
  syntax: "<angle>";
  inherits: true;
  initial-value: .5turn;
}

#lock {
	width: 25rem;
	aspect-ratio: 1/1;
	rotate: Z var(--turn);
	transition: .5s ease-out;
	mix-blend-mode: hard-light;
	filter: drop-shadow(0px 0px 4px var(--silver))
}

#cross {
	color: var(--gold)
}

/* AOC6 */


#calc-wrapper {
	width: 20rem;
	height: 30rem;
	display: grid;
	grid-template-columns: 1fr 1.5rem;
	pointer-events: none;
	> div:last-child {
		background: var(--silver);
		writing-mode: vertical-rl;
		text-orientation: mixed;
		text-align: center;
		align-content: center;
		color: var(--gold);
	}
}

#calc {
	background: white;
	display: grid;
	grid-template-rows: 4rem 1fr;
	> div:first-child {
		font-family: 'Micro 5';
		background: black;
		text-align: end;
	}
}

#buttons {
	display: grid;
	grid-template-rows: repeat(4, 1fr) 1fr;
	grid-template-columns: repeat(3, 1fr);
	> div {
		width: 4rem;
		aspect-ratio: 1/1;
		background: var(--silver);
		border-radius: var(--m);
		cursor: pointer;
		&:hover {
			color: var(--gold)
		}
		&:last-child {
			font-weight: bold
		}
		pointer-events: all;
		> div {
			pointer-events: none;
		}
	}
	a {
		text-decoration: none
	}
}