body { background: antiquewhite; font: 1em sans-serif; color: black; padding: 1em;
  max-width: 60em; 
 }
.jump { display: none }
.pim img { float: left; width: auto;max-width:100%; margin:0
  margin-right: 1em; margin-bottom: 1em
 }

p { line-height: 1.5 }
img { max-width: 100%; display: block; margin: auto }
a { color: blue }
.cur { background: black; color: antiquewhite }
a:hover {opacity: .7}
nav li { padding: .1em; font-size: .9em; margin-bottom:.2em; list-style-type: none }
nav { max-width: 10em; position: absolute; top: 1em; left: 1em; padding-bottom:1em }
nav ul { margin: 0; padding: 0;}
nav a { padding: .2em; color: black }
article { margin-left: 11em }
article ul { margin:0; padding: 0; padding-left: 1em}
article ul li { margin-bottom: .3em }
footer { clear: both; padding-top: 2em; margin-left: 12em }
#medal { max-width: 33%; float: right; margin-left:1em; margin-bottom:1em; border-left: 1px solid black; border-top: 1px solid black; padding:.5em }
#medal * { font-size: .9em; margin:.3em; }
#medal p { font-size: .8em }
#medal li { list-style-type: disc; text-align: left;}
#medal ul { margin:0; padding: 0; padding-left: 1em; }
article img { float: left; max-width:75% }
article img { max-width: 50%; margin-right: 1em; margin-top: .5em }
#medal img { float: none; max-width: 100% }
.caution { background: black; color: antiquewhite; padding: .5em; border: 3px dotted antiquewhite; font-size:.9em; font-weight: bold; text-align: center }
nav a:hover { background: lightskyblue; color: #181818 }
.cur:hover { background: #181818; color: lightskyblue }
a:active { opacity: 1; background: yellow}
#openblade pre { color: black; font-size: 1.1em }
pre {overflow: hidden }

table {
 padding:1em;
 border: 1px solid #bbb;
}

td { border: 1px solid #bbb; padding: .3em; text-align: center }

@keyframes ob {
        0% { height: 0; }
        100% { height: 24em; }
}

@keyframes blink {
        0% { opacity: 0; }
        50% {opacity: 1; }
        100% { opacity: 0}
}

@keyframes animation {
        0% { opacity: 0; }
        100% { opacity: 1; }
}

article {
  animation: animation linear .3s;
}

#openblade {
        animation: linear ob 1s;
        overflow: hidden;
}

#openblade span {
  animation: blink linear .5s infinite;
}


@media only screen and (max-width: 640px) {

#medal { float: none; width: 100%; max-width: 100%; margin: auto; padding: 0 }
#medal img { margin: auto }
nav { float: none; width: 100%; max-width: 100%; position: relative; margin: auto; top:0; left: 0 }
article { max-width: 100%; margin: auto }
.jump { display: block }
nav li { display: inline; padding:.3em }
article img { max-width: 100%; margin-right: 0 }
.pim img { margin: auto; float: none; }

}