body {
  margin: 0;
  padding: 0;
  background-color: #0f47af;
}


a {
  font-family: 'Mina', sans-serif;
  color: rgb#000000 ;
  text-decoration: none;
}


.topnav li {
  background-color: rgb #000000;
  padding-top: 1.5vw;
  padding-bottom: 1.5vw;
  width: 33.00vw;
  float: left;
  text-align: center;
}



.topnav li:hover {
  background-color: rgb #000000;
}

nav {
  background-color: #da121a;
  overflow: hidden;
}

.icon {
  display: none;
  color:black;
}
.icon a {
  color:black;
  font-size: 8vw;
  margin-left: 1.5vw;
}

.topnav {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@media (max-width: 500px) {
  .topnav {
      display: none;
  }

  .icon {
      display: block;
  }

  .topnav.responsive {
      display: block;
  }

  .topnav.responsive li {
      clear: both;
      width: 100vw;
  }
  
  .responsive{
    width: 50%;
    height: auto;
    
  }
 
  }