/* Päätyyli */

body{
background:#6b5a46;
font-family:"Gill Sans MT", Arial, sans-serif;
font-size:16px;
color:#E3E0DC;
margin:0;
display:flex;
justify-content:center;
}

/* Logo */

.logo{
  width:200px;      /* pienentää logon */
  height:auto;      /* säilyttää mittasuhteet */
  display:block;
  margin:auto;      /* keskittää logon */
}

/* Keskitetty sisältö */

.page {
  width: 90%;          /* osa näytön leveydestä */
  max-width: 900px;    /* max leveys */
  padding: 20px;
  box-sizing: border-box;
}

header{
  text-align:center;
}

/* Otsikko */

h1{
font-family:"Blackadder ITC", cursive;
font-size:40px;
text-align:center;
}

/* Navigaatio */

.main-nav a {
  display: flex;
  flex-direction: column;  /* kuva yläpuolelle tekstiä */
  align-items: center;     /* keskittää kuvan ja tekstin vaakasuunnassa */
  text-decoration: none;
  color: black;
  font-weight: bold;
  gap: 5px;               /* tila kuvan ja tekstin välissä */

  background:#E3E0DC;
  padding:10px;
  border-radius:15px;


}

.nav-icon {
  width: 80px;   /* ikonien koko */
  height: 80px;
  object-fit: contain;

}

.main-nav ul {
  list-style: none;        /* poistaa pallot */
  padding: 0;
  margin: 0;
  display: flex;           /* tekee rivin */
  justify-content: center; /* keskittää navigaation */
  gap: 30px;               /* väli linkkien väliin */
}

/* Navigaation linkit */
.main-nav a {
  text-decoration: none;   /* poistaa alleviivauksen */
  font-weight: bold;
  color: black;
}

/* Galleria */

.gallery{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px;
}

.gallery img{
width:120px;
}

/* SOME */

.social{
display:flex;
justify-content:center;
gap:30px;
margin-top:30px;
}

.social img{
width:40px
}

/* Mobiilinäkymä */
@media (max-width:600px){

  .main-nav ul{
    gap:30px;
  }

  .main-nav img{
    width:40px;
  }

  .main-nav span{
    font-size:14px;
  }

}

header{
  text-align:center;
}

/* Hover ja aktiivinen tila */
.main-nav a:hover,
.main-nav a.active {
  background-color: #D9CAB3;   /* aktiivinen tausta */
  color: #6b5a46;              /* tekstin värin muuttaminen */
  transform: scale(1.20);        /* tekstin suurennus */
  transition: transform 0.2s, color 0.2s, background-color 0.2s; /* efekti */
}

/* Ikonin himmennys + suurennus hoverissa/aktiivisena */
.main-nav a:hover img,
.main-nav a.active img {
  filter: brightness(0.8);
  transform: scale(1.25);      /* ikonin suurennus */
  transition: transform 0.2s, filter 0.2s;  /* sulava efekti */
}

/* Tekstin muutos */
.main-nav a span {
  transition: transform 0.2s;
}