/* C64 COLORS */
/* :root { */
/*     --my-black: #000; */
/*     --my-blue: #00A; */
/*     --my-light-blue: #08F; */
/*     --my-cyan: #AFE; */
/*     --my-green: #0C5; */
/*     --my-light-green: #AF6; */
/*     --my-dark-gray: #333; */
/*     --my-light-gray: #777; */
/*     --my-lighter-gray: #BBB; */
/*     --my-white: #FFF; */
/*     --my-brown: #640; */
/*     --my-red: #800; */
/*     --my-light-red: #F77; */
/*     --my-violet: #C4C; */
/*     --my-orange: #D85; */
/*     --my-yellow: #EE7; */
/* } */

/* SOLARIZED DARK */
:root {
    --my-black: #002b36;
    --my-blue: #073642;
    --my-light-blue: #268bd2;
    --my-cyan: #2aa198;
    --my-green: #859900;
    --my-dark-gray: #586e75;
    --my-light-gray: #657b83;
    --my-lighter-gray: #839496;
    --my-white: #eee8d5;
    --my-light-white: #fdf6e3;
    --my-red: #dc322f;
    --my-magenta: #d33682;
    --my-violet: #6c71c4;
    --my-orange: #cb4b16;
    --my-yellow: #b58900;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--my-blue);
    color: var(--my-white);
    font-family:  "VT323", monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    caret-color: transparent;
}

#logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:0;
}

.hidden-audio {
    display: none;
}

h1 {
    font-size:3em;
    margin: 0.1em;
    margin-right:0.1em;
    text-shadow: 0 0 10px black;
}

#logo {
    width: 2rem;
    height: 2rem;
}

#score-area {
    display: flex;
    justify-content: center;
    background-color: var(--my-blue);
    font-size: 2rem;
}

#score {
    font-size: 2rem;
    margin-left: 1rem;
    color: var(--my-light-white);
}

#game-container {
    background-color: var(--my-dark-gray);
}

#game-grid {
    box-shadow: 10px 5px 5px var(--my-black);
    position:relative;
    background-color: var(--my-black);
    display: grid;
    grid-template-columns: repeat(40, 1.5em);
    grid-template-rows: repeat(30, 1.5em);
}

#splash {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    min-width:100%;
    min-height:100%;
    z-index: 1;
}

.bonus-text {
    z-index: 2;
    color: rgba(255,255,255,1);
    font-size: 10rem;
    visibility: hidden;
}

@keyframes bonus-splash {
    from {
	visibility: visible;
	font-size: 1rem;
	opacity: 100%;
    }
    25% {
	color: var(--my-green);
    }
    75% {
	color: var(--my-red);
	opacity: 75%;
    }
    to {
	color: var(--my-light-blue);
	opacity: 0%;
	font-size: 10rem;
    }
}

.show-bonus {
    visibility: hidden;
    animation-name: bonus-splash;
    animation-duration: 1s;
}

.occupied {
    /* border: 1px solid var(--my-white); */
    background-color: var(--my-violet);
    border-radius: 50px;
    border-radius: 50px;
}

.unoccupied {
    /* border: 1px solid var(--my-white); */
    background-color: var(--my-black);
}

.bonus-apple {
    animation-name: bonus-animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.regular-apple {
    background-color: var(--my-light-white);
    border-radius: 50px;
    animation-name: apple-animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes apple-animation {
    from {
	transform: scale(1);
	opacity: 100%;
    }
    50% {
	transform: scale(0.75);
	opacity: 50%;
	background-color: var(--my-light-blue);
    }
    to {
	transform: scale(1);
	opacity: 100%;
    }
}

@keyframes bonus-animation {
    from {
	background-color: var(--my-red);
	transform: rotate(30deg) scale(0.5);
	border-radius: 0px;
    }
    25% {
	background-color: var(--my-yellow);
	transform: rotate(10deg) scale(1.2);
	border-radius: 5px;
    }
    50% {
	background-color: var(--my-green);
	transform: rotate(60deg) scale(0.1);
	border-radius: 10px;
    }
    75% {
	background-color: var(--my-cyan);
	transform: rotate(75deg) scale(0.5);
	border-radius: 25px;
    }
    to {
	background-color: var(--my-green);
	transform: rotate(90deg) scale(1);
	border-radius: 50px;
    }
}

#button-bar {
    padding:1em;
    background-color: var(--my-blue);
    display:flex;
    justify-content:center;
}