@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: normal;
    src:
    /* url('/static/fonts/Montserrat-Regular.woff')  format('woff'), */
    url('/static/fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: normal;
    src:
   /* url('/static/fonts/Montserrat-Italic.woff')  format('woff'),*/
    url('/static/fonts/Montserrat-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: bold;
    src:
   /* url('/static/fonts/Montserrat-Bold.woff')  format('woff'); */
    url('/static/fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: bold;
    src:
   /*  url('/static/fonts/Montserrat-BoldItalic.woff')  format('woff'); */
    url('/static/fonts/Montserrat-BoldItalic.ttf') format('truetype');
}

/* noto-sans-regular - latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: normal;
    src:
    url('/static/fonts/noto-sans-v9-latin-regular.woff') format('woff');
    /*    url('/static/fonts/noto-sans-v9-latin-regular.ttf') format('truetype'); */
}

/* noto-sans-italic - latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: normal;
    src:
    url('/static/fonts/noto-sans-v9-latin-italic.woff') format('woff');
    /*    url('/static/fonts/noto-sans-v9-latin-italic.ttf') format('truetype'); */
}

/* noto-sans-700 - latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: bold;
    src:
    url('/static/fonts/noto-sans-v9-latin-700.woff') format('woff');
    /*    url('/static/fonts/noto-sans-v9-latin-700.ttf') format('truetype'); */
}

/* noto-serif-regular - latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: normal;
    src:
    url('/static/fonts/noto-serif-v8-latin-regular.woff') format('woff');
    /*    url('/static/fonts/noto-serif-v8-latin-regular.ttf') format('truetype'); */
}

/* noto-serif-700 - latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: bold;
    src:
    url('/static/fonts/noto-serif-v8-latin-700.woff') format('woff');
    /*    url('/static/fonts/noto-serif-v8-latin-700.ttf') format('truetype'); */
}

/* noto-serif-italic - latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: normal;
    src:
    url('/static/fonts/noto-serif-v8-latin-italic.woff') format('woff');
    /*    url('/static/fonts/noto-serif-v8-latin-italic.ttf') format('truetype'); */
}


@font-face {
    font-family: 'Kite One';
    font-style: normal;
    font-weight: normal;
    src:
    url('/static/fonts/kite-one-v7-latin-regular.woff') format('woff');
    /*    url('/static/fonts/kite-one-v7-latin-regular.ttf') format('truetype'); */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    src:
    url('/static/fonts/roboto-v20-latin-regular.woff') format('woff');
    /*    url('/static/fonts/roboto-v20-latin-regular.ttf') format('truetype'); */
}

/* roboto-mono-regular - latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: normal;
    src:
    url('/static/fonts/roboto-mono-v7-latin-regular.woff') format('woff');
    /*    url('/static/fonts/roboto-mono-v7-latin-regular.ttf') format('truetype'); */
}

/* cantarell-regular - latin */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: normal;
    src:
    url('/static/fonts/cantarell-v9-latin-regular.woff') format('woff');
    /*    url('/static/fonts/cantarell-v9-latin-regular.ttf') format('truetype'); */
}

/* cantarell-700 - latin */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: bold;
    src:
    url('/static/fonts/cantarell-v9-latin-700.woff') format('woff'),
    url('/static/fonts/cantarell-v9-latin-700.ttf') format('truetype');
}

/* cantarell-italic - latin */
@font-face {
    font-family: 'Cantarell';
    font-style: italic;
    font-weight: normal;
    src:
    url('/static/fonts/cantarell-v9-latin-italic.woff') format('woff');
    /*    url('/static/fonts/cantarell-v9-latin-italic.ttf') format('truetype'); */
}

@font-face {
    font-family: 'Cantarell';
    font-style: italic;
    font-weight: bold;
    src:
    url('/static/fonts/Cantarell-BoldItalic.ttf') format('ttf'),
    url('/static/fonts/cantarell-v9-latin-italic.ttf') format('truetype');
}

