/* Git Version 0.1 */
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Lexend:wght@100..900&display=swap');

body {
	 font-family: "Lexend", sans-serif;
	 background: rgb(40,40,60);
	 color: rgb(240,240,255);
	 font-size: 16px;
	 line-height: 1.4;
}

section#header {
	text-align: center;
}

section#header h1 {
	font-size: 350%;
}
section#header img {
	margin: 0 15px;
	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.8);
}

h1,h2,h3,h4,h5,h6 {
	font-family: "DynaPuff", system-ui;
}

div#container {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
}

img.pin {
	border-radius: 225px;
	border: 4px solid white;
}

img.common { border-color: #CCCCCC; }
img.uncommon { border-color: #FFB9AB; }
img.rare { border-color: #CEFFAB; }
img.superRare { border-color: #ABD2FF; }
img.legendary { border-color: #FFFFAB; }
img.epic { border-color: #EBABFF; }

span.common { color: #CCCCCC; }
span.uncommon { color: #FFB9AB; }
span.rare { color: #CEFFAB; }
span.superRare { color: #ABD2FF; }
span.legendary { color: #FFFFAB; }
span.epic { color: #EBABFF; }

div.pinInfo {
	display: inline-block;
	border: 1px solid rgb(100, 100, 125);
	text-align: center;
	padding: 10px;
	margin: 5px ;
	border-radius: 15px;
	/*width: 200px;*/
}
div.pinInfo p {
	font-size: 80%;
}

div.pinInfo img.pin {
	width: 155px;
}

code {
	font-size: 90%;
	font-style: italic;
	border-radius: 4px;
	padding: 2px 4px;
	border: 1px solid rgb(156, 156, 203);
	background-color: rgb(52, 52, 62);
}

table.commandTable {
	border-collapse: collapse;
	width: 100%;
	margin: 20px 0;
	border:1px solid rgb(156, 156, 203);
}

table.commandTable th, table.commandTable td {
	border: 1px solid rgb(156, 156, 203);
	padding: 8px;
	text-align: left;
}
th {
	background-color: rgb(21, 21, 42);
}
tr:nth-child(even) {
	background-color: rgb(29, 29, 44);
}	

tr:nth-child(odd) {
	background-color: rgb(42, 42, 52);
}

        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            vertical-align: top;
        }
        th {
            background-color: #48484f;
            text-align: left;
        }
        tr img {
            height: 75px;
        }
        table.pinTable tr:nth-child(even){background-color: #1b1b24;}
        
        table.pinTable tr > th:first-child, table.pinTable tr > td:first-child {
            text-align: center;
            width: 95px;
        }

        table.pinTable tr > td:nth-child(2) {
            width: 80px;
            text-align: center;
        }

        table.pinsTable {
            width: 100%;
            border-collapse: collapse;
        }
        table.pinsTable tr > td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
            width: 16.66%;
        }

        img.uncollected {
            filter: grayscale(100%);
            opacity: 0.5;
        }