h1{
    background-color: darkblue;
    color: lightgray;

}
header, footer{
    font-family: Times New Roman, Times New Roman, serif;
    font-size: large;
    width: 60%;
    border: 1px solid gray; /*dashed, dotted, double, outline*/
    background-color: darkblue;
    color: lightgray;
    border-radius: 120px;
    padding: 1%; /*teksti ja piiri vahe*/
}
footer{
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
}
nav ul{
    list-style-type: none;
    text-align: center;
    margin: 2%;
    padding: 0;
    background-color: darkblue;
}
nav li{
    display: block;
    float: left;
    padding: 1%;
}
main{
    display: block;
    margin: 50px;
    padding: 1%;
}
nav a:hover{
    background-color: lightgray;
}
nav li a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    text-decoration: none;
    border-radius: 120px;
    border-left: 1pt solid gray;
    border-right: 1pt solid gray;
    padding: 10px;
}
/* Kontakt */
section#osa1{
    display: inline-block;
    width: 25%;
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    border-radius: 30px;
    padding: 2%;
}
section#osa1 h3{
    text-align: center;
    background-color: darkblue;
    color: lightgray;
    border-radius: 30px;
    padding: 2%;
    font-weight: bold;
    font-variant: small-caps;
}
section#osa2{
    display: inline-block;
    width: 25%;
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    border-radius: 30px;
    padding: 2%;
}
section#osa2 h3{
    text-align: center;
    background-color: darkred;
    color: lightgray;
    border-radius: 30px;
    padding: 2%;
    font-weight: bold;
    font-variant: small-caps;
}
section#osa3{
    display: inline-block;
    width: 25%;
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    border-radius: 30px;
    padding: 2%;
}
section#osa3 h3{
    text-align: center;
    background-color: darkgreen;
    color: lightgray;
    border-radius: 30px;
    padding: 2%;
    font-weight: bold;
    font-variant: small-caps;
}
/* Meedia */
section#pictures{
    display: inline-block;
    width: 35%;
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    border-radius: 30px;
    padding: 2%;
}
section#pictures h3{
    text-align: center;
    background-color: darkblue;
    color: lightgray;
    border-radius: 30px;
    padding: 2%;
    font-weight: bold;
    font-variant: small-caps;
}
section#video{
    display: inline-block;
    width: 35%;
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    border-radius: 30px;
    padding: 2%;
}
section#video h3{
    text-align: center;
    background-color: darkred;
    color: lightgray;
    border-radius: 30px;
    padding: 2%;
    font-weight: bold;
    font-variant: small-caps;
}
section#audio{
    display: inline-block;
    width: 35%;
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    border-radius: 30px;
    padding: 2%;
}
section#audio h3{
    text-align: center;
    background-color: darkgreen;
    color: lightgray;
    border-radius: 30px;
    padding: 2%;
    font-weight: bold;
    font-variant: small-caps;
}
section#map{
    display: inline-block;
    width: 35%;
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    border-radius: 30px;
    padding: 2%;
}
section#map h3{
    text-align: center;
    background-color: olive;
    color: lightgray;
    border-radius: 30px;
    padding: 2%;
    font-weight: bold;
    font-variant: small-caps;
}

div#kirjeldus {
    position: relative;
    left: 0;
    border: solid black 1pt;
    width: 400px;
    border-radius: 30px;
    padding:2%;
}
p{
    background-color: lightskyblue;
    border: solid black 1pt;
    border-radius: 25px;
    width: 400px;
    padding:2%;
}
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}