body {background-color:#4b959a; font-family: Arial, Helvetica, sans-serif;}
#character,#trade { background-color: #64bfc6;}
#myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
.myCharImage{ display: block; width: 600px; height: 400px; }
.myTradeImage{ display: block; width: 600px; height: 200px; object-fit: scale-down;}
.myCharImage_mobile{ display: block; width: 300px; height: 200px; }
.myTradeImage_mobile{ display: block; width: 300px; height: 100px; object-fit: scale-down;}
@media only screen and (max-width: 600px) {
    #myBubble{ position: absolute; background: #64bfc6; border: 1px solid #aaa; padding: .5rem 1rem; display: none; top: 1.5rem; left: 1.5rem; width: 17rem; }
}
@media only screen and (min-width: 600px) {
    #myBubble{ position: absolute; background: #64bfc6; border: 1px solid #aaa; padding: .5rem 1rem; display: none; top: 1.5rem; left: 1.5rem; width: 30rem; }
}
#myBubble.shown{ display: block; }
#myBubble img{ display: block; width: 100%; }
#myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem; background: #eee; line-height: 1; cursor: pointer; }
#myBubbleCloseButton:hover{ background: #000; color: #fff; }
#maladum{display: block; width: 250px; height: 75px; object-fit: scale-down;}
#reference_links{font-size:12px; }
:link { color: #8fe7ed; }
:visited { color: #551A8B; }
:link:active, :visited:active { color: white; }