@font-face {
    font-family: 'MK3';
    src:url('fonts/MortalKombat3-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Mkcommand';
    src:url('fonts/MKontrols.otf') format('opentype');
    font-display: swap;
}


body    { background:black; color:white; font-family:"MK3", serif; margin:0; font-size:3.8vw; }
wrapper { display:block;padding: 0; margin:1em 0 0 0; border-top:1px solid red; }
menu    { padding:0; margin:0; }
header  { text-align:center; }

h1,h2,h3,h4 { padding:0; margin:0; text-transform:uppercase;  font-style:italic; }
h1          { margin:1em 0 .5em 0; text-shadow:1px 0 1vw #A7A7A7; font-size:1.8em; }
h2          { display:none; margin:0 0 .5em 0; vertical-align:middle; color:red; }
h3          { font-size:1.8em; color:rgb(255, 255, 255); }
h4          { font-size:1.6em; color: rgb(243, 212, 13); margin-top:1em; }

ul          { margin:0; padding:0; list-style-type:none; }
li          { margin:0; padding:0 }

table           { width:100%; }
tr              { padding: 0 2px 0 2px; }
tr:hover td     { background:rgba(70, 70, 70, 0.3); color:white; }
th              { text-align:left; color:rgb(184, 0, 0); padding:1.5em 0 .2em 0; font-size:1.5em; }
td              { color:rgb(168, 168, 168); }
td:first-child  { color:rgb(75, 75, 75); vertical-align:middle; padding-left:.2em; }

.f td                   { color:white; }
.f td:first-child       { color:rgb(130, 130, 130); }
.f:hover td:first-child { color:white; }

a       { color:white; background:red; text-decoration:none; padding: 1px 3px 1px 3px; border-radius:3px; }
a:hover { color:red; background:white; }



#choice {
    text-align:center;
    margin: 0 auto;
}
#choice a {
    display:inline-block;outline:0;
    padding:1px;
    color:black;
    background:none;
}
#choice a:hover {
    color:yellow;
    opacity: 1;
}


.portrait {
    width:18vw;
    height:21vw;
    border:2px solid;
    border-radius:5px;
    image-rendering:pixelated;
    /* image-rendering: crisp-edges; */
}
.fighter {
    display:none;
    overflow:auto;
    position:fixed; top:0;left:0;
    padding:2em;
    height:100%; width:100%;
    box-sizing: border-box;
    background:rgba(0, 0, 0, 0.92);
    border-right:1px solid red;
}
.sprite {
    transform: scaleX(-1);
    height:175px;
    position:absolute; top:2vw; right:2vw;
    z-index:-1;
    image-rendering:pixelated;
}
button.close {
    position:absolute; top:1vw; right:1vw;
    font-weight:bold; font-size:4vw;
    padding:.4vw 1.4vw .4vw 1.4vw;
    border: .2em solid; border-radius:5vw;
    cursor:pointer;
    background:transparent; color:red; border-color:red;
}

.fighter i { position:relative; top:-2px; color:rgb(110, 84, 76); font-size:.9em; }
.fighter p, #morphs p { display:inline-block; margin:0; padding:0; }
.fighter p, #morphs p { color:rgb(255, 145, 0); }
.fighter p::first-letter, #morphs p::first-letter,
h        { color:rgb(255, 219, 77); }
c        { font-family:"MKcommand";font-size:1.2em; position:relative;top:-1px;}
t        { font-family:"MK3", serif; font-size:.7em; }
r:before { content:"r"; color:rgb(255, 219, 77); margin-left:.2em;}

tap {
    animation-name:tap;
    animation-duration:.2s;
    animation-timing-function:steps(2, end);
    animation-iteration-count:Infinite;
    padding:1px 2px 1px 2px; border-radius:3px;
}
@keyframes tap { 0% {visibility:hidden;} 50%{opacity:100%;} }

#infoMorph { color:rgb(156, 156, 156); text-indent:.2em; font-size:.9em; }
#infoMorph span { display:none; }
m { font-size:1.1em; background:white; color:black; padding: 1px 3px 1px 3px; border-radius:5px; }
#morphs {
    display:none;
    overflow:auto;
    position:fixed; top:0; left:0;
    padding:2em;
    height:100%; width:100%;
    box-sizing: border-box;
    background:rgba(0, 0, 0, 0.9);
    border-right:1px solid rgb(243, 212, 13);
    z-index: 100;
    
}
#morphs table th {
    margin:2em 0 0 0;
    color:rgb(139, 78, 43);
    text-transform:uppercase;
    font-size: .8em;
}
#morphs table tr td { font-family:"MKcommand"; width:55% }
#morphs table tr td:first-child { width:45%; font-family:"MK3"; font-size:.9em; }
#morphs  button { background:black; color:rgb(243, 212, 13); border-color:rgb(243, 212, 13); }



@media only screen and (min-width: 500px){
    body { font-size:1em; }
    wrapper { max-width:550px; min-width:360px; float:left; }
    h1  { margin:.5em 0 0 0; text-shadow:1px 0 1vw #A7A7A7; font-size:2em; }
    h2 { display:block; }
    button.close { font-size:1em; padding:.1em .3em .1em .3em; }
    #choice { max-width:700px; } 
    #choice a {opacity:.7;}
    .portrait { width:88px; height:100px; }
    .fighter, #morphs { max-width:550px; }
    #infoMorph span { display:inline; }
}