html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: #81633D;
    background: radial-gradient(at center top, #81633D, #060402);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    color: #CCCCCC;
    margin: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    user-select: none;
}

@media screen and (max-width: 600px) {
    body {
        font-size: 1em;
    }
}
@media screen and (max-width: 530px) {
    body {
        font-size: 0.6em;
    }
}

@media screen and (max-width: 325px) {
    body {
        font-size: 0.4em;
    }
}

.wrapper {
    margin: 10px auto;
    padding: 10px;
    display: flex;
    width: 95%;
    max-width: 1000px;
    border-radius: 5px;
	border: 2px solid #79583F;
	border-top-color: #3D2B22;
	-webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5) inset;
	background: #493A2C;
    flex-direction: column;
    align-items: center;
}

.brown {
    background: #371F13;
    background: radial-gradient(at center, #371F13, #231614);
}

.rare {
    background: #292F51;
    background: radial-gradient(at center, #292F51, #0E1321);
}

.epic {
    background: #31244A;
    background: radial-gradient(at center, #31244A, #0E0A14);
}

.legendary {
    background: #5A3F21;
    background: radial-gradient(at center, #5A3F21, #1E140B);
}

.ancient {
    background: #801518;
    background: radial-gradient(at center, #801518, #3C0E0E);
}

.mythic {
    background: #7A749B;
    background: radial-gradient(at center, #7A749B, #332C47);
}