body {
	background-color:#15181e;
	color:#dcdcdc;
	margin: 0;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr; 
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    height: 100vh;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background: white;
    overflow: hidden; 
}

.top-panel {
    grid-column: 1 / -1;
    background-color: black;
    padding: 20px;
    color: white;
}

.top-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.top-center h1 {
	margin: 0;
}

.bottom-left, .bottom-right {
    background-color: black;
    overflow-y: auto;
    padding: 20px;
    color: white;
    scrollbar-width: thin;
}

.bottom-left p, .bottom-right p { margin-bottom: 20px; }

h1 {
	color:#f0058a;
}

h2 {
	color:#920ef0;
}

h3 {
	color:#527ac6;
}

pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.open-sans-m {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 440;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/*
orange
	f07b05 f0a605
blue
	00c3ff 0077ff
*/

a:link    { color:#63acff; }
a:hover   { color:#abd2ff; }
a:visited { color:#0055ff; }
a:active  { color:#ffffff; }

.Rogue             .link-icon { background-image: url('i/Rogue-Stand.png'); }
.Rogue:hover       .link-icon { background-image: url('i/Rogue-Attack.png'); }
.Archer            .link-icon { background-image: url('i/Archer-Stand.png'); }
.Archer:hover      .link-icon { background-image: url('i/Archer-Attack.png'); }
.Wizard            .link-icon { background-image: url('i/Wizard-Stand.png'); }
.Wizard:hover      .link-icon { background-image: url('i/Wizard-Attack.png'); }
.Priest            .link-icon { background-image: url('i/Priest-Stand.png'); }
.Priest:hover      .link-icon { background-image: url('i/Priest-Attack.png'); }
.Samurai           .link-icon { background-image: url('i/Samurai-Stand.png'); }
.Samurai:hover     .link-icon { background-image: url('i/Samurai-Attack.png'); }
.Bard              .link-icon { background-image: url('i/Bard-Stand.png'); }
.Bard:hover        .link-icon { background-image: url('i/Bard-Attack.png'); }
.Warrior           .link-icon { background-image: url('i/Warrior-Stand.png'); }
.Warrior:hover     .link-icon { background-image: url('i/Warrior-Attack.png'); }
.Knight            .link-icon { background-image: url('i/Knight-Stand.png'); }
.Knight:hover      .link-icon { background-image: url('i/Knight-Attack.png'); }
.Paladin           .link-icon { background-image: url('i/Paladin-Stand.png'); }
.Paladin:hover     .link-icon { background-image: url('i/Paladin-Attack.png'); }
.Assassin          .link-icon { background-image: url('i/Assassin-Stand.png'); }
.Assassin:hover    .link-icon { background-image: url('i/Assassin-Attack.png'); }
.Necromancer       .link-icon { background-image: url('i/Necromancer-Stand.png'); }
.Necromancer:hover .link-icon { background-image: url('i/Necromancer-Attack.png'); }
.Huntress          .link-icon { background-image: url('i/Huntress-Stand.png'); }
.Huntress:hover    .link-icon { background-image: url('i/Huntress-Attack.png'); }
.Mystic            .link-icon { background-image: url('i/Mystic-Stand.png'); }
.Mystic:hover      .link-icon { background-image: url('i/Mystic-Attack.png'); }
.Trickster         .link-icon { background-image: url('i/Trickster-Stand.png'); }
.Trickster:hover   .link-icon { background-image: url('i/Trickster-Attack.png'); }
.Sorcerer          .link-icon { background-image: url('i/Sorcerer-Stand.png'); }
.Sorcerer:hover    .link-icon { background-image: url('i/Sorcerer-Attack.png'); }
.Ninja             .link-icon { background-image: url('i/Ninja-Stand.png'); }
.Ninja:hover       .link-icon { background-image: url('i/Ninja-Attack.png'); }
.Summoner          .link-icon { background-image: url('i/Summoner-Stand.png'); }
.Summoner:hover    .link-icon { background-image: url('i/Summoner-Attack.png'); }
.Kensei            .link-icon { background-image: url('i/Kensei-Stand.png'); }
.Kensei:hover      .link-icon { background-image: url('i/Kensei-Attack.png'); }
.Druid             .link-icon { background-image: url('i/Druid-Stand.png'); }
.Druid:hover       .link-icon { background-image: url('i/Druid-Attack.png'); }

.Blizard.link-icon { 
	background-image: url('i/Blizard.png');
	width: 102px;
	height: 126px;
}

.teemo_sketch.link-icon {
	background-image: url('i/teemo_sketch.png');
	height: 1em;
	image-rendering: smooth;
}

.link-item {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 8px 0;
}

.link-icon {
	display: inline-block;
	width: 66px;
	height: 34px;
	/*positioning*/
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
	/*fix scaling*/
	image-rendering: pixelated;
}

.side-panel {
        position: absolute;
        right: 100%;
        margin-right: 15px;
        background: transparent;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        border-radius: 8px;
        padding: 10px;

        /* Crucial: prevents the side panel from defaulting to 0 width
           and forces it to expand to fit the images */
        width: max-content;

        top: 50%;                               /* Move the top edge to the 50% mark of the parent */
        transform: translateY(-50%); /* Pull itself back up by half its own height */
}