* {
    box-sizing: border-box;
}

body {
/*    width: 100vw;  */
    font-family: 'Cantarell', sans-serif;  /* 'Noto Sans' */
    margin: 1em 0 0 0;
    padding: 0.0em;
    font-size: 100%;
    color: hsl(138, 80%, 90%);
    background-color: hsl(72 82% 10%);
    /*
     *   hsl(138, 80%, 7%)
     *    background-color: hsl(56, 100%, 6%);
     *    color: hsl(66, 100%, 92%);
     *    color: rgb(180, 240, 180);
     *    background-color: rgb(0, 0, 0);
     */
}

button {
    padding: 0.25em;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Noto Sans';
    text-align: center;
    margin: 1em 0em 0em 0em;
    font-weight: bold;
}

h1{font-size: 150%; margin-top: 2em;}
h2{font-size: 120%; margin-top: 1em;}
h3{font-size: 110%;}
h4{font-size: 105%;}
h5{font-size: 100%;}
h6{font-size: 100%;}


/*   'Kite One' 'Montserrat' */
figcaption {
    font-family: 'Montserrat', serif;
}

videoblock {
    max-width: 95vw;
    margin: 2.0vw;
    background-color: rgb(0,0,0);
    border: 1px solid rgb(180, 240, 180);
    border-radius: 4px;
    padding: 1.0vw;
}

figure {
    margin: 2.0vw;
    background-color: rgb(0,0,0);
    border: 1px solid rgb(180, 240, 180);
    border-radius: 4px;
    padding: 1.0vw;
}

figure.S {
    width: 30vw;
}

figure.M {
    width: 45vw;
}

figure.L {
    width: 95vw;
}

@media (max-width: 800px) {
    figure.S {
        width: 60vw;
    }

    figure.M {
        width: 95vw;
    }

    figure.L {
        width: 95vw;
    }
}


/*
 * div.kuvaboksi {
 *    border: 1px solid rgb(180, 240, 180);
 *    border-radius: 4px;
 *    font-size: 95%;
 *    margin: 0.5em;
 *    padding: 0.5em;
 *    max-width: 95vw;
 * }
 *
 * div.kuvagr {
 *    display: grid;
 *    grid-gap: 0em;
 *    grid-template-columns: auto;
 *    grid-template-rows: auto auto;
 * }
 */

div.oyho {
    font-family: 'Roboto', serif;
   font-style: italic;
    color: hsl(360, 100%, 73%);
    margin: 2em 0em 2em 0em;
}


div.hyppy {
    font-family: 'Montserrat', serif;
    font-size: 100%;
    margin: 1em 0em 1em 1vw;
    padding: 0em 0em 0em 0.5em;
    color: rgb(160, 220, 220);
    line-height: 1.25em;
    border-style: none none none solid;

}

div.shyppy {
    /*  font-family: 'Roboto', serif;  */
    border-style: solid;
    /*    border-color: rgb(180, 240, 180); */
    border-color: white;
    border-width: 1px;
    border-radius: 10px;
    font-size: 100%;
    padding: 1.0em;
    margin: 1.0em 0.0em 1.0em 0.0em;
    line-height: 1.25em;
    color: hsl(138, 80%, 90%);
    background-color: hsl(138, 80%, 7%);
}

div.pagesummary {
    line-height: 1.25em;
    margin: 0.5em;
}

div.pagesummary > p {
    font-weight: bold;
    /*    line-height: 1.25em;
     *    margin: 0.5em 0 0 0;
     *    text-indent: 0em;
     */
}

div.summary {
    font-weight: bold;
    margin-bottom: 2em;
}

div.summary > p {
    font-weight: bold;
}

hr {
    width: 25%;
    height: 1px;
    border-width: 1px;
    margin-left:auto;
    margin-right:auto;
    color: hsl(48, 80%, 90%);
    background-color: hsl(48, 80%, 90%);

/*    color: rgb(180, 240, 180);
    border-color: rgb(180, 240, 180); */
}


