* {box-sizing: border-box;margin: 0px 0px;padding:0px 0px;}
/*clip*/
@keyframes myfirst {
  0%   {top:200px; opacity:0;}
  100% {top:0px; opacity:1;}
}

@keyframes myfirst2 {
  0%   {padding: 26.5vh 0vh 35vh 0vh;color: #666666;}
  100% {padding: 0vh 0vh;color: #222222;}
}

@keyframes enlarge {
from {padding: 0px 25px;}
to {padding: 20px 25px;}
}

body {font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
  border-radius: 1em;
  /*add*/ padding: 30px 30px;
  /*animation: myfirst 1.2s ease-in-out 0s 1 forwards;*/
    animation: myfirst 0.1s ease-in-out 0s 1 forwards;
}
h1 {
color: #666666;
padding: 26.5vh 0vh 35vh 0vh;
margin: 6vh 0vh 17.5vh 0vh;
/*animation: myfirst2 0.7s ease-out 1.5s 1 forwards;*/
animation: myfirst2 0.1s ease-out 0.1s 1 forwards;

}
h2{padding:0px 0px:}
.topnav a {
  float: left;
  display: flex;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 25px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
  float: right;
}
/*clip*/
[id*="background"] {
  position: absolute;

}
#background {
  background: url(wavy-navy.jpg);
  background-repeat: repeat;
  background-color: #458799;
}
.blockage{display:block;
margin:auto auto;
width:50%}
.container {
  height: 300px;
  overflow: auto;
  display: flex;
  margin: auto auto;
  flex-direction: column-reverse;

} 
table {
background-color: #CBCBCB;
border-collapse: collapse;
border-radius:0.2em;
width:100%;
}
table, td, tr {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
p {text-indent:20px;
padding:0.8vw 0.5vh;
font-size:1em;}
th>p
{font-size:24px;}
form{width:100%;font-size: 24px;    display: flex;
    align-items: center;
   }

    input[type="text"] {
        padding: 0.75rem;
        font-family: Tahoma, sans-serif;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 0.3em;
    }

    input[type="submit"] {
    max-width:100px;
      float: right;
  margin-left: 40px;
        padding: 0.75rem;
        font-size: 1rem;
     background-color: #010101;
        color: white;
        border: none;
        border-radius: 1.2em;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    input[type="submit"]:hover {
        background-color: #6a042d;
    }

/*if mobile*/
@media screen and (max-width: 600px) {
.container{height:auto;
min-height:500px;}
form{width:100%;font-size: 15px;}
    input[type="text"] {
        padding: 0.75rem;
 
        margin:0px 10px;
    }
    input[type="submit"] {
    max-width:100px;
      float: right;
  margin-left: 0px;
        font-size: 1rem;
    }
  
.topnav {padding: 10px 10px;}
}

@media screen and (max-width: 1200px) {
.container{height:auto;
min-height:400px;}
.blockage{
width:100%}
h2{padding:50px 50px:}
table {
background-color: #CBCBCB;
border-collapse: collapse;
border-radius:0.2em;
width:100%;
}
input[type="submit"] {
max-width:140px;
width:100%;
}
input[type="text"] {width:100%;}
.topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
h1 {padding:40vh 0vh;}
@keyframes myfirst2 {
  0%   {padding: 40vh 0vh;color: #555555;}
  100% {padding: 0vh 0vh;color: #121212;}
}
}

@media screen and (max-width: 1200px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
}