/* HEADER, logo ja otsikot */
    .header-row { 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    margin-top: -20px;
    } 
    .title-block { 
    flex: 2;    
    } 
    .header-image { 
    display: block;
    margin: 10px;
    width: 70%;
    height: 180px;
    opacity: 0.5; 
    }

/* Sivun ylälaidan kuvaa ei haluta mobiiliin Mobiili leveys määritelty niin, että toimii erilaisilla laitteilla toivotusti ja kaikki näkyy oikein*/
    @media (max-width: 940px) {
    .header-image { 
    display: none; 
    } 
    } 
    
/* logon sijainti */ 
    .logo { 
    width: 140px; 
    height: auto; 
    display: block; 
    margin-bottom: 0px; 
    } 

/* Valikon asetukset desktop näkymässä */
    .topnav ul { 
    list-style: none; 
    display: flex; 
    justify-content: center; 
    gap: 80px; 
    flex: 1; 
    flex-direction: row; 
    margin: 0; 
    padding: 0; 
    } 
    
    .topnav li {
    margin-left: 20px; 
    flex: 0; 
    text-align: center;
     } 
     
     .topnav a { 
    color: #373D20; 
    text-decoration: none;
    font-family: "Aptos Slab"; 
    font-size: 18px; 
    white-space: nowrap;
     } 
     
    .topnav { 
    display: flex; 
    justify-content: space-around;
    align-items: center; 
    background-color: white; 
    padding: 20px 0px;
      } 
    
    .menu-toggle { 
    display: none;
    font-size: 28px;
    background-color: white; 
    color: #373D20;
    border: none; 
    cursor: pointer;
    padding: 8px 12px; 
    border-radius: 4px;
    margin-left: auto;
     } 
     
    .close-menu { 

    display: none; 
    } 
    
    .topnav a.active {
    font-weight: bold;
    border-bottom: 2px solid #717744;
     }
     
/* Mobiilin valikko */
     @media (max-width: 940px) {
    .menu-toggle { 
    display: block; 
    } 

    .topnav ul { 
    display: none;
    position: absolute;
    flex-direction: column;
    background-color: #766153;
    top: 60px;
    right: 0px;
    width: 45%;
    padding: 10px;
    border: 3px solid #373D20;
    gap: 5px; 
    }

    .topnav ul.show {
    display: flex; 
    }
    
    .topnav a {
    color: #BCBD88;
    text-decoration: none;
    font-family: "Aptos Slab";
    font-size: 16px;
    white-space: normal;
    border-bottom: none;
    } 
    
    .close-menu {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #BCBD88;
    cursor: pointer; 
    } 
    } 

 /* Otsikoiden määritykset */
    h1 { 
    color: #373D20;
    font-size: 32px;
    font-family: "Aptos Slab", serif;
    font-weight: 900;
    margin-bottom: 0px;
    margin-top: 0px; 
    }
    
    h2 { 
    color: #717744;
    font-size: 30px;
    font-family: Aptos Slab;
    margin-top: 0px; 
    } 
    
    h3 {
    color: #EFF1ED;
    font-size: 20px;
    font-family: Aptos Slab;
    background-color: #373D20;
    padding: 10px;
    margin: 0px auto;
    border: 3px solid #373D20; 
    }
    
    h4 {
    color: #373D20;
    font-size: 18px;
    font-family: Aptos Slab;
    } 
    
 /* Kappaletekstin määritykset */
    p { 
    color: #EFF1ED;
    font-size: 18px;
    font-family: Aptos Slab;
    background-color: #373D20;
    padding: 15px;
    margin: 0px auto;
    border: 3px solid #373D20;
    } 
    
/* Linkkipainikkeiden asetukset */
    a.button:link, a.button:visited { 
    background-color: #717744;
    color:#EFF1ED;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 5px auto;
    border: 1px solid #EFF1ED;
    max-width: fit-content; 
    } 
    
    a.button:hover, a.button:active { 
    background-color: #BCBD88;
    color: #373D20;
    border: 1px solid #373D20; 
    } 
    
/* Footerin määritykset */
    footer {
    text-align: center;
    padding: 3px;
    background-color: #EFF1ED;
    color: #373D20;
    margin: 20px; }
    
    footer a, footer a:visited { 
    color: #EFF1ED;
    text-decoration: none; 
    }
    
    footer a:hover { 
    color: #717744;
    } 
    
/* taulukon asetukset */
    table {
    font-family: Aptos slab;
    border-collapse: collapse;
    width: 100%; 
    } 

    td, th { 
    border: 1px solid #373D20;
    text-align: left;
    padding: 8px; 
    }

    tr:nth-child(even) { 
    background-color: #717744; 
    }