html { 
  background: url(images/cropped_whitecloud.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size:25px;
}
.screenreader {
width:100%;
}
.visually_hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}
p {
font-size: 25px;
}
div.page {
width:100%;
height: 100%;
}
div.instruct {
width: 100%;
height: auto;
background: #B22222;
border: 4px solid #FFFF00;
text-align:center;
color: #ffffff;
}
div.instruct a {
color: #ffffff;
}
div.form {
width: 70%;
height: auto;
margin-left:auto;
margin-right:auto;
margin-top:2%;
border: 15px solid #B22222;
padding-left: 2%;
padding-right:2%;
}
h1 {
text-align:center;
color: #B22222;
}
/* home page */
div.flowerleft {
width: auto;
height:auto;
float:left;
margin-left: 20%;
}
div.flowerleft img {
width: 120px;
height:auto;
}
div.flowerright {
width: auto;
height:auto;
float:right;
margin-right: 20%;
}
div.flowerright img {
width: 120px;
height:auto;
}
/* story page */
div.toptext {
width: 95%;
height:auto;
margin-left:auto;
margin-right:auto;
}
div.toptext p {
padding-left: 0%;
padding-right: 0%;
}
div.lefttext {
width: 75%;
height:auto;
float:left;
}
div.lefttext p {
padding-left: 3%;
}
div.vid {
width: 23%;
height:auto;
float:left;
}
div.vid p {
text-align:center;
}
div.vid img {
max-width:100%;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
}
div.vidbox {
width: 30%;
height: auto;
float: right;
margin-top:2%;
}
div.vidboxes {
width: 48%;
height:auto;
float:left;
}
video {
width: 100%;
height: auto;
}
div.top {
width: 45%;
height: auto;
margin-top: 0%;
margin-bottom:0%;
margin-left:auto;
margin-right:auto;
padding:0;
font-size: 35px;
color: #B22222;
text-align:center;
}
div.ltent {
width:auto;
height:auto;
float:left;
}
div.ltent img {
max-width:100%;
height:auto;
display:block;
}
div.rtent {
width:auto;
height:auto;
float:right;
}
div.rtent img {
max-width:100%;height:auto;
display:block;
}
div.menubox {
width: 90%;
height: auto;
margin-left:auto;
margin-right:auto;
margin-top: 0%;
padding:0;
}
div.menubox a {
color: #B22222;
}
/* end of home page */
div.topleft {
width: 52%;
height: auto;
float:left;
margin-top: 5%;
}
div.topleft a {
color: #B22222;
}
div.head {
width: 100%;
height:auto;
padding:0;
}
div.head h1 {
text-align:center;
color: #B22222;
}
div.midleft {
width: 30%;
height:auto;
margin-left: 1%;
float:left;
text-align:center;
}
div.midleft img {
max-width: 100%; 
height:auto; 
display:block; 
margin-left:auto; 
margin-right:auto;
}
div.midmid {
width:30%;
height:auto;
margin-left: 4%;
float:left;
text-align:center;
}
div.midmid img {
max-width: 100%; 
height:auto; 
display:block; 
margin-left:auto; 
margin-right:auto;
}
div.midright {
width:30%;
height:auto;
margin-left: 4%;
float:left;
text-align:center;
}
div.midright img {
max-width: 100%; 
height:auto; 
display:block; 
margin-left:auto; 
margin-right:auto;
}
div.rightpic {
width: 45%;
height:auto;
float:left;
}
div.rightpic img {
max-width:100%;
height:auto;
float:left;
}
div.clear {
clear:both;
}