a {
    text-decoration: underline;
}

a.intro {
    text-decoration: none;
    color: rgb(180, 240, 180);
}


a:link {
    color: rgb(51, 153, 255);
}

a:visited {color: rgb(217, 179, 255)}


a.vahva {
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1.5em;
}

a.more {
    font-weight: bold;
    margin: 0em;
}
a.more:hover {
    color: rgb(198, 255, 26);
}

a.vaalea:link {color: white; }
a.vaalea:visited {color: #D9B2D9; }
a.vaalea:hover {color: aquamarine; }
a.vaalea:active {}

p {
    line-height: 1.3em;
    margin: 0.5em 0 0 0;
    text-indent: 0em;
}

p.kerronta {text-indent: 2em;}

p.p0 {
    margin-top: 1.5em;
    margin-left: 0em;
}
/*
  p.p0::first-line {
    font-weight: bold;
    font-style: italic;
}
*/

p.p1 {
    text-indent: 1em;
    margin-top: 0.5em;
    margin-left: 0em;
}

p.p1i {
    text-indent: -1.0em;
    margin-top: 0.5em;
    margin-left: 2.0em;
}

p.p2i {
    text-indent: -1.0em;
    margin-top: 0.5em;
    margin-left: 4.0em;
}

p.pl {
    text-indent: -1.0em;
    margin-top: 0.5em;
    margin-left: 1.0em;
}

p.sp0 {text-indent: 0em; margin-top: 3em;}
p.xkerronta {text-indent: 0em; margin-top: 3em;}
p.laina {text-indent: 0em; margin-left: 1em;}
p.xlaina {text-indent: 0em; margin-left: 1em; margin-top: 3em;}
p.pause {margin-top: 3em; margin-bottom: 3em; text-align: center; }
p.vahva {font-size: 1.25em; font-weight: bold}
p.caption {font-size: 0.95em; line-height: 1.25em; font-style: oblique }
p.taky {line-height: 1.25em; font-style: oblique; color: LightBlue;}
p.author {text-align: right; margin-top: 0; font-style: oblique; font-size: 0.9em; font-weight: normal}
p.center {text-align: center; font-style: oblique; font-weight: normal}
p.right {text-align: right; font-style: oblique; font-weight: normal}
p.lheader {text-align: left; font-size: 0.8em; color: YellowGreen}
p.rheader {text-align: right; font-size: 0.8em; margin: 0.5em 1.0em 0 0;}
p.subh {text-align: center; font-size: 110%; font-weight: bold; margin-top: 4em}
p.subh2 {text-align: center; font-size: 100%; margin-top: 3em}
p.sold {color:red}
p.ws{text-indent: 2em; font-weight: bold; color:white}
p.sc {font-variant:small-caps;}
p.date {text-align: right; margin-top: 0;}
p.full_title{text-align: left; font-size: 0.9em; margin: 0.5em;}

span.ib {font-weight: bold; font-style: italic;}

span.g {color: rgb(0, 255, 100)}
span.b {color: rgb(100, 200, 255)}
span.r {color: rgb(255, 120, 120)}
span.o {color: rgb(255, 200, 120)}
span.m {color: rgb(255, 0, 255)}

div.g {color: rgb(0, 255, 100)}
div.b {color: rgb(100, 200, 255)}
div.r {color: rgb(255, 100, 100)}
div.o {color: rgb(255, 200, 120)}
div.m {color: rgb(255, 0, 255)}

pre{
/*    background-color: rgb(61, 45, 10); */
    margin-left: 0em; margin-right: 0em;
    margin-top: 0.5em; margin-bottom: 0em;
    padding-left: 0.5em; padding-right: 0.5em;
    padding-top: 0.5em; padding-bottom: 0.5em;
    font-family: 'Lucida Console', 'Courier New', monospace;
    font-size: 90%; white-space: pre-wrap;
    overflow: scroll;
}
div.p{
    color: red;
    text-decoration: line-through;
}

div.v{
    color: YellowGreen;
}

div.m{
    color: White;
}

div.s{
    color: LightBlue;
}

div.h{
    color: grey;
}

div.txt {
    background-color: rgb(0, 0, 0);
}


pre.p{
    color: red;
    text-decoration: line-through;
}

pre.v{
    color: YellowGreen;
}

pre.m{
    color: white;
}

pre.s{
    color: LightBlue;
}

pre.h{
    color: gray;
}

div.codebox{
    margin:0em; padding: 0.0em;
    border:2px solid Green;
    background-color: rgb(204, 242, 255);
}


div.codebox2{
    margin:0em; padding: 0.5em;
    border:1px solid Green;
}

div.actbox{
    margin:0.5em; padding: 0em;
    float:right;
    border:1px solid Blue;
    background-color: rgb(55, 40, 50);
    clear: both;
}


ul {
    list-style: disc outside;
    margin: 0.5em 0 0.5em 0;
    padding: 0.0em;
}

dl {
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    /*    font-size: 0.95em;  */
    line-height: 1.1em;
}

dt {
    line-height: 1.25em;
    font-weight: bold;
    margin-left: 0em;
    margin-top: 1.5em;
    margin-bottom: 1.0em;
}

dd {line-height: 1.25em;
    margin-left: 1em;
    margin-bottom: 0.5em;
    margin-top: 0em;
}
li {font-size: 1.0em;
    line-height: 1.25em;
    margin: 0.5em 0em 0.0em 0em;
    padding: 0em;
}
li.menu {
    font-size: 1.0em;
    line-height: 1.0em;
    margin-left: 0em; margin-top: 0em;
    margin-bottom: 0em;
}

div.taky {
    max-width:32em;
    float: right;
    margin:0.5em; padding: 0.5em;
    border:1px solid Green; border-radius: 4px;
    background-color: rgb(61, 45, 10);
    font-style: oblique; color: LightYellow;
}

div.poem {
    white-space: pre-wrap;
    text-align: center;
    font-style: oblique;
    font-weight: normal;
}

div.selitys {
    margin: 0.5em 0.5em 0.5em 0.5em;
    border: 4px ridge Green;
    padding-left: 0em; padding-right: 0em
}

div.citation {
    display: inline-block;
    max-width: 48em;
    border-style: solid;
    border-color: SkyBlue;
    border-width: 1px; border-radius: 5px;
    margin:0.5%;
    padding: 1%;
    background-color: rgb(61, 45, 10);
}

div.subintro {
    font-weight: bold;
}

div.topintro {
    width: 100%;
    /*  max-width: 100vw;
     *    margin-top: 1em;
     *    margin-bottom: 1em; */
    margin: 0.5em;
    padding: 0.5em;
    border: 4px double rgb(255, 255, 200);
    border-radius: 8px;
    background-color:rgba(255,255,255,0.1);
    color: rgb(0,0,0);
}

div.pageintro {
    /*    max-width: 100vw;
     *    width: 100vw; */
    margin: 0.0em;
    padding: 0.5em; /* 1.0em 1.0em 1.0em; */
    border: 4px double rgb(255, 255, 200);
    border-radius: 8px;
}

div.introitem {
    max-width: 100%;
    text-decoration: none;
    padding: 0.5em;
    border: 1px solid rgb(255, 255, 200);
    border-radius: 8px;
    background-color:rgba(255, 255, 255, 0.1);
    color: rgb(0,0,0);  /*rgb(195, 255, 220); */
    margin: 0.5em;
}

div.introitem:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: rgb(0, 100, 255);
}

