@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'); */
}

* {
    box-sizing: border-box;
}

body{
    margin: 0.5em;
    font-family: 'Noto Sans', sans-serif;
    color: rgb(180, 240, 180);
    background-color: rgb(0, 0, 0);
    background-image: url("taustakuva.png");
    background-size:cover;
    font-size:100%;
}

button {
    padding: 0.5em;
}

h1 {
    font-family: Helvetica, sans-serif;
    font-size: 110%;
    font-weight: bold;
    text-align: center;
    margin: 1.0em;
}


.right {text-align: right}

hr {
    width: 100%
}

div.title {
    font-size: 110%;
    text-align: center;
    font-weight: bold;
    line-height: 1.25em;
    text-shadow: 0px 0px 10px white;
    background-color:rgba(0,0,0,0.5);
}


div.pagesummary {
}

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

p.pf {
     color: hsl(129, 100%, 16%);
     margin: 1.0em;
     flex: 1 1 12em;
     text-indent: 0em;
}

p.date {
    text-align: right;
    margin-top: 0;
}

p.kerronta {
}


p.toptitle {
    line-height: 1.25em;
    font-size: 100%;
    margin: 1.0em;
}


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

a:link {
    color: rgb(0, 0, 250);
    color: Blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: Blue;
}
a:active {
}

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

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.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.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: 1em 0 0 0.5em;
    font-size: 110%;
}

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

div.footer {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
    width: 100%;
    margin: 1em;
    border: 1px solid white;
    border-radius: 4px;
}

/* .topmenu { */
#fonttikoko {
    position: fixed;
    top: 0;
    right: 0;
    color: rgb(255, 255, 0);
    margin: 0.5em;
    background-color: rgba(0, 150, 0, 0.5);
}

img {
    max-width: 100%;
    height: auto;
}

.grid {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    padding: 1em;
}

. grid > div {
    padding: 1em;
}