footer{ background-color: #212529; } footer h3, footer h2, footer p{ color:rgb(252, 250, 241); } .btn1 { font-family: koodak; font-size: 1.25rem; background: transparent; border: none; padding: 0.5em 0; color: rgb(248, 248, 248); position: relative; transition: 0.5s ease; cursor: pointer; } .btn1::before { content: ""; position: absolute; right: 0; bottom: 0; height: 3px; width: 0; background-color: rgb(230, 179, 30); transition: 0.5s ease; } .btn1:hover::before { width: 100%; } .baba{ position: relative; width: 45px; height: 45px; border-radius: 25px; } .glass , .rangi{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .glass{ border-radius: 25px; background: rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; justify-content: center; align-items: center; } .rangi{ transition: 0.5s; border-radius: 18px; width: 45px; height: 45px; background-color: rgb(179, 146, 49);} .baba:hover .rangi{ transform: rotate(30deg); transform-origin: bottom; } .baba:hover .tele{ transform: rotate(0)!important; } .baba:hover{cursor: pointer; } .baba-date:hover .rangi{ transform: translatey(90%); transform-origin: bottom; } .baba-date,.rangi-date{width: 100%;} .baba-date{color:rgb(248, 248, 248)} .rangi-date{display: flex; justify-content: center; align-items: center; text-align: center;}