* {
  margin: 0px;
  padding: 0px;
  background-color: #f9f3ec;
  color: #333;
  font-family: "DynaPuff", system-ui;
}
#slider {
  margin-top: 3rem;
  margin-bottom: 8rem;
}
marquee {
  margin-top: 2rem;
  font-size: 2rem;
  color: #333;
}
#nav{
  width: 100%;
 height: 70px;
 background-color: #d4a373;
 text-align: center;

 
  
}
.profile{
  display: inline-block;
position: absolute;
left: 5px;
  background-color: #d4a373;
  
}
#pro{
background-color: #d4a373;
}
.profile:hover{
  border:3px solid #fff ;
}

.ul{
  display: inline;
   background-color: #d4a373;
}
.li{
margin-top: 1%;
  display: inline-block;
  padding-right: 20px;
  padding-left: 20px;
  padding-top:10px;
   background-color: #d4a373;
}
.li:hover{
  border: 3px solid #fff;
}
ul>li>a{
  background-color: #d4a373;
  text-decoration: none;
  font-size: 25px;
}

#iframe{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

iframe{
width: 41%;
margin-top: 10%;
}
#messages-for {

  font-size: 2rem;
  width: fit-content;
  margin: 0 auto;
  border-bottom: 4px solid #d4a373;

 
}


.problem{
  font-size: 32px;
position: relative;
top: 45px;
  text-decoration: none;
  
}
#three{
  width: 100%;
margin: 0 auto;
text-align: center;
  margin-top: 32px;
  
}

#friends,
#family,
#life {
margin-top: 3%;
  width: 200px;
  height: 150px;
  border: 2px solid #d4a373;
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 20px;
  text-align: center;
}
#life:hover {
  border: 5px solid #d4a373;

  box-shadow: 2px 2px 20px gray;
}
#friends:hover {
  border: 5px solid #d4a373;

  box-shadow: 2px 2px 20px gray;
}
#family:hover {
  border: 5px solid #d4a373;

  box-shadow: 2px 2px 20px gray;
}

#rates {
  text-align: center;
  width: fit-content;
  border-bottom: 5px solid #d4a373;
  margin: 0 auto;
   margin-bottom: 32px;
}

#animals {
  width: 100%;
 
  margin: 0 auto;
  text-align: center;
}
img {
  border-radius: 90px;
}
#camel,
#goat,
#cow {
  width: 200px;
  height: 150px;
  display: inline-block;
 margin-top: 3%;
  margin-left: 20px;
  margin-right: 20px;
  border: 2px solid #d4a373;
  border-radius: 20px;
  text-align: center;
}
.images {
  width: 150px;
  height: 120px;

  margin-top: 15px;
}

#camel:hover {
  border: 5px solid #d4a373;
  cursor: help;
  box-shadow: 2px 2px 20px gray;
}
#goat:hover {
  border: 5px solid #d4a373;

  box-shadow: 2px 2px 20px gray;
}
#cow:hover {
  border: 5px solid #d4a373;

  box-shadow: 2px 2px 20px gray;
}
#book{
 background-color: #d4a373; 
  color: #fff;
  width: fit-content;
  height: fit-content;
  padding: 15px;
  margin: 5% auto;
  font-size: 25px;
  border-radius: 10px;
  border: 2px solid #d4a373;
  font-weight: bold;
}
.book{background-color: #d4a373; 
  color: #fff;
  text-decoration: none;
}
#book:hover{
border: 5px solid #b57f56;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
}

#footer{
  
  width: 100%;
height: 20%;
    background-color: #b57f56;
  text-align: center;
  padding-bottom: 30px;

}
#f-p{
padding-top: 30px;
}
p{color: #fff;
 
  font-size: 20px;
  background-color: #b57f56;
}
#icons{
text-align: right;
 background-color: #b57f56;
}
#git{
  width: 50px;
  height: 50px;
  border-radius:100% ;
    
}
#youtube{
   width: 50px;
  height: fit-content;
  border-radius:100% ;
   background-color: #b57f56;
}
#facebook{
   width: 50px;
   height: 50px;
  border-radius:100% ;
   
}
.anchor{
   background-color: #b57f56;
}
#poet {
  width: 100%;
 text-align: center;
  font-size: 23px;
  border-radius: 30px;
}
#IK{
 
  line-height: 90px;
  word-spacing: 4px;
  letter-spacing: 1PX;
}
#STAT{
 
  font-size: 40px;
   word-spacing: 4px;
  letter-spacing: 1PX;
}



@media (max-width:700px){

  ul>li>a{
    font-size: 12px;
    margin-right: 0px;
  }
  .li{

     padding-right: 5px;
  padding-left: 5px;
  

  }
 .ul{
  width: 80%;
  margin: 0 auto;
  margin-right: 7%;
 }
}