* {
    font-family: 'Courier New', Courier, monospace;
    color: var(--text-color);
}

:root {
  --main-bg-color: #ffead8;
  --panel-bg-color: #e4bca0;
  --text-color: saddlebrown
}

body {
    background: #ffead8;
}

.header {
    align-items: center;
    margin: auto;
    text-align: center;
    padding: 1rem;
}



.create-game {
    margin: auto;
    text-align: center;
}
 
.games {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--main-bg-color);
    border-radius: 0.5rem;
    flex-direction: column;
    padding: 1rem;
}

.game {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--panel-bg-color);
    border-radius: 0.5rem;
    width: 90%;
    margin-top: 1rem;
    border-color: var(--text-color);
    border-style: solid;
    box-shadow: 6px 6px 0px 0px;
    border-width: 3px;
}

.gameTitle {
    margin-left: 1rem;
}

.gamePlayers {
    margin-left: auto;
    margin-right: 2rem;
}



button {
    background-color: #ffd9b0;
    border-radius: .5rem;
    border-color: var(--text-color);
    border-style: solid;
    border-bottom-color: var(--text-color);
    color: var(--text-color);
    transition: 0.2s;
    padding: .4rem;
    box-shadow: 4px 4px 0px 0px;
}

button:enabled:hover {
    box-shadow: 1px 1px 0px 0px var(--text-color);
    transition: 0.2s;
}

button:disabled {
    background-color: gray;
    border-color: darkgray;
    border-radius: .5rem;
    border-style: solid;
    color: #a8a8a8;
}


.clientId {
    align-self: center;
}

.numPlayers {
    align-self: center;
    padding-left: 2rem;
    margin-top: auto;
    margin-bottom: auto;
}

.message {
    padding: .5rem;
    padding-right: 1.5rem;
    height: 2rem;
    text-align: right;
}

.messageText {
    margin: 0;
}

.gameElements {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-bottom: 2rem;
}

.gameButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width:30%;
}

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

.gameInfoSection {
    display: flex;
    padding-top: 2rem;
    padding-bottom: 3rem;
    align-items: stretch;
    justify-content: space-between;
    width: 90%;
}

.gameInfo {
    background: #e4bca0;
    border-radius: 1rem;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-color: var(--text-color);
    border-style: solid;
    box-shadow: 6px 6px 0px 0px;
    border-width:3px;
}

.messageLog {
    width: 40%;
    background: #e4bca0;
    border-radius: 1rem;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    height: 12rem;
    border-color: var(--text-color);
    border-style: solid;
    box-shadow: 6px 6px 0px 0px;
    border-width: 3px;
}

.gameUI {
    display: flex;
    background: #e4bca0;
    border-radius: 1rem;
    width: 90%;
    flex-direction: column;
    border-color: var(--text-color);
    border-style: solid;
    box-shadow: 6px 6px 0px 0px;
    border-width:3px;
}

.players {
    display: flex;
    justify-content: center;
    padding-bottom: 1.5rem;
}

.gameInfoText {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.splitGameInfoText {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    width: 50%
}

.standardFlexDiv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.weaponImage {
    width:75%;
}

.weaponImage2 {
    width:30%;
}

.gamelistHeader {

}

.gameListHeaderText {

}

.gameListHeaderDivider {
    
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}