body {
  background-image: url("/rehaul/petz/farm.png");
  background-repeat:no-repeat;
     background-size: 100% 100%;
     min-height: 150vh;
       overflow-y: hidden;
  color: black;
    font-family: "levi";
}
@font-face {
  font-family: "levi";
  src: url("/rehaul/leviwindows.ttf") format("truetype");
}
.flex {
  display: flex;
            justify-content: center;
            align-items: center;
             flex-wrap: wrap;
  gap: 8vh; 
  width: 100%;
  height: 100%;
}
.bigcontainer {
  padding: 10px;
  height: 60vh; 
  overflow: hidden; 
  background-color:  #b5b5b5;
  width: 55vw;
  justify-content: center;
  align-items: center; 
  left: 60px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.title {
font-size:   45px;
width: 100%;
text-align: center;
padding: 15px;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 25%;
  padding: 6px;
  gap: 10px;
  box-shadow: 5px 5px black; 
  border: 1px solid black;
  height: 95%;
}
.click {
 width: 60%;
 height:70px;
 border: 1px solid black;
 text-align: center;
 box-shadow: 5px 5px black;
 background-color:   #b5b5b5;
 font-size: 17px;

}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 65%;
  padding: 6px;
  gap: 10px;
  box-shadow: 5px 5px black; 
  border: 1px solid black;
  text-align: center;
    height: 95%;
}
button:active{
    background: #b5b5b5;;
}

button:focus{
    background: #919191;
}

.petholder {
  
height: auto;
display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
 width: 90%; 
  
}
.petholder p {
  
  width: 100%;
  text-align: center;
  
  
}
.petbox {
  border: 1px solid black;
   box-shadow: 5px 5px black;  
  background-color: #e8e8e8;
display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  
}