body {
    margin: 5px;
    padding: 0;
}

.site {
    min-width: 480px;
    font-size: 85%;
    line-height: 1.5;
}

@media only screen and (min-width: 1024px) {
    .site {
        max-width: 1200px;
    }
}

.round {
    border-radius: 5px;
}

.background {
    --background-image: url(../images/amir.ch/header-earth-big-black-blur.jpg), url(data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAKACkDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYIAgf/xAAqEAACAQIFAQcFAAAAAAAAAAABAgMEEQAFBhIhBwgTFEFRcZEiMTKBof/EABYBAQEBAAAAAAAAAAAAAAAAAAUDBv/EACMRAAEEAQIHAQAAAAAAAAAAAAEAAgQRAxITBRQVISMxYdH/2gAMAwEAAhEDEQA/AF3SPSLRubukdYhQOdokE5iF/IXJtfBHWvZ20vk+W+PFdmtOjNtULKjn4Yc/o4632c6enmlrFlgikGwGzICL4M6zJOXVqEnaKggL5Abb2xZjvMGkdkcS7YLgTakjOOijxUb1mW6lgdF57upgKsB63QkfzCXmXT3VdGHaPLTXxoLl6JxLYepUfUPjFJV0cfiYl2LZlNxb78YW613grKV4GaJu9IuhsbcccYdHC8GRt+igetScTwDRH0fimiaOSGVopo3jkX8kdSrD3B5xnFNdSaKirNEV1VV0lPUVEanZLLGGdfYnkYmjAkmNsP03a0kSTzGPXVL/2Q==);
    --background-size: 1024px 248px;
}

div.header {
    height: 100px;
    margin-bottom: 0px;
}

div.header-background {
  position: relative;
  background-color: unset;
  overflow: hidden;
}

div.header-background:before {
    content: "";
    position:absolute;
    z-index:-1;
    top: -148px;
    left: -70px;
    width: 1500px;
    height: 248px;

    background: var(--background-image);
    background-size: var(--background-size);
    background-repeat: no-repeat;
    background-color: #111;

    animation: img-fade-in 3s ease, header-up-down 180s ease-in-out;
}

@keyframes header-up-down {
    10% { top: -148px; left: -70px; }
    15% { top: -148px; left: -70px; }
    20% { top:  -90px; left: -30px; }
    25% { top:  -90px; left: -30px; }
    30% { top: -120px; left:   0px; }
    35% { top: -120px; left:   0px; }
    40% { top: -148px; left: -70px; }
}

@keyframes header-up-down-scale {
    5% { top: -148px; left: -70px; transform: scale(1.0); }
    10% { top: -148px; left: -70px; transform: scale(1.0); }
    20% { top:  -90px; left: -30px; transform: scale(1.4); }
    25% { top:  -90px; left: -30px; transform: scale(1.4); }
    30% { top: -120px; left:   0px; transform: scale(1.3); }
    35% { top: -120px; left:   0px; transform: scale(1.3); }
    40% { top: -148px; left: -70px; transform: scale(1.0); }
}

.header h1 {
    color: #000;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    text-shadow: 2px 2px 5px #ffffff, 0px 0px 2px #ffffff;
}

.header h1 a {
    color: #000000;
    text-decoration: none;
}

.header h1 a:hover {
    color: #000000;
    text-decoration: none;
}

.header h2 {
    color: #000;
    text-align: center;
    margin: 0;
    font-size: 14px;
    font-weight: medium;
    line-height: 1.125;
    text-shadow: 2px 2px 5px #fff, 0px 0px 2px #fff;
}

.header img.index-icon {
    margin-top: -0.5em;
}

div.footer-background {
  position: relative;
  background-color: unset;
  overflow: hidden;
}

div.footer-background:before {
    content: "";
    position:absolute;
    z-index:-1;
    left: 80%;
    top:-100%;
    width: 1500px;
    height: 248px;
    margin-top: 30px;
    margin-left:-996px;

    background: var(--background-image);
    background-size: var(--background-size);
    background-repeat: no-repeat;
    background-color: #111;

    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

.footer {
    padding: 0.5em;
}

.footer span {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 3px #000, 0px 0px 2px #000;
}

.post-body ul {
    list-style: none;
}

.post-body ul > li:before{
  content:"";
  height:1em;
  width:1em;
  display:block;
  float:left;
  margin-left:-1.5em;

  background-position:center;
  background-size:100%;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='90%' height='90%' viewBox='-0.5 -0.5 14 14' preserveAspectRatio='xMidYMid meet'><circle r='2' cx='10' cy='10' fill='royalblue' stroke='royalblue'/></svg>");
}

a.menuroll-link {
    white-space: pre-wrap;
}

a.menuroll-link a.category-link a.posttitle-link a.post-perma-link {
    color: royalblue;
}