@media only screen and (max-width: 500px) {
  
  .navbar a {
  color:white;
  text-decoration: none;
  padding-top: 4px;
  padding-bottom: 4px;
  display: flex;
  justify-content: center;
  text-align: center;
  }
  

  
  .header {
  background: black;
  text-align: center;
  padding: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
  
  .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width:100%;
  }
  
  .left{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  width:100%;
  margin-bottom: 1%;
  }
  
  .right{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  width:100%;
  margin-bottom: 1%;
  }
  
  .container2 {
  background:#240f5e;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  width:100%;
  margin-bottom: 1%;
  }
  
}

@media only screen and (min-width: 600px) {
  
  .header {
  background: black;
  text-align: center;
  padding: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
  
  .container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width:100%;
  }
  
    .left{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  }
  
  .right{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  }
  
  .container2 {
  background:#240f5e;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  }
  
}

@media only screen and (min-width: 768px) {
  
  .header {
  background: black;
  text-align: center;
  padding: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
  
  .container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width:100%;
  }
  
    .left{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  }
  
  .right{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  }
  
  .container2 {
  background:#240f5e;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  }
  
}

@media only screen and (min-width: 992px) {
  
  .header {
  background: black;
  text-align: center;
  padding: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
  
  .container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width:100%;
  }
  
    .left{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  }
  
  .right{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  }
  
  .container2 {
  background:#240f5e;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  }
  
}

@media only screen and (min-width: 1200px) {
  
  .header {
  background: black;
  text-align: center;
  padding: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
  
  .container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width:100%;
  }
  
  .left{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  }
  
  .right{
  color:white;
  border: 0px outset;
  text-align: center;
  font-size: 12px;
  background:#130d24;
  padding: 5px;
  border-radius: 10px;
  }
  
  .container2 {
  background:#240f5e;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  }
  
}