:root {
    --grid-dimension: 8;
    --scoreboard-container-height: 80px;

    /* --grid-width: 800px; */
    --grid-width: calc(57vh);
    --grid-height: calc(57vh);
    /* --grid-height: 640px; */
    --grid-container-width: calc(var(--grid-width));
    --grid-container-height: var(--grid-height);

    --shape-container-height: calc(var(--grid-height) / 2);
    --shape-container-width: calc(var(--grid-width) / 2);

    --margin: 20px;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(17, 22, 33);
    overflow-x: hidden;
}

.main-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    color: #fff;
    font-size: 1rem;
    width: 80%;
}

.scoreboard-container {
    width: 100%;
    height: var(--scoreboard-container-height);
}

.scoreboard {
    text-align: center;
}

.score {
    font-size: 2rem;
    font-weight: 700;
}

.grid-container {
    width: var(--grid-container-width);
    height: var(--grid-container-height);
    border: 1px solid blueviolet;
    background: rgb(12, 26, 49);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.grid-cell {
    border: 2px solid rgb(18, 31, 57);
    box-sizing: border-box;
    background: rgb(12, 26, 49);
    flex-basis: calc(var(--grid-width) / var(--grid-dimension));
    height: calc(var(--grid-height) / var(--grid-dimension));
    color: white;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
}

.shapes-container {
    width: calc(var(--grid-width) + 20px);
    margin-top: var(--margin);
    height: var(--shape-container-height);
    display: block;
    position: relative;
}

.shape-container {
    width: var(--shape-container-width);
    height: var(--shape-container-height);
    display: flex;
    color: white;
    text-align: center;
    position: absolute;
    z-index: 9;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

#shape-c1 {
    top: 0;
    left: 0;
}

#shape-c2 {
    top: 0;
    left: 50%;
}

.shape-cell {
    box-sizing: border-box;
    flex-basis: calc(var(--grid-width) / var(--grid-dimension));
    height: calc(var(--grid-height) / var(--grid-dimension));
    color: black;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
}

.shape-cell-active {
    background-position: center;
    background-repeat: no-repeat;
    background-size: initial;
    color: white;
    border: 2px solid rgb(17, 22, 33);
}

.shape-red, .tile-red {
    background-image: url("../imgs/red.png");
}

.shape-purple, .tile-purple {
    background-image: url("../imgs/purple.png");
}

.shape-yellow, .tile-yellow {
    background-image: url("../imgs/yellow.png");
}

.shape-blue, .tile-blue {
    background-image: url("../imgs/blue.png");
}

.shape-pink, .tile-pink {
    background-image: url("../imgs/pink.png");
}

.shape-hotpink, .tile-hotpink {
    background-image: url("../imgs/hotpink.png");
}

.shape-blueg, .tile-blueg {
    background-image: url("../imgs/blueg.png");
}

.shape-green, .tile-green {
    background-image: url("../imgs/green.png");
}

.shape-lime, .tile-lime {
    background-image: url("../imgs/lime.png");
}

.shape-cyan, .tile-cyan {
    background-image: url("../imgs/cyan.png");
}

.active-tile {
    background-position: center;
    background-repeat: no-repeat;
    background-size: initial;
}

.shape-wrapper1 {
    margin-right: 10px;
    /* padding: 10px; */
}

.score-text {
    font-size: 4rem;
    color: #fff;
}

.animate {
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff;
    }
}

.commentator-container {
    width: 100%;
    height: 80px;
}

.commentator-text span {
    display: inline-block;
    font-size: 4rem;
    animation: wave 2s ease-in-out infinite;
}

.commentator-text span:nth-child(1) {
    animation-delay: 0s;
}
.commentator-text span:nth-child(2) {
    animation-delay: 0.2s;
}
.commentator-text span:nth-child(3) {
    animation-delay: 0.4s;
}
.commentator-text span:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes wave {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.new-game-btn {
    position: absolute;
    right: 10px;
	box-shadow:inset 0px 1px 0px 0px #e184f3;
	background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
	background-color:#c123de;
	border-radius:6px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
}
.new-game-btn:hover {
	background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
	background-color:#a20dbd;
}
/* .new-game-btn:active {
	position:relative;
	top:1px;
} */