@chaset "UTF-8";
/*FONT*/
@font-face {
    font-family: "Shippori";
    src: url('../font/Shippori.otf') format('opentype');
}
@font-face {
    font-family: "Vollkorn";
    src: url('../font/Vollkorn.ttf') format('truetype');
}
/*CUSTUM*/
:root {
    --color-font: #212121;
    --serif-font: "Vollkorn","Shippori", serif;
    --style-border: solid 1px var(--color-font);
    --s-font: 1.0rem;
    --m-font: 1.3rem;
    --l-font: 2.0rem;
    --xs-margin: 5px;
    --s-margin: 10px;
    --m-margin: 25px;
    --l-margin: 50px;
    --xl-margin: 100px;
}
/*ALLGEMEINE*/
html {
    font-size: 62.5%;
}
body {
    background-image: url('bg_index.jpg');
    background-size: 70% auto;
    color: var(--color-font);
    font-family: var(--serif-font);
    font-size: var(--m-font);
    line-break: strict;
    line-height: 1.8;
    overflow-wrap : break-word;
    text-align: left;
    -webkit-text-size-adjust: 100%;
}
div {
    background-color: #fff;
    border: var(--style-border);
    margin: var(--m-margin) auto;
    padding: var(--m-margin);
    text-align: center;
    width: 50%;
}
h1 {
    font-size: var(--l-font);
    font-weight: normal;
    margin: 0 auto;
    text-align: center;
   -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
p {
    font-size: var(--m-font);
    margin: var(--xl-margin) 0;
}
a {
    color: var(--color-font);
    text-decoration: none; 
}
/*HANDY*/
@media screen and (max-width: 600px) {
    p {
    font-size: var(--s-font);
    margin: var(--l-margin) 0;
    }
}