@font-face {font-family: 'Open Sans'; src: url('OpenSans-Regular.ttf'); }

@font-face {font-family: 'Aleo'; src: url('Aleo-VariableFont_wght.ttf'); }


/*-------------------------------------------------------------*/
/*                                                             */
/*           Muotoilutiedosto - Projekti Lönnrot               */
/*                                                             */
/*                  Copyright Lumiini 2025                     */
/*                                                             */
/*-------------------------------------------------------------*/


:root {
  --color1: #69202d; /* headerin tausta, footerin palkki */
  --color2: #86222b; /* linkit, luettelomerkit */
  --color3: #151515; /* leipateksti */
  --color5: #faf9f8; /* tausta ja valkoinen teksti */
  --color6: #c1bebe; /* menupalkki */
}

body { background: var(--color5); margin: 0; padding: 0; font-family: 'Aleo', 'Merriweather', serif; font-size: 18px; line-height: 1.6; }

img { width: 100%; }

h1, h2, h3, h4, h5 { color: var(--color3); font-weight: 700; margin-top: 1.2em;
                     margin-bottom: 0.4em; line-height: 1.2; letter-spacing: 0px; }

h1 { font-size: 1.40rem; margin-bottom: 0em; font-family: "Open Sans", sans-serif; letter-spacing: 1px; }
h2 { font-size: 2.00rem; color: #202020; margin-top: calc(5vw + 10px); }
h3 { font-size: 1.40rem; color: #202020; }
h4 { font-size: 1.00rem; }

p { font-size: 1em; color: var(--color3); margin-top: 0px; margin-bottom: 1em; text-align: justify; font-weight: 400; }

a { font-size: 1em; color: var(--color2); text-decoration: none; font-weight: bold; transition: color 0.1s; }

a:hover { color: #a9a9a9; }

li::marker { color: var(--color2); }

li { position: relative; right: 22px; }
    
.rajaus { max-width: 950px; margin-right: auto; margin-left: auto; padding-right: 5%; padding-left: 5%; }

.aakkoset   { margin-bottom: 40px; }
.aakkoset a { padding: 4px; line-height: 1.7em; }

.header { background: var(--color1); background-image: url('lonnrot-2.png'); background-position: right bottom;
          background-repeat: repeat-Y; background-size: auto 180px; padding-top: 15px; padding-bottom: 15px; }

@media (max-width:1000px) { .header { background-position: center bottom; background-size: auto 180px; }}
@media (max-width:600px) { .header { background-image: none; }}


.header h1, .header h2 { color: var(--color5); margin-top: 15px; padding-right: 10px; text-shadow: 0px 2px 0px var(--color1);
                         display: inline-block; max-width: 450px; }

.header h1 { padding: 3px 7px 4px 0px; font-weight: normal; }
.header h2 { font-size: 50px; }

.menu {
  overflow: auto;
  margin-top: 0px;
  background-color: var(--color6);
  position: sticky; top: 0; z-index: 999;
}

.menu a {
  float: left;
  display: block;
  color: var(--color3);
  padding: 6px 22px 5px 22px;
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: normal;
  transition: background 0.1s;
  background-color: color-mix(in oklab, var(--color6) 50%, white);
  letter-spacing: 0px;
  margin-top: 5px;
  border: 1px solid var(--color6);
  border-radius: 4px 4px 0px 0px;
  }

a.active { background: var(--color5); color: var(--color3); text-shadow: none; border: 1px solid #939393; border-bottom: 1px solid var(--color5); margin-left: -1px; margin-right: -1px; }

.menu a:hover {  }

@media (max-width:700px) { .menu a { float: none; display: block; border: 0; border-bottom: 0px solid var(--color4); margin: 0px;
                                     padding: 8px 22px 8px 22px; border-radius: 0px; color: var(--color4);
                                     background-color: #b9b9b9; border-bottom: 1px solid #ddd; }

                           .menu   {  }

                           .menu > .rajaus { padding-right: 0%; padding-left: 0%; }

                           a.active { background: var(--color5); color: var(--color3); text-shadow: none; }
                           a.active::before { content: "\25BA\0020"; position: relative; top: -1px; }
                           .header h2 { max-width: 350px; }
}

@media (max-width:700px) { p { text-align: left; }}

.alkuun { position: sticky; top: 0px; background: var(--color5); padding: 5px; border-bottom: 1px solid #a0a0a0; z-index: 999; }

.alkuun a::before { content: url('nuoli-2.png'); position: relative; top: -1px;
                                              }
.footer { background: var(--color5); background-image: url('lonnrot-footer.png'); background-position: right top; background-repeat: repeat-Y; background-size: auto 100%; padding-top: 50px; padding-bottom: 50px; }

@media (max-width:1000px) { .footer { background-position: center top; background-size: auto 180px; }}
@media (max-width:600px) { .footer { background-image: none; }}

.footer p {margin: 0px; color: var(--color3); text-align: left; display: block; padding: 15px 15px 15px 20px; font-weight: bold; max-width: 45%; font-size: 1em; border-left: 1em solid var(--color1); border-radius: 0px 0px 0px 25px; letter-spacing: 0px; }

.footer a { color: var(--color3); font-weight: bold; }
.footer a:hover {  }