@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=DM+Serif+Display&family=Ms+Madi&display=swap');

body, html {
    height: 100%;
    margin:0;
    font-family: "Source Serif 4", serif;
    font-size:16px;
    letter-spacing:0.2px;
    line-height:1.7;
    background-color:#eeeeee;
    background-image:url('https://lasikuu.net/goldwillow/k/03bg.png');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p {
    text-indent:20px;
    margin:25px 0;
}
a {
    color:#737567;
    text-decoration:underline;
}
a:hover {
    text-decoration:none;
}

/* -------------------- LEISKA -------------------- */

.container {
    display: flex;
    height: 100%;
    flex-direction: row; /* Default to row layout */
}

/* Sidebar Styling */
.sidebar {
    width: 300px;
    background: -webkit-linear-gradient(#303425,#474c37);
    color: #fff;
    padding: 20px;
    height: 100%;
    position: fixed; /* Keeps the sidebar fixed on the left */
    top: 0;
    left: 0;
}

.sidebar ul {
    list-style-type: none;
}

.sidebar ul li {
    margin: 15px 0;
    border-bottom:1px dashed #bcbeae;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.sidebar ul li a:hover {
    color: #f0f0f0;
}

/* Main Content Styling */
.content {
    margin-left: 300px; /* To ensure content is not hidden behind the sidebar */
    padding:60px 80px;
    padding-bottom:200px;
    width: calc(100% - 250px); /* Takes the full width minus the sidebar */
}
.content ul li {
    margin: 0 30px;
}
.content ul li {
    margin: 0 40px;
}
.content ol li {
    margin: 0 30px;
}
.content ol li {
    margin: 0 40px;
}
.content pre {
    margin:0 20px;
    background-color:#fff;
    border:1px solid #ccc;
    border-radius:3px;
    padding:5px 10px;
    color:#555;
    line-height:1.3;
    font-size:14px;
}

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

.ponilista2 {
    width:100%;
    margin:40px 0 20px 0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:25px;
  align-items: center;
}
.ponilista2-item {
    line-height:1.6;
}
.ponilista2-item p {
    text-indent:0px;
}
.ponilista2-item:nth-child(odd) {
    text-align:right;
}
.ponilista2-item:nth-child(odd) img {
    box-shadow:2px 2px 3px #bbb;
    float:right;
    margin-left:40px;
}
.ponilista2-item:nth-child(even) {
    text-align:left;
}
.ponilista2-item:nth-child(even) img {
    box-shadow:2px 2px 3px #bbb;
    float:left;
    margin-right:40px;
}
.ponilista2-item img {
    border-radius:3px;
    box-shadow:2px 2px 3px #bbb;
    
}
.ponilista2-item img:hover {
    opacity:0.95;
}

/* -------------------- HEPPASIVU -------------------- */


.flex-container-pt {
    width:95%;
    margin:30px auto;
    display:flex;
    justify-content: center;
    align-items:center;
}
.flex-item {
    flex:1;
    padding:0 30px;
}
.flex-item:last-child img {
    float:left;
    padding:8px;
	background-image:url('https://lasikuu.net/goldwillow/k/03vihrbg.png');
    border-radius:2px;
    border:1px solid #a8aa99;
}
.flex-item:first-child {
}
.flex-item:first-child img:hover {
    opacity:0.95;
}
.geno {
    background-color:#bdbfaf;
    border-radius:5px;
    padding:0 3px;
    font-size:15px;
}
.sukutaulu {
    width:100%;
    margin:30px auto;
    border-collapse:separate;
    border-spacing:1px;
    padding:8px;
	background-image:url('https://lasikuu.net/goldwillow/k/03vihrbg.png');
    border:1px solid #a6aa97;
    font-size:14px;
}
.sukutaulu td {
    padding:7px;
    line-height:1.2;
    background-color:#6c715d;
    font-style:italic;
    border:1px solid #a6aa97;
    text-align:center;
}
.sukutaulu td a {
    color:#eeecdb;
    font-style:normal;
}
.sukutaulu td small {
    font-style:normal;
}
.sukutaulu td small a {
    color:#000;
    text-decoration:none;
}
.info {
    background-color:#585c4b;
    border-radius:4px;
    color:#aeaf9f;
    text-transform:uppercase;
    font-size:12px;
    font-style:normal;
    margin:0 2px;
    padding:0 3px;
}
.lista {
    width: 100%;
    margin:30px auto;
    border-collapse:collapse;
    border-spacing:1px;
    padding:8px;
	background-image:url('https://lasikuu.net/goldwillow/k/03vihrbg.png');
    border:1px solid #a6aa97;
    font-size:14px;
}
.lista th {
    text-align:left;
    padding:7px;
    line-height:1.3;
    background-color:#6c715d;
}
.lista tr {
    border-bottom:1px dashed #6c715d;
}
.lista td {
    padding:7px;
    line-height:1.3;
    background-color:#939881;
}
.lista td a {
    color:#eeecdb;
}
.boksi {
    width:100%;
    margin:0 auto -20px auto;
    display:flex;
    flex-direction:row;
}
.boksi-item {
    padding:0px;
}
.boksi-item:first-child {
    padding-right:20px;
    flex:1;
}
.boksi-item:last-child {
    padding-left:20px;
    flex:1;
}
.boksi:has(h2) {
    /* Styles to apply when the div contains an h2 */
}
.boksi p {
    line-height:2;
    text-indent:0px;
    padding:0px 20px;
}
.kys {
    margin-right:5px;
    background-color:#6c715d;
    padding:4px;
    border-radius:8px;
    color:#eeecdb;
    font-size:14px;
    border:1px solid #a6aa97;
}


/* -------------------- KUVAREUNAT -------------------- */

.isokuva {
    margin:10px;
    padding:8px;
	background-image:url('https://lasikuu.net/goldwillow/k/03vihrbg.png');
    border-radius:2px;
    border:1px solid #a6aa97;
}
.vaskuva {
    float:right;
    margin:0 0 30px 30px;
    padding:8px;
	background-image:url('https://lasikuu.net/goldwillow/k/03vihrbg.png');
    border-radius:2px;
    border:1px solid #a6aa97;
}

/* -------------------- RESPONSIVENESS -------------------- */

@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack the sidebar and content vertically on smaller screens */
    }

    .sidebar {
        position: relative; /* Let the sidebar be in normal document flow */
        width: 100%; /* Full width for sidebar on small screens */
        height: auto; /* Allow the height to adjust */
    }

    .content {
        margin-left: 0; /* No margin needed, the content is below the sidebar */
        width: 100%; /* Full width for content on small screens */
        padding: 20px; /* Adjust padding for smaller screens */
    }
    
    /* Make images responsive */
    .isokuva { 
        max-width: 100%;
    }

    .boksi {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding:0px;
    }
    .boksi-item:first-child {padding:0px;}
    .boksi-item:last-child {padding:0px;}
    .boksi-item p {padding:0px;}
}

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

h1 {
    margin:0 auto;
    color:#474c37;
    font-family: 'DM Serif Display', serif;
    font-size:40px;
    font-weight:normal;
    position: relative;
    z-index : 1;
    text-shadow:1px 1px 1px #fff;
    text-align:center;
}

h2 {
    margin:20px auto;
    padding:0 20px;
    color:#474c37;
    font-family: 'DM Serif Display', serif;
    font-size:25px;
    font-weight:normal;
    position: relative;
    z-index : 1;
    text-shadow:1px 1px 1px #fff;
    border-bottom:1px dashed #bcbeae;
}
h3 {
    margin:20px auto;
    padding:0 20px;
}