*{
    scroll-behavior: smooth;
}
nav{
    display:flex;
    width:100%;
    align-items: center;
    padding:0px 10px;
    background-color: rgb(131, 136, 131);
    color: rgb(58, 14, 14);
}
nav ul{
    display: flex;
    gap:20px;
    list-style-type: none;


}
.logo{
    margin-right:auto;

}
.hello{
    margin-left:auto;
    display: flex;
    gap:20px;
    padding:20px;
    justify-content:end;
    align-items: center;
}
.hi{
    font-size: larger;
    color: rgb(154, 170, 170);
    font-family:CURSIVE;
}
.he{
    font-size: larger;
    color: rgb(81, 87, 99);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
    margin:3% 10%;
}
.ho{
display: flex;

}
.A{
    display: grid;
    grid-template-columns:2;
    gap:20px;
   display: flex;
   color: rgb(148, 71, 42);
} 
.d{
    display:flex;
    flex-direction: column;
    align-items: end;
    width:100%;
    color: sienna;
}
.hover-button{
    background-color: rgb(84, 123, 129);
    color: rgb(194, 166, 166);
    padding:6px 14px;
    border:solid 3px;
    border-color: rgb(233, 138, 121);
    border-radius:10px;
    cursor:pointer;
    animation-name:luxury;
    animation-duration:5s;
    animation-iteration-count: infinite;
    padding:10px;
    gap:20px;
}
@keyframes luxury{
    0%{
        margin-right: 20%;
        margin-left: 20%;
    }
    50%{
        height:30px;
    }
}
.hover-button:hover{
 background-color: rgb(43, 89, 117);
}
.button{
    background-color: rgb(42, 160, 160);
    color: rgb(0, 14, 14);
    padding:6px 14px;
    border:solid 3px;
    border-color: cadetblue;
    justify-content: center;
    border-radius:20px;
    margin-right: auto;
    cursor: pointer;
    animation-name:itirkaa;
    animation-duration:5s;
    animation-iteration-count: infinite;
}
@keyframes itirkaa{
    0%{
        margin-right: 20%;;
        margin-left:20% ;
    }
    50%{
        height:30px;
    }
}
.button:hover{
    background-color: rgb(181, 181, 211);
}
.haina{
    color: #162b50;
}
.hora{
    width:300px;
    height:200px;
    font-family: cursive;
    color: rgb(15, 3, 9);
}
.hola{
    color:#162b50;
}
.yh{
    width:300px;
    height:200px;
    font-family: cursive;
    color: rgb(14, 12, 13);
}
.eh{
    color: #162b50;
}
.ehh{
    width:300px;
    height:200px;
    font-family: cursive;
    color: black;
}
.text-cont{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.yhh{
    color: #14233f;
}
.yhhh{
    width:300px;
    height:100px;
    font-family: cursive;
    color: black;
}
.at{
    color: #162b50;
}
.AT{
    width:300px;
    height:100px;
    font-family: cursive;
    color: rgb(12, 1, 6);
}
.hehe{
    color: #162b50
}
.haha{
    width:300px;
    height:100px;
    font-family: cursive;
    color: rgb(8, 2, 4);
}
.c{
    color: rgb(165, 79, 48);
}

.e{
    color: rgb(165, 79, 48);
}
.b{
    display: flex;
    justify-content: center;
    gap:30px;
    align-items: center;

}
.car{
    width: 350px;
    height: 50px;
}
.f{
    color: rgb(165, 79, 48);
}
.god{
    display: flex;
    gap:20px;
    justify-content: center;
    width:100%;
}
.g{
  margin-right: auto;
    color:#80376a;
    display: flex;
    flex-direction:column;
    gap:30px;
    width:50%;
}
.h{
     color: rgb(6, 85, 23);
    }
.i{
      color: rgb(16, 70, 16);
    }
.j{
    color:rgb(22, 85, 22);

}
.g h1{
    text-align: center;
}
.odd h1{
    text-align: center;
    color: #80376a;
}
.odd{
    width:50%;
    display:flex;
    flex-direction: column;
    gap:30px;
}
.k{
    color: rgb(24, 88, 24);
}
.l{
    color: rgb(4, 80, 4);
}
.m{
    color: rgb(2, 85, 2);
}
.n{
    color: darkred;
    font-family: cursive;
    font-size: larger;
    text-align: center;
}
.o{
    display: flex;
    justify-content: end;
}
.p{
  width:100%;
  align-items: center;
   display:flex;
  color: rgb(171, 148, 224);
  padding:0px 10px;
  background-color: rgb(60, 12, 172);
}
.q{
    display: flex;
    gap:20px;
list-style:none;
    justify-content: center;
}
.r{
    text-align: center;
    font-family: cursive;
    color: rgb(16, 73, 126);
    font-size: larger;
}
.s{
    display: flex;
    align-items: center;
    gap:30px;
    justify-content: center;
    color: darkred;
}