/* GENERAL */
:root {--m: 24px; --s: 18px}
::selection {color: white; background-color: blue}
::-webkit-scrollbar {display: none}
*{margin: 0; font-size: var(--s)}
html{max-width: calc(100vw)}
body{
    text-rendering: optimizeSpeed;
    margin: var(--s);
    overflow-x: hidden;
    position: relative;
    min-height: calc(100vh - (var(--s)*2));
    -ms-overflow-style: none;
    scrollbar-width: none;
}
footer{
    padding-bottom: calc(var(--s));
    width: calc(100% - var(--s));
    position: absolute;
    bottom: 0;
    height: 10px;
}
main{padding-bottom: 80px}
footer p, footer a{font-size: var(--s)}
ul{padding-inline-start: var(--m)}
h1{font-size: var(--m);}
li{list-style-type: none; padding-bottom: 3px}
li:before{margin-left: -20px; margin-right: 3px}
li a{font-size: var(--m); font-weight: bold; cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: center}
li a:hover{text-decoration: underline}
li p{padding-top: 10px; max-width: 800px}
sup{font-size: calc(var(--s) - 6px)}
sup a{font-size: calc(var(--s) - 6px)}

.lft:before { content: '\2192'}
.rgt:before { content: '\2190'}
.margin{margin-left: var(--s)}
.plus{color: blue; font-weight: bold; cursor: pointer}
.gallery{display: flex;overflow: scroll}
.gallery img{width: 500px; height: max-content; height: intrinsic; padding-right: 10px}
.gallery video{width: 400px; height: max-content; height: intrinsic; padding-right: 10px}
#filters *{font-size: var(--s)}
#filters_label{font-size: var(--s)}
#emission{color: red; max-width: 500px; border: 1px red solid; background-color: white; padding: 10px; position: absolute; top: var(--s); right: var(--s); z-index: 100}
#emission_link{position: absolute; right: 0; z-index: 10}

#dinosaur06{width: 100px}
#g7458{width: 100px; right: 0vw;animation: run_inverse 15s linear 2s infinite}
#g7459{width: 180px; right: 0vw;animation: run 15s linear 2s infinite}

@keyframes run {
  from {right: 100vw;}
  to {right: 0vw}
}

@keyframes run_inverse {
  from {right: 0vw;}
  to {right: 100vw}
}

/* MEDIA QUERY */
@media only screen and (max-width: 900px) {
    :root {--m: 20px; --s: 16px}
    li{padding-bottom: 15px}
    .gallery {display: block}
    .gallery img{width: 100%}
    .gallery video{width: 100%}
    #dinosaur06{width: 50px}
    #dragon12{display: none}
    #g7458{width: 100px; right: 150px}
    #emission_link{position: relative; left: 0}
}