/* PERUSASETUKSET */

body{
    margin:0;
    font-family:'Manrope', sans-serif;
    background:#111;
    color:#e5e5e5;
}

a{
    text-decoration:none;
}

/* HEADER & FOOTER */

header, footer{
    text-align:center;
    background:#1c1c1c;
    padding:20px;
    
}

footer a{
    color:#d99e42;   /* sama väri kuin muussa sivussa */
    text-decoration:none;  /* poistaa alleviivauksen */

}

footer a:hover{
    color: #fff;
}

.header-img{
    max-width:600px;
    width:90%;
    height:auto;
    display:block;
    margin:0 auto;
}

/* TEKSTIT */

h1,h2,h3,h4{
    color:#d99e42;
}

h5{
    color:#d99e42;
    font-weight: 900;
}

/* NAVIGOINTI */

#topnav ul{
    list-style:none;
    padding:0;
    margin:10px 0 0 0;
}

#topnav li{
    display:inline-block;
    margin:0 15px;
}

#topnav a{
    color:#d99e42;
    font-weight:600;
    transition:0.3s;
    font-size: larger;
}

#topnav a:hover{
    color:white;
}

/* ETUSIVU */


#etusivu{
    background:url("mokki.png") center/cover no-repeat;
    height:80vh;
    position:relative;
}

.etusivu-overlay{
    background:rgba(0,0,0,0.55);
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}


.etusivu-text{
    text-align:center;
    padding:20px;
}


.etusivu-text h1{
    font-size:48px;
}


.etusivu-text p{
    font-size:19px;
}

/* NAPIT */

.btn{
    display:inline-block;
    background:#d99e42;
    color:black;
    padding:12px 25px;
    border-radius:8px;
    font-weight:600;
    transition:0.3s;
}

.btn:hover{
    background:#e0c676;
}

/* ELEMENTTIKORTIT */

.elementti{
    background:#222;
    padding:30px;
    margin:25px auto;
    border-radius:10px;
    max-width:900px;
    box-shadow:0 8px 20px rgba(0,0,0,0.5);
}

.featured{
    border:2px solid #d99e42;
}

/* FLEX RAKENNE */

.flex-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
}

.flex-item{
    padding:20px;
}

/* TABLET */

@media only screen and (min-width:431px){

    /* kaksi ekaa elementtiä vierekkäin */
    .flex-item{
        flex:0 0 45%;
    }

    /* kolmas elementti keskelle */
    .flex-item:nth-child(3){
        flex:0 0 45%;
        margin-left:auto;
        margin-right:auto;
    }

}

/* DESKTOP */

@media only screen and (min-width:1024px){

    .etusivu-text h1{
        font: size 40px;
    }

    /* kolme elementti vierekkäin */
    .flex-item{
        flex:0 0 30%;
        margin:0;
    }

}