html {
  position: fixed;
  height: 100%;
  width: 100%;
  bottom: 0%;
  right: 0%;


}

body{
  width: 100%;
  height: 100%;
  background-color: rgb(136, 132, 125);
  margin: 0;
}

.maincontent {

  position: absolute;
  height: 100%;
  width: 100%;
  right: 0%;
  bottom: 0%;
  overflow-y: scroll;
  padding: 0em;
  background-color: rgba(220, 211, 211, 0.9);
  display: flex;              /* ✅ */
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */
}

 fieldset:first-child {
  width: 30%;
  padding: 2%;
  padding: 2%;
  margin: auto;
}


fieldset:first-child {
  width: 60%;
  padding: 2%;
  margin: auto;
}


div.form {
  overflow: hidden;
}
li.div {
  list-style-type: none;
}


.photothumbnail {

  height: 189px;
  width: 241px;
  display: flex;              /* ✅ */
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */ 
}
.tooltip {
  position: relative;
  display: inline-block;
  display: grid;
  justify-content: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 60%;
  /* height: 20%; */
  background-color: rgba(0, 0, 0, 0.664);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 35%;
  right: 20%;
}


.back {
  position: fixed;
  bottom: 20%;
  left: 15%;
  font-size: 1em;
  visibility: visible;
  z-index: 2;
}
.next {
  position: fixed;
  bottom: 20%;
  right: 15%;
  font-size: 1em;
  visibility: visible;
  z-index: 2;
}

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


fieldset {
  border: 1px dotted green;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background-color: rgba(243, 236, 236, 0.4);
  /* padding-top: 3em; */
}
legend {
  color: rgba(25, 98, 194, 0.356);
  font-size: 1.5em;
  z-index: 1.5;
  font-family: "Brush Script MT", "Lucida Console", Monaco, monospace;
}




/* https://stackoverflow.com/questions/9980531/center-image-in-div-horizontally */
.displayimage {
  width: 700px;
  max-height: 600px;
  overflow-y: scroll;
  display: block;
  margin: auto auto;
  /* margin-right: auto; */
}


.closeWindow {
  position: fixed;
  top: 12%;
  right: 2%;
  width: 10%;
  height: 10%;
  z-index: 2;
  text-decoration: none;
}


.next,
.back {
  color: white;
  font-size: 1.5em;
  text-decoration: none;
  z-index: 1;
  font-family: "Brush Script MT", "Lucida Console", Monaco, monospace;
}


h1,
h2 {
  color: rgb(42, 97, 199);
}
.header {
  position: fixed;
  width: 100%;
  height: 7%;
  top: 0%;
  z-index: 1;
  display: flex;              /* ✅ */
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */

  background: linear-gradient(
    rgba(243, 236, 236, 0.9),
    rgba(243, 236, 236, 0.6)
  );
  background: -webkit-linear-gradient(
    rgba(243, 236, 236, 0.9),
    rgba(243, 236, 236, 0.6)
  );
    -webkit-box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.44);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.44);
  box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.44);
}
.headertitle {
  color: rgba(25, 98, 194, 0.356);
font-weight: bold;
font-size:xx-large;
  z-index: 1;
  font-family: "Brush Script MT", "Lucida Console", Monaco, monospace;
}


.footer {
 position: fixed;
 color: black;
  width: 100%;
  height: 7%;
  bottom: 0%;
  z-index: 1;

  display: flex;              /* ✅ */
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */


  background: linear-gradient(
    rgba(243, 236, 236, 0.9),
    rgba(243, 236, 236, 0.6)
  );
  background: -webkit-linear-gradient(
    rgba(243, 236, 236, 0.9),
    rgba(243, 236, 236, 0.6)
  );
  -webkit-box-shadow: 0px -5px 3px -2px rgba(0, 0, 0, 0.44);
  -moz-box-shadow: 0px -5px 3px -2px rgba(0, 0, 0, 0.44);
  box-shadow: 0px -5px 3px -2px rgba(0, 0, 0, 0.44);
}

.nav_ul{
    position: absolute;
    right: 10%;
}

p {
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 1em;
  padding-left: 2em;
  text-align: justify;
}

.grid-container {
  margin: auto;
  color: rgba(248, 245, 245, 0.89);
  display: grid;
  align-content: center;
  grid-template-columns: auto auto auto auto;
  grid-gap: 3em;
  padding-top: 3%;



}


label {
  color: #7f5f87;
  font-size: 1em;
  /*background-color: rgba(255, 255, 255, 0.4);*/
  border-radius: 1%;
}

button {
 
  border: 0.2em;
  border-color: white;
  border-radius: 40%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  -webkit-box-shadow: 0px 2px 2px 1px rgba(176, 165, 165, 0.44);
  -moz-box-shadow: 0px 2px 2px 1px rgba(134, 20, 20, 0.44);
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.44);

  cursor: pointer;
    background: linear-gradient(
    rgba(243, 236, 236, 0.3),
    rgba(243, 236, 236, 0.5)
  );
  background: -webkit-linear-gradient(
    rgba(243, 236, 236, 0.3),
    rgba(243, 236, 236, 0.5)
  );
}
button:hover {
  border: 0.2em;
  border-color: darkorchid;
  color: blue;
}
button:active {
  border: 0.2em;
  border-color: yellow;
  color: yellow;
}



a.deletebutton:active {
  border: 0.2em;
  border-color: #96ccba;
  color: rgb(236, 226, 81);
}
/* Style for form */



/* End Style for form */

#mobilemenuul {
  list-style-type: none;
}

#mobilemenu {
  display: none;
}
#menubutton {
  display: none;
}
.carousel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);


  display: flex;
  justify-content: center;
  align-items: center;
}

  #close-btn {
  position: absolute;
  color: white;
  top: 25%;
  right: 20%;
  
}
.item {
 
  padding: 0.5em 0;
  margin-right: 0.5em;
  margin-left: 0.5em;
  border-radius: 1%;
}


@media screen and (max-width: 800px) and (orientation: portrait) {
    .maincontent{
        height: 90%;
         padding-top: 2em;

    }
  
  .grid-container {
    color: rgba(248, 245, 245, 0.89);
    margin: auto;
    display: grid;
    align-content: center;
    grid-template-columns: auto;
    grid-gap: 1em;
    padding-top: 2em;

  }


}