html, body {
	margin:0;
	padding:0;
}

* {
    font-family: sans-serif;
}

.hidden {
	display:none;
}

.card {
	background-color:#1e1e1e;
	border-radius:10px;
	border:6px double white;
	padding:10px;
	position:relative;
}

.card-name {
	color: gold;
    font-weight: bold;
    display: block;
    text-align: center;
    margin-bottom: 10px;
    font-size: 25px;
	position:relative;
	line-height:40px;
}

.item-name {
	line-height:20px;
	height:40px;
}

.card-realname {
	position: absolute;
    bottom: -20px;
	left:0;
    font-size: 14px;
	width:100%;
	text-align:center;
}

.card-img {
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	width:100%;
	padding-top:100%;
	border: 1px solid white;
	box-sizing: border-box;
}

.character-img {
	border-radius:50%;
}

.item-img {
	border-color:#1e1e1e;
}


.cards-list {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
}

.cards-list-item {
	margin:0.5%;
	padding:0;
	width: 9%;
}

.cards-list-item button[type="submit"] {
	border: none;
    background: inherit;
    width: 100%;
	cursor:pointer;
	padding:0;
	margin:0;
}

.icon {
	width:20px;
	height:20px;
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	display:block;
}

.card-stars {    
display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 5px;
}

.card.creature-rarity-1 {
	background-color:#238d35;
}

.card.creature-rarity-1 .card-name {
	color:#adf3b3;
}

.card.creature-rarity-2 {
	background-color:#156ca9;
}

.card.creature-rarity-2 .card-name {
	color:#addff3;
}

.card.creature-rarity-3 {
	background-color:#972497;
}

.card.creature-rarity-3 .card-name {
	color:#ff9eff;
}

.card.creature-rarity-4 {
	background-color:#f59318;
}

.card.creature-rarity-4 .card-name {
	color:#ffe69e;
}

.card.creature-rarity-5 {
	background-color:#dd2b2b;
}

.card.creature-rarity-5 .card-name {
	color:#ffb0b0;
}


.encounter {
	background-color:lightgrey;
	padding:20px;	
}

.encounter-content {
	display:flex;
	flex-direction:row;
}

.encounter-name {
	font-size:40px;
	font-weight:bold;
	margin-bottom:20px;
}

.encounter-img {
	font-size:40px;
	font-weight:bold;
	width:33.333%;
	padding-top:33.333%;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}

.encounter-message {
	width:66.6666%;
}

#page-header {
	display:flex;
}

.header-menus {
	width:80%;
	padding:5px;
	background-color:#6cd76c;
}

.header-menus .menus ul,
.header-menus .menus-list-item {
	list-style-type:none;
	margin:0;
	padding:0;
}

.header-menus .menus ul {
	display:flex;
	flex-direction:row;
}

.header-menus .menus-list-item {
	width:33.3333%;
	text-transform:uppercase;
	font-weight:bold;
	background-color:#489948;
}

.header-menus .menus-list-item:not(:first-of-type) {
	margin-left:2px;
}

.header-menus .menus-list-item:not(:last-of-type) {
	margin-right:2px;
}

.header-menus .menus-list-item:hover {
	background-color:lightgreen;
}

.header-menus .menus-list-item a {
	display:block;
	text-decoration:none;
	color:white;
	text-align:center;
	line-height:50px;
	font-size:20px;
	padding:10px 20px;
}

.item-quantity {
	text-align:right;
	color:white;
	font-weight:bold;
	font-size:40px;
}

.item-quantity::before {
	content:"x";
}

.item-img {
	background-size:contain;
}

.header-items {
	width:20%;
	background-color:lightblue;
	padding:5px;
}

.header-items .items-list {
	justify-content:end;
}

.header-items .item-card {
	display:flex;
}

.header-items .item-quantity {
	margin:0 5px;
	line-height:40px;
	font-size:25px;
}

.header-items .item-quantity::before {
	content:"";
}

.header-items .item-name {
	display:none;
}

.header-items .item-img {
	width:40px;
	padding-top:40px;
}

.header-items .items-list .items-list-item {
	width:auto;
}

main {
	padding:30px 30px 500px 30px;
	height:calc(100vh - 82px);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	box-sizing: border-box;
	overflow:auto;
}

header .window {
	height:72px;
}

main .window {
    text-align: center;
    background-color: #9a98c1c2;
    padding: 20px;
    border: 3px solid #595785c4;
    border-radius: 10px;
	color: #434178;
}

.button {
    background-color: #434178;
    color: white;
    padding: 5px 20px;
    text-transform: uppercase;
    border-radius: 5px;
    border: 3px solid #605da5;
    cursor: pointer;
}

.button:hover {
    background-color: #605da5;
}


@media (max-width:2500px) {

	.cards-list-item {
		width: 11.5%;
	}
}

@media (max-width:2000px) {

	.cards-list-item {
		width: 15.6666%;
	}
}

@media (max-width:1400px) {

	.cards-list-item {
		width: 19%;
	}

	.card-name {
		font-size: 18px;
	}

	.header-menus .menus-list-item a {
		font-size:16px;
	}
}

@media (max-width:900px) {

	.cards-list-item {
		width: 32.3333%;
	}
}

@media (max-width:700px) {

	.cards-list-item {
		width: 49%;
	}

	.header-menus .menu ul {
		flex-direction:column;
	}

	.header-menus .menus-list-item {
		width:100%;
		border-left:none;
		border-right:none;
	}
	
	.header-menus .menus-list-item:not(:last-of-type) {
		border-bottom:4px solid white;
	}
}

@media (max-width:300px) {

	.cards-list-item {
		width: 99%;
	}
}