body {
  background: antiquewhite;
  color: black;
  padding:0;
  margin:0;
}

a { color: black }
a:hover { opacity: .65 }

img { max-width: 100%; display: block; margin: auto }

.jump {display: none}
#cont img { max-width: 33%; float: left; margin-bottom:1em; }
#medal img { max-width: 100%; float: none;margin:0; margin-bottom:.5em; }
#medal ul { padding: 0; list-style-type: none }
.caution { background: black; color: antiquewhite; border: 2px dotted antiquewhite; padding:1em; text-align: center; font-weight: bold }

.icon {
  display: block;
  margin: auto;
}

nav {
  padding:.5em;
  text-align: center;
}

nav ul { margin: 0; padding: 0 }

nav li {
  list-style-type: none;
  display: inline;
  margin-left:.3em;
  margin-right: .3em;
}

footer {
  max-width: 28em;
  margin: auto;
  clear: both;
}

.list { 
  text-align: center;
}

.list a {
  margin-right: .3em;
  margin-left: .3em;
}

#cont { 
  max-width: 40em;
  padding: 1em;
  margin:auto;
}

#cont p { line-height: 1.5 }


#medal {
  max-width: 12em;
  float: right;
  margin-right:1em;
  margin-left: 1em;
  margin-bottom: 1em;
  border-top:1px black solid;
  border-left:1px black solid;
  padding:.5em;
}

#medal * {
  font-size: 1em;
  margin-bottom:0;
  margin-top:0;
}

#medal hr { margin-top:.2em; margin-bottom: .2em}

.cur {
  font-weight: bold;
}

@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; max-width: 95%; margin: auto; text-align: center}
#medal img { margin: auto; margin-bottom: .5em }
.jump { display: block }
}