body {
  margin: 20;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.topnav {
width: 100%;
min-height: 100vh;
padding: 5 %;
background-imager: linear-gradient(rgba(0,8,51,0.9),(rgba(0,8,51,0.9)), url(images/background.jpg);
background-position: center;
backgroung-size: cover; 
display: flex;
align-items: center;
justify-content: center;
}

.search-bar{
width: 100%;
max-width: 700px;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
bsckdrop-filter: blur(4px) saturate(180%) ;
}

.search-bar input{
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color: #cac7ff;
}

::placeholder{
color: cac7ff;

.search-bar button img{
width: 10px;
}

.search-bar button{
border: 0;
border-radius: 50%;
width: 60px;
height: 60px;
background: #58629b;
cursor: pointer;
}

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  text-align: center;
}

p, li {
font: 1em times new roman, sans-serif, Arial;
}
h1 {
font: 2em times new roman, sans-serif, Arial;
}
h2 {
font: 1.5em times new roman, sans-serif, Arial;
}
h3 {
font: 1.25em times new roman, sans-serif, Arial;
}

a:link {
font-family: times new roman, sans-serif, Arial;
color: #FF9900;
text-decoration: underline;
}
a:visited {
color: #551A8B;
}
a:hover {
background: #0000EE;
font-weight: bold;
}

.footer {
font-size: 0.80em;
clear: both;
width: 80%;
text-align: center;
}