body {
  background-image: url("/photos/fluctuatingflower.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  opacity: 0.6;
}

h1 {
  color: white;
  font-family: helvetica, arial;
  font-size: 2.5vw;
  text-shadow: 2px 2px 5px thistle;
  text-align: center;
  text-decoration: underline thistle dotted;
}

h3 {
  color: white;
  font-family: helvetica, arial;
  font-size: 1.1vw;
  text-shadow: 2px 2px 5px thistle;
  text-align: center;
}

h4 {
  color: white;
  font-family: helvetica, arial;
  font-size: 0.9vw;
  text-shadow: 2px 2px 5px thistle;
  text-align: center;
}

p {
  color: white;
  text-align: center;
  font-family: helvetica, arial;
  text-shadow: 2px 2px 5px thistle;
  font-size: 0.9vw;
}

a {
  color: LemonChiffon;
  text-shadow: 2px 2px 5px thistle;
  transition: text-shadow 0.5s;
}

a:hover {
  text-shadow: 10px 10px 50px thistle;
}

a:visited {
  color: thistle;
}

div {
  
  border-radius: 25px;
  width: 95%;
  text-align: center;
  border: 5px ridge;
  background-color: rgba(255, 255, 255, 0.25);
  margin: auto;
  box-shadow: 2px 2px 10px thistle;
}
img {
  display: block;
  margin: auto;
  opacity: 0.8;
  max-width: 45vw;
  height: auto;
  border-radius: 4px;
  transition: opacity 0.5s;
}

img:hover {
 opacity:1.0;
}

iframe {
  max-width: 20vw;
  height: 9vw;
  border-style: outset;
  border-color: gray;
  opacity: 0.8;
  transition: opacity 0.5s, height 0.5s, width 0.5s;
}

iframe:hover {
  width: 35vw;
  height: 13vw;
  border-color: black;
  opacity: 1.0;

}

button {
  width:4vw;
  height:1vw;
}
audio {
  width:18vw;
  height:18vw;
}

/* fix responsiveness */