/*kommentaar*/

/* ===== Värvipalett - pastelsed sinised toonid ===== */
:root {
    --sinine-tume: #5b8fc0;    /* peamine aktsentvärv (piirjooned, tekst) */
    --sinine-kesk: #8fbde0;    /* keskmine sinine (hover, aktiivne) */
    --sinine-hele: #dcedfb;    /* hele sinine (menüü, kastide taust) */
    --sinine-taust: #f2f8fd;   /* peaaegu valge sinine (lehe taust) */
    --sinine-joon: #b9d9f2;    /* õrn joon/piire */
}

body{
    margin: 0;
    background-color: var(--sinine-taust);
}

h1{
    font-variant: small-caps;
    font-size: xx-large;
    color: var(--sinine-tume); /*teksti värv*/
    background: transparent; /*tausta värv*/
}
header{
    padding: 5%;
    padding-right: 220px;
    min-height: 160px;
    background-color: var(--sinine-hele);
    border-left: 3px solid var(--sinine-tume);
    border-bottom: 3px dotted var(--sinine-tume);
    border-radius: 0 0 0 60px;
    background-image: url('paike.png');
    background-repeat: no-repeat;
    background-position: right 5% center;
    background-size: 150px 150px;

}
footer{
    padding: 5%;
    background-color: var(--sinine-taust); /*tausta värv*/
    font-variant: small-caps;
    border-top: 2px dotted var(--sinine-kesk);
}

section#kast1{
    border: 1px groove var(--sinine-joon); /*solid, double, dashed, dotted*/
    width: 25%;
    margin: 5px;
    padding: 1%;
    border-radius: 60px 120px 60px 120px;
    text-align: center;
    background-color: var(--sinine-hele);
    position: absolute;
    left: 0;
    top: 200px;
}
section#kast2{
    border: 10px  dotted var(--sinine-joon); /*solid, double, dashed, dotted*/
    width: 25%;
    margin: 5px;
    padding: 1%;
    border-radius: 60px;
    text-align: center;
    position: absolute;
}

/***************NAV - täislaiuses riba päise all*******************/

nav{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--sinine-hele);
    border-top: 2px solid var(--sinine-tume);
    border-bottom: 2px solid var(--sinine-tume);
    box-shadow: 0 2px 8px rgba(90, 140, 180, 0.15);
    box-sizing: border-box;
}

nav ul{
    list-style-type: none; /*täpp võtab ära'*/
    margin:0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

nav ul li{
    display: flex;
}

nav ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sinine-tume);
    text-decoration: none; /* alljoone on kustutatud*/
    text-align: center;
    font-variant: small-caps;
    padding: 18px 26px;
    border-right: 1px solid var(--sinine-joon);
}

nav ul li:last-child a{
    border-right: none;
}

nav ul li a:hover{ /*link fookuses - hiir on peal*/
    background-color: var(--sinine-kesk);
    color: #ffffff;
}
main{
    margin-top:20px;
}

/***************MEEDIA*******************/

#suurkast {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}

#suurkast section {
    border: 1px groove var(--sinine-joon);
    border-radius: 20px;
    padding: 15px;
    text-align: center;
    background-color: var(--sinine-taust);
}

#suurkast section h3 {
    margin: 0 0 10px;
    color: var(--sinine-tume);
}

#video iframe,
#kaart iframe,
#muusika iframe {
    max-width: 100%;
    border-radius: 10px;
}

#pildigalerii .pildid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-content: center;
}

#suurkast section img {
    width: 45%;
    max-width: 140px;
    margin: 5px;
    border-radius: 10px;
}