/* ==========================
   Yleiset nollaukset kaikille elementeille
   ========================== */
* {
  margin: 0;            /* poistaa oletusmarginaalit */
  padding: 0;           /* poistaa oletustäytteet */
  box-sizing: border-box; /* sisällyttää paddingin ja borderin elementin kokoon */
}

/* ==========================
   Flex-container About Me -osiossa
   ========================== */
.about-container {
  display: flex;         /* asettaa kuvan ja tekstin vierekkäin vaakasuoraan */
  align-items: flex-start; /* kohdistaa elementit yläreunaan */
  gap: 20px;             /* väli kuvan ja tekstin välille */
  margin: 40px 0;        /* tilaa ylä- ja alapuolelle About Me -osiota */
  flex-wrap: wrap;       /* pienillä näytöillä kuva ja teksti asettuvat päällekkäin */
}

/* ==========================
   Profiilikuva About Me -osiossa
   ========================== */
img.about-profile {
  width: 350px;          /* kiinteä leveys kuvasta */
  height: auto;          /* säilyttää kuvasuhteen */
  border-radius: 0;      /* ei pyöreitä kulmia */
}

/* ==========================
   About Me -tekstin asettelu
   ========================== */
.about-text {
  flex: 1;               /* vie jäljelle jäävän tilan kuvasta riippumatta */
  min-width: 200px;      /* estää tekstin kutistumisen liian kapeaksi pienillä näytöillä */
}

/* ==========================
   Hero-kuva ylälaidassa koko leveydellä
   ========================== */
img.hero-image {
  width: 100%;           /* kuvan leveys koko näytön leveys */
  height: auto;          /* säilyttää kuvasuhteen */
  display: block;        /* poistaa ylimääräiset rivivälit */
  margin: 0;             /* ei ylimääräistä marginaalia */
}

/* ==========================
   Header-teksti hero-kuvan alapuolelle
   ========================== */
header h1, header p {
  text-align: center;    /* keskittää tekstin vaakasuunnassa */
  margin-top: 20px;      /* tilaa kuvan ja tekstin välille */
}
/* Korostettu info headerin alla */
header .subtitle {
  font-weight: 500;                 /* hieman vahvempi fontti */
  text-decoration: underline;       /* alleviivaa tekstin */
  text-decoration-color: #2e6b2e;   /* sinertävä korostusväri */
  text-underline-offset: 4px;       /* pieni väli tekstin ja viivan väliin */
  margin-top: 10px;
  color: #444;
}

/* ==========================
   Book promotion section
   ========================== */
.book-container {
  display: flex;               /* kuva ja teksti vierekkäin vaakasuoraan */
  align-items: flex-start;     /* kohdistaa yläreunaan */
  gap: 20px;                   /* väli kuvan ja tekstin välille */
  margin: 40px 0;              /* tilaa ylä- ja alapuolelle */
  flex-wrap: wrap;             /* pienillä näytöillä kuva ja teksti päällekkäin */
}

img.book-cover {
  width: 200px;                /* kirjan kansikuvan leveys */
  height: auto;                /* säilyttää kuvasuhteen */
  border-radius: 5px;          /* pieni pyöristys kulmiin */
}

.book-text {
  flex: 1;                     /* vie jäljelle jäävän tilan tekstille */
  min-width: 200px;            /* estää liian kapean tekstin */
}

.book-text h3 {
  font-size: 1.5em;            /* otsikon koko */
  margin-bottom: 10px;
}

.book-text p {
  font-size: 1.2em;            /* kappaletekstin koko */
  color: #666;
}

.book-text a {
  color: #0077cc;              /* linkin väri */
  text-decoration: none;       /* poistaa alleviivauksen */
}

.book-text a:hover {
  text-decoration: underline;  /* hover-efekti */
}

/* Book advertisement box */
.book-ad {
  background-color: #e7f5e7;       /* haalean vihreä tausta */
  border-radius: 12px;             /* pyöristetyt kulmat */
  padding: 20px 30px;              /* sisätilaa laatikon reunoihin */
  margin: 40px auto;               /* väliä muihin elementteihin */
  max-width: 800px;                /* ettei veny liian leveäksi */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* kevyt varjo */
  text-align: center;              /* keskittää tekstin ja kuvan */
}

.book-ad h2 {
  color: #2e6b2e;                  /* hieman tummempi vihreä otsikko */
  margin-bottom: 15px;
}

.book-ad a {
  color: #2e6b2e;
  font-weight: 600;
  text-decoration: none;
}

