/*Ulkoisen fontin importti*/ 

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');

    .teksti_mono {
        font-family: 'Roboto Mono';
    }
/*Koko sivun määritykset*/
    body {
        background-color: darkgray;
        margin: 0;
        font-size: 100%;
        font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; 
    }

 /*page eli koko sivun yhteiset määritykset */


    main{
        width: 90%;
        max-width: 1200px;
        
        background-color: grey;
        margin: 0 auto;
        
    }
/*hederin määritykset */

    header{
        background-color: #575757;
        text-align: center;
        font-size: 100%;
        padding: 1em;
        color: #F0EBEB;
        letter-spacing: 0.25em;

    }

/*nav määritykset */
    nav{
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
    }

/*navipalkin määritykset*/
    ul.navi {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;

    }

    li.navi {
        display: inline;
    }
    /*tiputusvalikon ja navinyhteis määritykset*/
    a.linkki, .dropbtn{
        color: white;
        padding: 0.3125em;
        display: inline-block;
        text-decoration: none;
    }
/*hoverin määritys*/
    a.linkki:hover:not(.active), .dropdown:hover .dropbtn {
        color: pink;
    }
/*aktiivisen määritys*/
    .aktiivinen {
        background-color: #575757;
        text-decoration: none;
        color: white;
        padding: 10em 0.625em;
    }

/*tiputusvalikon määritys*/
    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #E49A2F;
        min-width: 10em;
        box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: white;
        padding: 0.5em 0.5em;
        text-decoration: none;
        display: block;
        text-align: left;
}
    .dropdown-content a:hover {
        color: pink;
}

    .dropdown:hover .dropdown-content {
        display: block;
}
     /*content määritykset */
    section{
        background-color: #D8CCAF;
        text-align: center;
        overflow: auto;
        padding-bottom: 1em;
        width: 100%;
        
    }
    section h3{
        color:#E49A2F;
        text-indent: 1em;
    }
    section h4{
        color:#575757;
        text-indent: 2em;
    }
     /*vas ja oik contenttien yleismääritykset */
    section.contento, section.contentv{
        width: 40%;
        text-align: left;
        border-style: solid;
        border-width: 1px;
        border-color: #AC9675;
        margin: 2%;
        border-radius: 0.5em 0.5em;
        background-color: #F7F5EE;
        overflow: hidden;
        padding: 1%;
    }

/*vasemman ja oikean contentin omat määritykset */
    section.contentv{
        float: left;     
    }
    section.contento{
        float: right;
        
        
    }

/*footerin määritys*/
    footer li {
        display: inline-block;
        padding-left: 10px;
        font-size: 0.75em;
}
    footer a{
        color: white;
}
    footer ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
}
/*menun ja footerin yhteismääritykset*/
    nav, footer{
        text-align: center;   
        background-color: #E49A2F;
        color: white;
}

/*kuvan määritykset*/
    
.kuva{
    display: block;
    width: 100%;
    max-height: auto;
    padding: 1% 0;
    
}

/*galleria thumbnail määritykset*/

.galleria-linkki{
    border-radius: 0.5em;
    display: inline-block;
    padding: 0.3125em 0.3125em 0 0.3125em;
}
.galleria-linkki:hover {
  background-color: #E49A2F;
}
.galleria-thumb{
    border-radius: 0.5em;
    width:100px;
    max-height: auto;
}
@media only screen and (max-width: 800px) {

    section.contento, section.contentv{
        width: 90%;

        float: none
    }
        footer li {
        display: block;
        
       
}
}