.container{
  display:flex;
  background-color:#FFD400;
  padding: 12px 24px;
  justify-content:space-between;
  font-family: Arial, Helvetica, sans-serif;
}

img{
  float:left;
}

main{
  display:flex;
  text-align: right;
  gap:32px;
  padding:25px;
  flex-direction: row;
}

.Item1{
  border:solid;
  border-width:thin;
  padding:10px;
  max-width:800px;
  font-family: Arial, Helvetica, sans-serif;
}

p{
  max-width:800px;
}


.Item2{
  border:solid;
  border-width:thin;
  padding:10px;
  max-width:600px;
  font-family: Arial, Helvetica, sans-serif;
}

.Item3{
  border:solid;
  border-width:thin;
  padding:10px;
  max-width:600px;
  font-family: Arial, Helvetica, sans-serif;
}

span{
  background-color:#F96C00;
  padding:10px;
  border-radius:25px;
}

span:hover{
  background-color: yellow;
  font-size: 18px;
}

@media (min-width:600px){
  .bar-nav{
    display:flex;
    gap:30px;
  }
  main{
    display:flex;
    flex-wrap:wrap;
  }
}

.bar-nav{
  display: none;
}

.bar-nav li{
  padding: 5px 15px;
  border-radius: 10px;
}

.drop-nav{
  background-color: #FFD400;
  position: fixed;
  top: -300;
  width: 100%;
  padding: 10px 50px;
  transition: all .5s;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
  list-style: none;
}

.opened{
  display: block;
  top: 60;
}