html {
    background-color: #616abc;
    font-family: "DM Sans", sans-serif;
}

body {
    text-align: center;
    color: #616abc;
    width: 80%;
    max-width: 20cm;
    margin: auto;
}

#title {
    display: grid;
    place-items: center;
    background-color: #90ff90;
    font-family: "Instrument Serif", serif;
    font-size: 40pt;
    color: black;
    text-decoration: black 3px double underline;
    border-radius: 15px;
    border: black 2px solid;
    margin: 6px 10px 6px 10px;
    padding-bottom: 10px;
    box-shadow: black 4px 3px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}
#title:hover {
    transform: scale(1.01);

    box-shadow: black 6px 5px;
}
a.title:any-link {
    font-family: "Instrument Serif", serif;
    font-size: 40pt;
    color: black;
    text-decoration: black 3px double underline;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

div.banner {
    display: flex;
    width: 100%;
    border: black 2px solid;
    font-size: smaller;
    box-shadow: black 4px 3px;
    background-color: #ff8abc;
    color: white;
    align-content: center;
    justify-content: center;
}
a.selecter:any-link {
    background-color: #ff8abc;
    
    color: white;
    font-family: "DM Sans";
    font-style: normal;
    font-size: normal;
    font-weight: 700;
    
    max-width: 18%;
    width: 115px;
    padding: 4px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.selecter:hover {
    transform: scale(1.1);
    text-shadow: #0003 1px 2px;
    outline: black 2px solid;
    box-shadow: black 4px 5px;
}

.textbox {
    text-align: justify;
    padding: 10px;
    background-color: white;
    margin: 6px 10px 6px 10px;
    border: black 2px solid;
    box-shadow: black 4px 3px;
}
.monobox {
    text-align: justify;
    font-family: "DM mono", monospace;
    padding: 10px;
    background-color: white;
    margin: 6px 10px 6px 10px;
    border: black 2px solid;
    box-shadow: black 4px 3px;
}

.monolist {
    list-style-type: decimal-leading-zero;
    padding-left: 50px;
    font-family: "DM Mono";
    font-variant-numeric: oldstyle-nums;
}

a {
    font-family: Georgia, serif;
    font-variant-numeric: lining-nums;
    font-style: italic;
    color: #ff8abc;
    margin: 5px;
}
a.special {
    font-family: Georgia, serif;
    font-variant-numeric: lining-nums;
    color: #ff8abc;
    text-shadow: #ff8abd 0.5px 0.5px 2px;
    margin: 5px;
}

a:hover {
    color: #f55bad;
}
a:active {
    color: white;
}
a:visited {
    color: #cb85ab;
}

span {
    background-color: #90ff90;
    color: black;
}

#DMSANS {
    color: black;
    font-family: "DM Sans";
}
#DMMONO {
    color: black;
    font-family: "DM Mono";
}
#INSTR {
    color: black;
    font-family: "Instrument Serif";
}
#GEORG {
    color: black;
    font-family: Georgia;
}

iframe {
    border: none;
}
iframe.vert {
    aspect-ratio: 9/16;
}
iframe.hori {
    aspect-ratio: 16/9;
}