html,body{
      background-color: white;
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      top:0;
      
}

.container {
  flex: 1;
  display: block;
  padding: 20px;
  margin: 50px auto 0;
  width: 60%;
  background-color: rgb(133, 133, 176);
  border-radius: 10px;
}
button, input
{
      border-radius: 10px;
      background-color: rgb(67, 68, 107);
      border-style:outset;
      color: white;
      margin: 5px;
      font-size: large;
}
input 
{
      font-size: larger;
}
button:hover
{
      background-color: rgb(90, 92, 136);
}
button:active {
      background-color: #161616;
      box-shadow: 0 5px #343356;
      transform: translateY(2px);
    }
::placeholder
{
      color: rgb(214, 214, 214);
}
#form {
      margin: 100px;
      background: rgba(0, 0, 0, 0.15);
      padding: 0.25rem;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      height: 3rem;
      box-sizing: border-box;
      backdrop-filter: blur(10px);
}

#input,
#name {
      border: none;
      padding: 0 1rem;
      flex-grow: 1;
      border-radius: 2rem;
      margin: 0.25rem;
}

#input:focus {
      outline: none;
}

#form>button {
      background: #454674;
      border: none;
      padding: 0 1rem;
      margin: 0.25rem;
      border-radius: 3px;
      outline: none;
      color: #fff;
}

#messages {
      list-style-type: none;
      margin: 20px;
      padding-right: 50px;
      border-radius: 10px;
}

#messages>li {
      padding: 0.5rem 1rem;
      border-radius: 10px;
      background: #625c90;
      margin: 1px;
}

#messages>li:nth-child(odd) {
      background: #57587c;
      border-radius: 10px;
      margin: 5px;
}


.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Full screen height */
  flex: 1;
}

main {
  flex: 1;
}

footer{
      background-color:#343356;
      color: white;
      text-align: center;
      padding-top: 15px;
      width:100%;
      height:30px;
      font-weight: 500;
}
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #343356;
  color: white;
  text-align: center;
  padding-top: 10px;
  font-size: xx-large;
  font-weight: bolder;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  z-index: 1000;
}

body
{
      margin-top: 9%;
}

.img-zoom-container {
  position: relative;

  margin:auto;
}


.img-zoom-result {
  width: 250px;
  height: 250px;
  border-radius: 20px;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #262434;
  display: flex;            /* Makes <li> elements sit in a row */
 justify-content: center;
 max-height: 110%;
}


li {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  display: flex;   
  cursor: pointer;
}

/* Change the link color to #111 (black) on hover */
li:hover 
{
  background-color: #343356;
  font-size: 1.2em; /* increase text size */
}


#headerTitle
{
      display: block;
      color: white;
      text-align: center;
      text-decoration: none;
}




.container {
display: none;
padding: 20px;
}

.container.active {
display: block;
}


.txtB
{
      padding: 10px;
      font-size: large;
      font-weight: 200;
}