body {
	margin: 0;
	font-family: Verdana;
	font-size: 20px;
	background-color: rgba(245, 245, 245, 0.5);
}

/* grid settings */
#grid-container {
	display: grid;
	grid-template: 0.7fr repeat(2, 1fr) / repeat(3, 1fr);
	grid-gap: 10px;
	height: 100vh;
}

#opponent-icon {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}

#player-icon {
	grid-row: 3 / 4;
	grid-column: 2 / 3;
	margin-top: 5vh;
}

#center-log {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	place-self: center stretch;
	height: 30vh;
	border: 3px solid rgba(150, 150, 150, 0.5);
	border-radius: 40px;
}

#left-log {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	justify-self: end;
}

#right-log {
	grid-row: 2 / 3;
	grid-column: 3 / 4;
}

/* general CSS */
.icons {
	place-self: center;
	width: 250px;
	height: 250px;
}

.side-logs {
	border: 1px solid rgba(150, 150, 150, 0.5);
	border-radius: 50px;
	width: 3vw;
	display: grid;
}

#opp-guess {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	place-self: end end;
	margin: 0;
}

#your-guess {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
	place-self: start start;
	margin: 0;
}

#guess-input {
	grid-row: 3 / 4;
	grid-column: 2 / 3;
	place-self: start center;
	border: 1px solid rgba(150, 150, 150, 0.75);
	font-size: 1em;
	border-radius: 0.25em;
	margin-top: 1vh;
}

#guess-input:focus {
	box-shadow: 0px 0px 5px #007bff;
}

#guess-input-button {
	grid-row: 3 / 4;
	grid-column: 2 / 3;
	place-self: start center;
	margin-left: 20vw;
	font-size: 1em;
	padding: 8px;
	border-radius: 0.5em;
	background-color: rgba(176, 196, 222, 0.5);
}

#guess-input-button:hover {
	background-color: rgba(176, 196, 222, 0.8);
}

#no-input-text {
	position: absolute;
	text-align: center;
	margin-top: 62.5vh;
	margin-left: 55vw;
	font-size: 0.75em;
	font-weight: bold;
	opacity: 0;
	z-index: -1;
}

#center-log > * {
	animation: textIn 0.5s;
	margin: 25px 0px 25px 5px;
}

.side-logs > * {
	place-self: center center;
	font-weight: bold;
}

#right-log > * {
	animation: zoomInUp;
	animation-duration: 1s;
}

#left-log > * {
	animation: zoomInUp;
	animation-duration: 1s;
}

#info {
	position: absolute;
	height: 20px;
	width: 20px;
	padding: 15px;
	background-color: #ccc;
	border-bottom-right-radius: 2em;
	place-self: start start;
	transition: all 1s;
}

#info:hover {
	position: absolute;
	height: 60vh;
	width: 15vw;
	transition: all 1s;
	transform-origin: top left;
}

#info:hover #info-text {
	max-height: 400px;
	opacity: 1;
	transition: all 1s ease-out;
}

#info-text {
	opacity: 0;
	position: absolute;
	font-size: 16px;
	max-height: 0;
	height: 25vh;
	width: 15vw;
}

#dark-light-switch {
	grid-row: 1 / 2;
	grid-column: 3 / 4;
	place-self: start end;
	margin: 1vw 2vh 0 0;
	border: 0px;
	border-radius: 2em;
	background: #aaa;
	padding: 5px;
	cursor: pointer;
}

.fa-moon {
	font-size: 30px;
}


@keyframes textIn {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}

	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

@keyframes fadingOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}