.book-ad a:hover {
  text-decoration: underline;
}

.book-cover {
  margin-top: 20px;
  max-width: 200px;                /* sopiva kansikuvan koko */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* ==========================
   Navigation bar
   ========================== */
.navbar {
  background-color: #f8f8f8;   /* vaalea tausta */
  padding: 15px 0;            /* pystysuuntainen tila */
  text-align: center;         /* keskittää linkit */
  border-bottom: 1px solid #ddd;
}

.navbar ul {
  list-style: none;           /* poistaa listamerkit */
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;      /* vierekkäin */
  margin: 0 20px;             /* väli linkkien väliin */
}

.navbar a {
  font-family: 'Arial', sans-serif;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

.navbar a:hover {
  color: #0077cc;
}

/* ==========================
   Body (yleiset sivun tyylit)
   ========================== */
body {
  font-family: 'Georgia', serif; /* pääfontti koko sivulle */
  line-height: 1.6;              /* riviväli tekstille */
  background-color: #fff;        /* taustaväri */
  color: #333;                   /* tekstin väri */
  padding: 20px;                 /* sisäinen marginaali koko sivulle */
  max-width: 900px;              /* maksimileveys sivulle */
  margin: 0 auto;                /* keskittää sivun vaakasuunnassa */
}

/* ==========================
   Otsikot h1 ja h2
   ========================== */
h1, h2 {
  font-family: 'Arial', sans-serif; /* otsikoiden fontti */
  color: #222;                       /* otsikoiden väri */
  margin-bottom: 10px;               /* väli otsikon ja seuraavan elementin välille */
}

h1 {
  font-size: 2.5em;                  /* h1-fonttikoko */
  margin-top: 0;                      /* ei ylimääräistä marginaalia yläreunaan */
}

h2 {
  font-size: 1.8em;                  /* h2-fonttikoko */
  margin-top: 20px;                   /* väli ylemmän elementin kanssa */
}

/* ==========================
   Linkit
   ========================== */
a {
  color: #0077cc;                    /* linkin väri */
  text-decoration: none;              /* poistaa alleviivauksen */
}

a:hover {
  text-decoration: underline;         /* alleviivaa linkin hiiren päälle siirryttäessä */
}

/* ==========================
   Header
   ========================== */
header {
  text-align: center;                 /* keskittää headerin sisällön */
  margin-bottom: 40px;                /* tilaa headerin ja pääsisällön välille */
}

header h1 {
  font-size: 3em;                     /* suurentaa pääotsikon kokoa */
  color: #333;                        /* otsikon väri */
}

header p {
  font-size: 1.2em;                   /* pienempi teksti headerissa */
  color: #666;                        /* hieman vaaleampi väri */
}

header a {
  color: #0077cc;                     /* linkin väri headerissa */
  text-decoration: none;               /* poistaa alleviivauksen */
}

header a:hover {
  text-decoration: underline;          /* hover-efekti */
}

/* ==========================
   Pääsisältö
   ========================== */
main {
  margin-top: 40px;                   /* tilaa yläpuolelle */
}

section {
  margin-bottom: 40px;                /* tilaa alapuolelle eri osioiden välillä */
}

section h2 {
  font-size: 2em;                     /* otsikon koko osioissa */
  color: #333;                        /* väri */
  margin-bottom: 10px;                /* väli otsikon ja tekstin välille */
}

section p {
  font-size: 1.2em;                   /* kappaletekstin koko */
  color: #666;                        /* tekstin väri */
}

section ul {
  list-style-type: none;              /* poistaa listan pallukat */
  padding-left: 0;                     /* poistaa vasemman reunan paddingin */
}

section ul li {
  font-size: 1.2em;                   /* listatekstin koko */
  color: #666;                         /* listatekstin väri */
  margin-bottom: 10px;                 /* väli listan elementtien välissä */
}

/* ==========================
   Footer
   ========================== */
footer {
  text-align: center;                  /* keskittää footerin sisällön */
  margin-top: 40px;                    /* tilaa yläpuolelle */
  font-size: 1em;                      /* fonttikoko */
  color: #666;                         /* väri */

/* Publication list styling */
.pub-list {
  list-style-type: none;
  padding-left: 0;
}

.pub-list li {
  margin-bottom: 15px;
  font-size: 1.1em;
  color: #444;
  line-height: 1.5;
}

.pub-list em {
  color: #333;
  font-style: italic;
}

.pub-list a {
  color: #0077cc;
  text-decoration: none;
}

.pub-list a:hover {
  text-decoration: underline;
}



}