@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body p, input{
    transition: 2s ease-in-out;
}
body p:hover{
  transform: translateY(-10px);
  text-shadow: 2px 4px 5px white;
}
body input:hover{
    box-shadow: 2px 5px 7px white;
}
body button{
    transition: 0.5s ease-in-out;
}
body button:active{
    transform: scale(0.7);
}
body p{
    font-family: 'Roboto';
}
.nobar{
    display: flex;
    justify-content: space-evenly;
    padding-top: 40px;
    color: white;
    background-color: black;
    width: 100%;
    height: 100px;
    .in{
        position: relative;
             input{
        width: 300px;
        height: 40px;
        border: none;
        border-radius: 25px;
             }
             i{
                position: absolute;
                color: black;
                top: 13px;
                right: 10px;
             }
    }
}
.main{
    height: 891px;
    width: 100%;
    background-image: url(./img/images.webp);
    background-size: cover;
    position: relative;
    .twostuff{
        position: absolute;
        display: flex;
        gap: 20px;
        top: 380px;
        left: 700px;
        .b1{
         width: 200px;
         height: 90px;
         font-size: large;
         color: white;
         background-color: red;
         border: none;
         border-radius: 15px;
        }
        .b2{
             width: 200px;
         height: 90px;
         font-size: large;
         color: white;
         border-color: red;
         border-radius: 15px;
         background-color: rgba(255, 255, 255, 0);
        }
    }
    .avatary{
        color: white;
        position: absolute;
        top: 500px;
        left: 200px;
    }
}

.box {
  padding: 60px;
  max-width: 800px;
  animation: moveUp 1s ease-out forwards;
}

@keyframes moveUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

h1 {
  font-size: 45px;
  margin: 0 0 15px 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.tagy {
  background: #fff;
  color: #000000;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 13px;
  transition: 0.3s;
}

.tagy:hover {
  background: #ff0000;
  color: #fff;
  transform: translateY(-3px);
}

.infoy {
  font-size: 14px;
  opacity: 0.8;
}

.avatary p {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 35px;
  color: white;
  width: 500px;
}

.circles {
  display: flex;
  gap: 8px;
}

.circle {
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.4;
}

.circle.longy {
  width: 45px;
  border-radius: 10px;
  background: #ff0000;
  opacity: 1;
}