div.idxintro {
    max-width: 100%;
    text-decoration: none;
    padding: 0.5em;
    border: 1px solid rgb(255, 255, 200);
    border-radius: 8px;
    color: rgb(30, 60, 30);
    background-color:rgba(255, 255, 255, 0.2);
    margin: 0.5em;
}

div.idxintro:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: rgb(0, 100, 255);
}

div.idxintro > h1 {
    margin: 1.0em 0 0 0.5em;
    font-size: 110%;
}

div.idxintro > p {
    line-height: 1.25em;
    margin: 0.5em 0 0 0;
    text-indent: 0em;
}

/*
div.linkit {
    display: grid;
    width: 100%;
    grid-gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(50ch, 1fr));
}

div.linkki {
    max-width: 100%;
}
*/

div.linkit {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* display: grid;
     *   grid-gap: 0.5em;
     *   grid-template-columns: repeat(auto-fit, minmax(50ch, 1fr)); */
}

div.linkki {
    flex: 1 1 28em;
}

div.linkki_x {
    flex: 2 1 50em;
}

div.linkki_s {
    flex: 1 2 14em;
}

div.sec {
    border-style: solid none solid none;
    border-color: rgb(180, 240, 180);
    border-width: 2px;
    border-radius: 25px;
    color: hsl(48, 80%, 90%);
    background-color: hsl(78, 80%, 7%);
    padding: 0.5em; /* 0.0em 0.0em 1.0em 0.0em; */
    margin: 1em 0em 0.0em 0em;
}

