@chaset "UTF-8";
@font-face {
    font-family: "Shippori";
    src: url('../font/Shippori.otf') format('opentype');
}
@font-face {
    font-family: "ShipporiB1";
    src: url('../font/ShipporiB1.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-attachment: fixed;
    background-image: url('bg_top.jpg');
    background-size: 60% 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);
    width: 70%;
}
h1 {
    font-size: var(--l-font);
    font-weight: normal;
    margin: var(--m-margin) auto;
    text-align: center;
}
p {
    font-size: var(--l-font);
}
p a {
    color: var(--color-font);
    text-decoration: none; 
}
a {
    color: var(--color-font);
}
input, #enterYZ1, #deleteYZ1 {
    display: inline;
    width: 70px;   
}
li {
    display: inline-block;
    margin-right: var(--xs-margin);
}
/*HANDY*/
@media screen and (max-width: 600px) {
    h1 {
    margin: var(--s-margin) auto;
    }
    p {
    font-size: var(--m-font);
    }
}