body {
    font-family: 'Open Sans', sans-serif; /* Perusfontti */
}

h1 {
    font-family: 'Bebas Neue', sans-serif, Arial, Helvetica;
    font-size: 48px; /* Voit muuttaa kokoa tarpeen mukaan */
    letter-spacing: 2px; /* Pieni välistys tuo tyyliä */
    text-transform: uppercase; /* Kaikki isot kirjaimet */
}
p {
    font-family: 'Open Sans', sans-serif; /* Perusteksti */
}

body {
    background-image: url('/ugc_taus_001.jpg'); /* Vaihda omaan tiedostoon tai linkkiin */
    background-size: cover;
    background-position: center;
}

.container {
    background: rgba(225, 225, 225, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1, h2 {
    color: #111111;
    font-weight: bold;
}

iframe {
    border-radius: 15px;
    border: 3px solid #333;
}



.esittely h2 {
    margin-bottom: 10px; /* Väli otsikon ja kuvan/tekstin välillä */
}






.esittely {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Kuva vie 1 osan, teksti 2 osaa */
    gap: 20px; /* Väli kuvan ja tekstin välille */
    align-items: start; /* Kohdistaa sisällön yläreunaan */
}

.esittely-kuva {
    width: 100%; /* Skaalaa kuvan leveyden mukaan */
    max-width: 200px; /* Säädä kuvan maksimikokoa */
    border-radius: 10px; /* Pyöristetyt kulmat */
}

.esittely-teksti {
    display: flex;
    flex-direction: column;
}

.esittely-teksti p {
    grid-column: span 2; /* Teksti venyy koko leveyteen kuvan jälkeen */
}




.social-links {
    display: flex;
    justify-content: center; /* Keskittää ikonit */
    gap: 50px; /* Asettaa 50px välin kuvien väliin */
    margin-top: 20px; /* Lisää hieman tilaa yläpuolelle */
}

.social-links a img {
    transition: transform 0.2s ease-in-out; /* Lisää pieni hover-efekti */
}

.social-links a img:hover {
    transform: scale(1.1); /* Kasvattaa ikonia hieman hoveroidessa */
}


/* Yläpalkki */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4a6a2b;
    padding: 15px 15px;
}

/* Navigaatio */
.nav-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Rivittää linkit automaattisesti tarvittaessa */
    justify-content: center;
    gap: 15px;
    padding: 0;
    margin: 0;
}

.nav-links li {
    display: block;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    transition: color 0.3s;
    padding: 10px 10px; /* Lisätty paddingia, jotta linkit eivät häviä */
    display: block; /* Takaa, että linkit näkyvät aina */
    text-align: center;
}

.nav-links a:hover {
    color: #FFD700;
}

/* Mobiiliystävällinen valikkorivitys */
@media screen and (max-width: 768px) {
    .nav-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center; /* Keskittää valikon */
    }

    .nav-links li {
        width: auto;
    }


footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

.footer-container {
    max-width: 600px;
    margin: 0 auto;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
}

.footer-links li {
    margin: 5px 0;
}

.footer-links a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #FFD700;
}

.portfolio-images {
    display: grid;
    grid-template-columns: 1fr; /* Yksi sarake mobiilissa */
    gap: 15px;
    justify-items: center;
overflow: hidden;
}

.portfolio-images img {
    width: 100%;
    height: auto;
    max-width: 300px; /* Säädä sopivaksi */
    border-radius: 10px;
   overflow: hidden;
}

/* Skaalautuminen pienemmillä näytöillä */
@media screen and (max-width: 768px) {
    .portfolio-images {
         grid-template-columns: 1fr; /* Yksi sarake mobiilissa */
    }
}

@media screen and (max-width: 480px) {
    .portfolio-images {
        grid-template-columns: 1fr; /* Yksi sarake mobiilissa */
    }
}

.portfolio-images img {
    width: 100%;
    height: auto;
    max-width: 300px; /* Säädä sopivaksi */
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #004d00; /* 1px tummanvihreä kehys */
}

.contact-form {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 500px;
    margin: 40px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
    text-align: center;
}

.contact-form label {
    display: block;
    font-weight: bold;
    margin-top: 10px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 70%; /* Tekstialue skaalautuu lomakkeen leveyteen */
    height: 300px; /* Voit muuttaa korkeutta tarpeen mukaan */
    resize: vertical; /* Käyttäjä voi venyttää kenttää korkeussuunnassa */
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-form fieldset {
    border: none;
    margin-top: 10px;
}

.contact-form fieldset legend {
    font-weight: bold;
}

.contact-form button {
    display: block;
    width: 100%;
    background: #222;
    color: white;
    padding: 10px;
    margin-top: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form button:hover {
    background: #444;
}

.contact-form-container {
    background: rgba(210, 210, 210, 0.9); /* Vaalea tausta */
    padding: 20px; /* Sisätilaa reunoille */
    border-radius: 10px; /* Pyöristetyt kulmat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hieman varjoa */
    max-width: 600px; /* Rajoittaa lomakkeen leveyttä */
    margin: 20px auto; /* Keskittää lomakkeen */
}