.draft {
    background-image: url("/static/draft.png");
    background-size: contain;
}

div.right {
    float:right;
    margin:1rem auto 1rem auto;
    padding: 0.5rem;
    border-radius: 5px;
    background-color: black;
    line-height: 1.25rem;
    max-width:100%;
    border-style: solid;
    border-color: white;
    border-width: 1px;
}

div.left {
    float:left;
    margin:1rem auto 1rem auto;
    padding: 0.5rem;
    border-radius: 5px;
    background-color: black;
    line-height: 1.25rem;
    max-width:100%;
    border-style: solid;
    border-color: white;
    border-width: 1px;
}

div.koodi {
    font-family: 'Roboto Mono', "Lucida Console", "Courier New", monospace;
    white-space: pre-line;
    font-size: 0.9;
    margin-left: 0em;
    margin-right: 0em;
    overflow-x: scroll;
}

.topright {
    color: white;
    font-size: 100%;
    margin: 0.5rem;
    background-color: rgba(50, 50, 0, 0.3);
}

.dropbtn {
    background-color: rgba(50, 50, 0, 0.3);
    color: white;
    cursor: pointer;
    font-size: 100%;
    margin: 0.5rem;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.buttonit {
    font-size: 100%;
/*    font-weight: bold; */
    margin: 0.2rem;
    cursor: pointer;
    padding: 0.2rem;
      border: none;
        color: white;
/*    color: hsl(219 100% 45%); */
background-color: hsla(31 100% 50% / 0.1);
}
.buttonit:hover {
    background-color: green;
}

/* .dropdown */
#menubtn {
    position: fixed;
    top: 0.4vh;
    right: 0.4vw;
    cursor: pointer;
    font-size: 150%;
    padding: 0.2em;
    border-radius: 8px;
    color: hsl(219 100% 45%);
    background-color: hsla(31 100% 50% / 0.25);
}

#menubtn:hover {
    background-color: hsla(31 100% 50% / 0.8); /* rgba(50, 50, 0, 0.4); */
}

.dropdown-content {
    display: none;
    position: fixed;
    top: 10vh;
    right: 10vw;
    background-color: black;
    border: 1px solid green;
}

.dropdown-content a {
    color: white;
    padding: 0.5rem;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: DarkGreen
}

.show {
    display:block;
}

.backbtn {
    background-color: rgba(50, 50, 0, 0.3);
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    margin: 0.5rem;
}

.backbtn:hover {
    color: green;
    font-weight: bold;
}

div.lainaus {
    font-family: 'Montserrat', serif;
 /*   font-size: 105%;  */
    color: hsl(156 50.0% 75.0%);
}