* {
    box-sizing: border-box;
    max-width: 100vw;
}

:root {
  --tausta: hsla(45, 60%, 40%, 1);
  --valikko: hsla(45, 60%, 52%, 1);
#  --valikko: hsla(85, 60%, 40%, 1);
}

body {
    font-size: 100%;
    background-color: black; /*hsla(48, 100%, 15%, 1); */
}

.hd1 {
  margin: 2px;
  text-align: center;
  font-size: 1.25em;
}

.hd2 {
  margin: 2px;
  text-align: center;
  font-size: 1.25em;
}

.hd3 {
  margin: 2px;
  text-align: center;
  font-size: 1.1em;
}

h1, h2, h3 {
  margin: 2px;
  text-align: center;
}

h1 {
  font-size: 1.25em;
  font-weight: bold;
}

h2 {
  font-size: 1.1em;
  font-weight: bold;
}

h3 {
  font-size: 1em;
  font-weight: bold;
}

.caption {
    margin: 0.5em 1em 0em 1em;
}

p {
  font-size: 1em;
    margin: 0.5em 0em 0em 0em;
    padding: 0.5em:
}

p.huom {
    color: hsla(6, 100%, 15%, 1);
    margin: 1rem;
    font-weight: bold;
}

#sivu {
  width: 100%;
  height: 100%;
/*  z-index: 1; */
  padding: 2px;
  border: none;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  border: none;
/*
 *  padding: 2px;
  margin: 2px;
*/
}

.check {
  border: 1px solid;
  margin: 2px;
  padding: 2px;
  border-radius: 2px;
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
}

.valikko {
/*  border: 1px solid green; */
  border-radius: 4px;
  margin: 4px;
  padding: 4px;
  background-color: var(--valikko);
  font-size: 115%;
}

/*
.valikko0 {
  border: none;
  margin: 5px;
  padding: 5px;
  background-color: hsl(49, 64%, 81%);
}
*/

#valikot {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 2px;
/*  z-index: 2; */
  width: 100%;
  background-color: var(--tausta);
  border: none;
}

#kehys {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
/*  z-index: 5; */
  background-color: black;
/*
 *  padding: 1em;
 * */
}

#info {
  position: absolute;
  left: 2px;
  bottom: 2px;
  padding: 2px;
  z-index: 10;
  border-radius: 2px;
  background-color: black;
  color: white;
  opacity: 0.6;
}

#photo {
  position: absolute;
  right: 0px;
  top: 0px;
  max-width: 96vw;
  height: 96vh;
  margin: 2vh;
/*  z-index: 5; */
}

#video {
position: absolute;
right: 0px;
top: 0px;
max-width: 96vw;
height: 96vh;
margin: 2vh;
/*  z-index: 5; */
}

#seis {
  position: absolute;
  left: 10px;
  top: 10px;
  color: red;
  z-index: 10;
}

/*
 * #lopeta {
position: absolute;
left: 10vw;
top: 10vh;
color: green;
z-index: 10;
}
*/
#intro {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 20;
  font-size: 125%;
  font-weight: bold;
  border-radius: 5px;
  padding: 0.5em;
  margin: 0.5em;
  max-width: 30em;
  background-color: white;
  color: black;
  opacity: 0.5;
}
/*
 * .intro1 {
  font-size: 125%;
  font-weight: bold;
  border-radius: 5px;
  padding: 0.5em;
  marging: 0.5em;
  background-color: white;
  color: black;
  opacity: 0.5;
}
.intro2 {
  font-size: 125%;
  font-weight: bold;
  border-radius: 5px;
  padding: 0.5em;
  marging: 0.5em;
  background-color: white;
  color: black;
  opacity: 0.5;
}
.intro3 {
  font-size: 125%;
  font-weight: bold;
  border-radius: 5px;
  padding: 0.5em;
  marging: 0.5em;
  background-color: white;
  color: black;
  opacity: 0.5;
}
*/
/*
#nappulat {
  font-size: 1.0em;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  padding: 2px;
  margin: 0px;
  background-color: black;
  color: white;
  opacity: 0.6;
  z-index: 8;
}

#nappulat button {
    background-color: black;
    color: white;
    margin: 2px;
    border: 1px solid red;
    opacity: 0.9;
}
*/
.tooltip {
  display: inline-block;
  position: relative;
  margin: 5px;
  padding: 5px;}

.tooltip .tooltiptext {
  opacity: 1.0;
  background-color: white;
  visibility: hidden;
  border-radius: 2px;
  border: 1px solid;
  position: absolute;
  top:2em;
  left: 0;
  margin: 5px;
  padding: 5px;
  max-width: 30em;
  z-index: 10;
}

p.popup {
  margin: 5px;
  padding: 5px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

select {
  /*background-color: var(--valikko);
  margin: 4px;
  padding: 4px;
  */
    background-color: 'hsl(55, 80%, 81%);
    margin: 4px;
    padding: 4px;
    font-size: 1.25rem;
}


/*
 . *option {
 font-size: 150%;
 } * style={
        'margin': '4px', 'padding': '4px',
        'background-color': 'hsla(53, 100%, 80%, 1)'}
        */
button {
  background-color: var(--valikko);
  margin: 4px;
  padding: 6px;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 110%;
  font-weight: bold;
}

span {
  padding: 0.5em;
}