html, body {
    font-family: sans-serif;
    font-size: 20px;
}

h1, h2 {
    font-family: serif;
    font-style: italic;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

h1 {
    font-weight: normal;
    font-size: 1.6rem;
}

h1 .fn, h1 .nickname {
    font-weight: bold;
}

h2 {
    font-size: 1.3rem;
}

a {
    text-decoration: none;
    color: #000;
}

p, ul {
    margin-top: 0.5rem;
    line-height: 1.5rem;
    padding-left: 3vw;
}

ul {
    list-style: none;
}

address {
    font-style: normal;
}

.photos img {
    width: 75px;
    height: 75px;
}

@media not print {
    body {
        padding-top: 1rem;        
    }
    
    a, a:hover {
        border-bottom: 1px dotted #333;
    }

    .lang {
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 20px;
        background: right center no-repeat;
    }

    #english {
        background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%20width%3D%2220%22%20height%3D%2215%22%3E%3CclipPath%20id%3D%22t%22%3E%3Cpath%20d%3D%22M30%2C15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%22%2F%3E%3C%2FclipPath%3E%3Cpath%20d%3D%22M0%2C0%20v30%20h60%20v-30%20z%22%20fill%3D%22%2300247d%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%22%20clip-path%3D%22url(%23t)%22%20stroke%3D%22%23cf142b%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M30%2C0%20v30%20M0%2C15%20h60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%2F%3E%3Cpath%20d%3D%22M30%2C0%20v30%20M0%2C15%20h60%22%20stroke%3D%22%23cf142b%22%20stroke-width%3D%226%22%2F%3E%3C%2Fsvg%3E");
    }

    #russian {
        background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209%206%22%20width%3D%2220%22%20height%3D%2215%22%3E%3Crect%20fill%3D%22%23fff%22%20width%3D%229%22%20height%3D%223%22%2F%3E%3Crect%20fill%3D%22%23d52b1e%22%20y%3D%223%22%20width%3D%229%22%20height%3D%223%22%2F%3E%3Crect%20fill%3D%22%230039a6%22%20y%3D%222%22%20width%3D%229%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E");
    }
}

@media handheld, screen and (max-width: 39.99rem) {
    body {
        margin: 0.5rem;
    }

    h1, h2, .photo, .photos {
        text-align: center;
    }

    .photo {
        margin: 0;
        padding: 0;
    }

    .photo img {
        max-width: 90vw;
        max-height: 90vh;
    }

    p, ul {
        padding-left: 0.5rem;
    }

    ul#xfn li {
        display: inline;
    }

    ul#xfn li:after {
        content: ', '
    }

    ul#xfn li:last-child:after {
        content: ''
    }
}

@media screen and (min-width: 40rem) {
    * {
        padding: 0;
        margin: 0;
    }

    body {
        margin-left: 40%;
    }

    .photo img {
        position: fixed;
        right: 63%;
        top: 30px;
        max-width: 37vw;
        max-height: 90vh;
    }

    ul#xfn li {
        display: inline;
        margin: 0 0.5rem 0 0;
    }

    ul#xfn li:nth-child(2n) {
        opacity: .7;
    }
}

@media print {
    body {
        margin: 1rem auto;
        padding-top: 0.1rem;       
        max-width: 50rem;
        position: relative;
    }

    .photo img {
        position: absolute;
        top: 0;
        right: 0;
        width: 2in;
    }

    .lang {
        display: none;
    }

    a[href^="/"]:after {
        content: ': https://arty.name' attr(href);
    }

    a[href^="//"]:after {
        content: ': http:' attr(href);
    }

    a[href^=http]:after {
        content: ': ' attr(href);
    }
}