/* songs page*/
div.text {
width: 50%;
height:auto;
margin-left:auto;
margin-right:auto;
}
div.text a {
color: #B22222;
}
div.table {
width: 100%;
height:auto;
margin-top: 3%;
}
table {
border-spacing: 0px;
border-collapse: separate;
}
th {
font-size: 25px;
text-align:center;
}
td {
font-size: 25px;
text-align:center;
}
button {
font-size: 25px;
}
/* all songs page*/
div.albuttonbox {
width:auto;
height:auto;
float:left;
margin-top: 15%;
}
div.audiobox {
width: 20%;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top: 150px;
}
/* photos page */
div.pttop {
width:70%;
height:auto;
float:left;
margin-left: 3%;
}
div.pttop a {
color: #B22222;
}
div.head {
width: 100%;
height:auto;
}
div.head h1 {
text-align:center;
color: #B22222;
}
div.ptrightpic {
width: 95%;
height:auto;
margin-top:3%;
margin-left:auto;
margin-right:auto;
}
div.ptrightpic img {
max-width:100%;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
}
div.buttonbox {
width:auto;
height:auto;
float:right;
margin-right: 20%;
margin-top: 5%;
}
button {
color:#B22222;
font-size: 35px;
}
details {
  user-select: none;
}
details>summary span.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s;
  margin-left: 1%;
}
details[open] summary span.icon {
  transform: rotate(180deg);
}
summary {
  display: flex;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
div.box {
width:100%;
height:auto;
float:left;
margin-left: 5%;
}
div.story {
width: 70%;
height:auto;
border: 15px solid #B22222;
margin-left:auto;
margin-right:auto;
}
div.stext {
width: 60%;
height:auto;
float:left;
}
div.stext p {
padding-left: 2%;
padding-right:2%;
}
div.onstext {
width: 100%;
height:auto;
}
div.onstext p {
padding-left:2%;
padding-right:2%;
}
div.onstext a {
color: #B22222;
}
div.thanks {
width: 50%;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
padding-top: 2%;
padding-bottom: 2%;
border: 15px solid #B22222;
}


@media screen and (max-width: 1000px) {
div.topleft {
width: 100%;
height: auto;
text-align:center;
}
div.rightpic {
width: 100%;
height:auto;
margin-top: 2%;
}
div.rightpic img {
max-width: 100px;
height: auto;
display: block;
margin-left: 30%;
}
div.flowerleft {
width: auto;
height:auto;
float:left;
margin-left: 5%;
}
div.flowerleft img {
max-width: 100px;
height:auto;
}
div.flowerright {
width: auto;
height:auto;
float:right;
margin-right: 5%;
}
div.flowerright img {
max-width: 100px;
height:auto;
}
div.top {
width: 100%;
height: auto;
margin-top: 20%;
font-size: 25px;
color: #B22222;
text-align:center;
}
div.ltent {
width:auto;
height:auto;
float:left;
}
div.ltent img {
max-width:75px;
height:auto;
display:block;
}
div.rtent {
width:auto;
height:auto;
float:right;
}
div.rtent img {
max-width:75px;
display:block;
}
div.menubox {
width: 100%;
height: auto;
margin-top: 20%;
}
div.midleft {
width: 30%;
height:auto;
margin-left: 1%;
float:left;
font-size: 25px;
text-align:center;
}
div.midleft img {
display:block;
margin-left:auto;
margin-right:auto;
}
div.midmid {
width:30%;
height:auto;
margin-left: 1%;
float:left;
font-size: 25px;
text-align:center;
}
div.midmid img {
display:block;
margin-left:auto;
margin-right:auto;
}
div.midright {
width:30%;
height:auto;
margin-left: 1%;
float:left;
font-size: 25px;
text-align:center;
}
div.midright img {
display:block;
margin-left:auto;
margin-right:auto;
}
div.story {
width: 95%;
height:auto;
border: 5px solid #B22222;
margin-left:auto;
margin-right:auto;
}
div.text {
width: 95%;
height:auto;
margin-left:auto;
margin-right:auto;
}
div.stext {
width: 95%;
height:auto;
margin-left:auto;
margin-right:auto;
}
div.vidbox {
width: 95%;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:2%;
}
div.table {
width: 100%;
height:auto;
margin-top: 6%;
}
table {
border-spacing: 0px;
border-collapse: separate;
}
th {
font-size: 20px;
text-align:center;
}
td {
font-size: 20px;
text-align:center;
}
button {
font-size: 20px;
}
}