body {
    background-image: linear-gradient(red, yellow, red, yellow);
    background-size: 100% 100vh ;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    cursor: default;
    text-align: center;
    background-attachment: fixed;
}

nav {
    background-color: gold;
    width: 100%;
    height: 100px;
    box-shadow: 0 5px 10px black ;
    border-bottom: 5px solid cyan ;
    position: fixed;
    z-index: 2;
}

#upperNav {
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#upperNav img {
    height: 100%;
}

#lowerNav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#lowerNav a {
    color: red;
    text-decoration: none;
    transition: 0.5s;
}

#lowerNav a:hover {
    color: yellow;
    background-color: red;
}

.dropbtn {
  background-image: linear-gradient(lightyellow, yellow, gold);
  color: white;
  padding: 16px;
  font-size: 32px;
  border: none;
  cursor: pointer;
  border-radius: 50% 50px ;
  box-shadow: 0 5px #555500 ;
  -webkit-text-stroke: 1px black;
}

.dropbtn:active {
  box-shadow: 0 2.5px #555500 ;
  transform: translateY(2.5px);
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightyellow;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  border-radius: 0 25px 25px 25px ;
  box-shadow: 5px 5px 10px black ;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: 0.5s;
}

.dropdown a:hover {background-color: #777700; color:lightyellow ;}

.show {display: block;}

#ri {
  background-color: yellow;
  color: red;
  border: 1px solid blue ;
  padding: 10px;
  margin: 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.5s;
}

#ri:hover {
  background-color: red;
  color: yellow;
  border: 5px solid blue ;
}

#lisu {
  padding: 0;
  border-radius: 25px;
}

#lisu button {
  margin:-4px ;
  padding: 10px;
  border: none;
}

#li {
  margin: 0;
  border-radius: 25px 0 0 25px ;
  background-color: gold;
  z-index: 2;
  color: white;
  cursor: pointer;
  transition: 0.5s;
}

#su {
  margin: 0;
  border-radius: 0 25px 25px 0 ;
  background-color: bisque;
  cursor: pointer;
  transition: 0.5s;
}

#li:hover {
  background-color: blue;
  color: black;
  transition: 0.5s;
}

#su:hover {
  background-color: teal;
  color: white;
  transition: 0.5s;
}

#liPopup {
  background-color: rgba(255, 255, 0, .5);
  padding: 10px;
  margin: 10px;
  box-shadow: 5px 5px rgba(255, 255, 0, .7) ;
  width: 50%;
  margin: auto;
  padding: 0;
  transition: 0.5s;
  display: none;
}

#liPopupNav {
  height: 50px;
  width: 100%;
  background-color: rgba(255, 255, 255, .5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#liPopup:hover {
  box-shadow: 10px 10px rgba(255, 255, 0, .7) ;
}

#close {
  height: 50px;
  width: 50px;
  background-image: linear-gradient(45deg, red, white, red, red);
  color: white;
  -webkit-text-stroke: 1px black ;
  font-size: 2rem;
  cursor: pointer;
}

#close:hover {
  background-image: linear-gradient(45deg, red, red, white, red);
}

#suPopup {
  background-color: rgba(255, 255, 0, .5);
  padding: 10px;
  margin: 10px;
  box-shadow: 5px 5px rgba(255, 255, 0, .7) ;
  width: 50%;
  margin: auto;
  padding: 0;
  transition: 0.5s;
  display: none;
}

#suPopup:hover {
  box-shadow: 10px 10px rgba(255, 255, 0, .7) ;
}

#mails, tr, th, td {
  border: 1px solid black ;
  background-color: lightgrey;
}

#mails {
  margin: 10px;
  margin: auto;
  display: none;
}

th, td {
  background-color: white;
  padding: 10px;
}

#mails a {
  color: maroon;
  text-decoration: none;
}

#mails a:hover {
  text-decoration: underline 1px solid maroon ;
}

#cai {
  display: none;
}