@import url('https://fonts.googleapis.com/css2?family=Niconne&family=Droid+Serif&family=Playfair+Display+SC:wght@400;700&family=Nunito&family=Playfair+Display:ital@0;1&display=swap');

a {color:#721515;font-weight:bold;text-decoration:none;}
a:hover {}

body {
    margin: 0 auto;
    padding:10px 0;
    font-family:'Droid Serif',serif;
    font-size:12px;
    letter-spacing:0.2px;
    line-height:23px;
    color:#333;
    background-color: #f3eee6;
    background-image: url("https://www.transparenttextures.com/patterns/bedge-grunge.png");
    background-attachment: fixed;
}
* {
    box-sizing:border-box;
}
:root {
    --leveys:1180px;
}


/* -------------------- PERUS -------------------- */

.otsikko-container {
    width: calc(var(--leveys) - 200px);
    margin:20px auto;
    padding:40px 0;
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-image:url('https://www.lasikuu.net/fellbury/k/sil.png');
    background-position:center;
    background-repeat:no-repeat;
}
.otsikko-linkki {
    width:120px;
    padding:0 15px;
    font-family:'Droid Serif', serif;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    text-align:center;
    text-shadow:1px 0px 3px #bbb;
    
}
.otsikko-linkki a {
    text-shadow:1px 0px 3px #bbb;
    color: #333;
    font-weight:normal;
}
.otsikko-linkki a:hover {
    color: #777;
}
.otsikko-item {
    width:400px;
    font-family: 'Playfair Display SC', serif;
    font-weight:bold;
    padding:0 20px;
    font-size:30px;
    letter-spacing:1px;
    text-align:center;
    text-shadow:1px 0px 3px #999;
    color: #721515;
}
.otsikkokuva {
    width:100%;
    height:200px;
    background-color: #722525;
    background-image: url("https://www.transparenttextures.com/patterns/az-subtle.png");
    border-top:12px solid #803b3b;
    border-bottom:12px solid #803b3b;
    box-shadow:1px 0px 3px #bbb;
    position:relative;
}
.sisalto {
    margin:0 auto;
    width:var(--leveys);
    padding:60px 80px;
    border:3px double #bfb6a6;
    background: rgba(246, 244, 241, 0.5);
    box-shadow:1px 0px 5px #cfc7b8;
    border-radius:3px;
}

.footer {
    margin:30px auto;
    width:var(--leveys);
    font-family:'Droid Serif', serif;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    text-align:center;
    text-shadow:1px 0px 3px #bbb;
    
}


/* -------------------- PONILISTA -------------------- */

.ponilista {
    width:100%;
    margin:40px 0 20px 0;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:25px;
}
.ponilista-item {
    text-align:center;
    padding:4px 0;
    font-size:13px;
    line-height:1.6;
}
.ponilista-item img {
    border:1px solid #cfc7b8;
    border-radius:10px;
    box-shadow:1px 0px 3px #ccc;
    margin-bottom:8px;
    
}
.ponilista-item img:hover {
    opacity:0.95;
}


/* -------------------- PONISIVU -------------------- */

.vh {
    text-align:center;
    padding-bottom:10px;
    letter-spacing:1px;
}
.vh a {
    text-decoration:none;
    font-weight:normal;
}

.meriitit {
    margin:35px auto -15px auto;
    text-align:center;
}
.meriitit a {
}
.geno {
    padding:0 3px;
    color:#cfc7b8;
}
.flex-container-pt {
    width:100%;
    margin:50px auto 40px auto;
    display:flex;
    justify-content: center;
    align-items:center;
}
.flex-item {
    flex:1;
    padding:0 30px;
}
.flex-item:last-child {
}
.flex-item:first-child img {
    float:right;
    border:1px solid #cfc7b8;
    border-radius:10px;
    box-shadow:1px 0px 3px #ccc;
}
.flex-item:first-child img:hover {
    opacity:0.95;
}
.sukutaulu {
    width:100%;
    border-collapse:collapse;
    background: rgba(253, 252, 251, 0.4);
    border-top:1px solid #cfc7b8;
    border-bottom:1px solid #cfc7b8;
    border-radius:2px;
}
.sukutaulu td {
    padding:10px 20px;
    line-height:17px;
    border-bottom:1px solid #cfc7b8;
    
}
.info {
    padding:0 3px;
    color:#cfc7b8;
    font-size:11px;
}
.lista {
    width:100%;
    margin:20px auto;
    border-collapse:collapse;
}
.lista th, .lista td {
    padding:3px 8px;
}
.lista th {
    text-align:left;
    background: rgba(253, 252, 251, 0.4);
    border-top:1px solid #cfc7b8;
    border-bottom:1px solid #cfc7b8;
}
.lista td {
    border-bottom:1px solid #cfc7b8;
    
}
.lista .lippu {
    padding-right:3px;
}


/* -------------------- KUVAT -------------------- */

.etureunat {
    margin:50px 15px 20px 15px;
    border:1px solid #cfc7b8;
    border-radius:10px;
    box-shadow:1px 0px 3px #ccc;
}
.kg {
    margin:10px 15px 20px 15px;
    border:1px solid #cfc7b8;
    border-radius:10px;
    box-shadow:1px 0px 3px #ccc;
}
.kg:hover {
    opacity:0.95;
}


/* -------------------- SCROLLBAR JA MAALAUS -------------------- */

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background-color: #f3eee6;
    background-image: url("https://www.transparenttextures.com/patterns/bedge-grunge.png");
}

::-webkit-scrollbar-thumb { /* se osa josta tarrataan */
    background: rgba(246, 244, 241, 0.5);
    border:1px solid #bfb6a6;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #fff; 
}

::-moz-selection { background-color: #c5bda8; }
::selection { background-color: #c5bda8; }


/* -------------------- HOOT -------------------- */

h1 {
    margin:0;
    font-family: 'Playfair Display SC', serif;
    font-size:25px;
    text-shadow:1px 0px 3px #999183;
    text-align:center;
    font-weight:normal;
    letter-spacing:-0.2px;
    color: #721515;
}
h2 {
    margin:25px 0;
    font-family: 'Playfair Display SC', serif;
    font-size:19px;
    letter-spacing:-0.2px;
    text-shadow:1px 0px 2px #999;
    color: #721515;
    font-weight:normal;
}