body{
    cursor: url(/intro/bat-removebg-preview.png), auto;
    background-color: rgb(237, 229, 218);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url(food040.jpg);
    font-family: 'Times New Roman', Times, serif;
    color: #600914;
    transform: scale(0.82);
    height: 165vh;
}

.big-container {
  display: grid;
  grid-template-areas:
    "big big"
    "small1 small2"
    "dynamic dynamic";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  max-width: 1000px;
  gap: 15px;
  height: auto;
  filter: drop-shadow(4px 4px 4px rgb(41, 39, 39));
}

.big-container section{
    background-image: url(descargar\ \(16\).jpg);
    border: 6px solid rgb(141, 15, 15);
    border-radius: 8px;
}

.banner{
  background-image: url(11883914d3ce7000753525b97d566136.jpg);
}

.big {
  position: relative;
  grid-area: big;
  padding: 20px;
}

.small1 {
  grid-area: small1;
  padding: 20px;
}

.small2 {
  grid-area: small2;
  padding: 20px;
}

.dynamic {
  grid-area: dynamic;
  padding: 20px;
}

.yellow{
    background-color: rgb(254, 244, 202);
    border: 6px double #750f1c;
    border-radius: 8px;
    filter: drop-shadow(2px 2px 2px rgb(46, 0, 0));
    position: relative;
    overflow-y: auto;
    scrollbar-width: none; 
}

.container{
    background-color: rgb(254, 244, 202);
    border: 6px double #750f1c;
    border-radius: 8px;
    filter: drop-shadow(2px 2px 2px rgb(46, 0, 0));
    position: relative;
    overflow-y: auto;
    scrollbar-width: none;
    display: none;    
}

.container.active{
  background-color: rgb(254, 244, 202);
  border: 6px double #750f1c;
  border-radius: 8px;
  filter: drop-shadow(2px 2px 2px rgb(46, 0, 0));
  position: relative;
  overflow-y: auto;
  scrollbar-width: none;
  display: block;
}

.box{
  height: 300px;
  width: 210px;
  border: 3px double #c33636;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.photo{
  height: 250px;
  width: 250px;
  border: 3px double #c33636;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.result{
  height: 200px;
  width: 400px;
  border: 3px double #c33636;
  border-radius: 8px;

}
.buttons {
  margin-bottom: 10px;
}

button {
  margin-right: 5px;
  padding: 8px 12px;
  cursor: pointer;
  border: 3px dashed rgb(141, 15, 15);
  border-radius: 8px;
  background-color: #c33636;
  color: rgb(255, 225, 229);
  font-family: 'Times New Roman', Times, serif;
  font-size-adjust: 0.6

}

.banner{
    background-image:url(11883914d3ce7000753525b97d566136.jpg);
    position: relative;
    height: 70px;
    font-size-adjust: 2;
    font-weight: bold;
}

.mini-box{
    background-color: #c33636;
    border: 6px double rgb(141, 15, 15);;
    border-radius: 8px;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size-adjust: 0.7;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: grid;
  color: rgb(255, 195, 203);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #75091a;}

ul.topnav li .active {background-color: #881123;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {
  ul.topnav li.right, 
  ul.topnav li {float: none;}
}

@media (max-width: 1000px) {
    .big-container {
      flex: 1 1 100%;
    }
  }