:root{
  --prim-col : #f3e37b;
  --sec-col : #fff;
  --form-col: #ffffff8e;
  --gradient: linear-gradient(to top right,#7ac600,#f3e37b);
}
*,*::after,
*::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body,
html {
  height: 100vh;
  width: 100%;
  background-color: var(--bg-color);
  line-height: 1.5;
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
}
.cryptact_social_container {
  min-height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background:  linear-gradient(to top,#000000,#000000c6,#00000099,#00cc3a72), url(https://images.unsplash.com/photo-1589560989620-61bf48e97abb?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-position: left;
  padding: 3rem 1rem;
}
a{
  text-decoration: none;
  color: #000;
}
.cryptact_profile {
  width: min(350px, 70%);
  display: block;
  margin: auto;
  border-radius: 100%;
}

.crypto_wrapper{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.crypto_title{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--prim-col);
}

.tag{
  white-space: nowrap;
  border-radius: 5px;
  padding: 0.2rem 0.5rem;
  font-weight: 600;
  border: 2px solid var(--prim-col);
}
.tag > *{
  color: var(--prim-col);
}
.crypto_tokens{
  width: 100%;

  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transform: translateX(80%);
  animation: slider 25s infinite linear;
}
.form{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background: var(--form-col);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  width:100%;
  padding: 1.5rem;
  box-shadow: 0 8px 8px #00000030;
}
.form > .field_wrapper > *:not(.submit_btn,.h-captcha){
  width: 100%;
  padding: 0.7rem 0.5rem;
  border-radius: 2px;
  font-size: clamp(20px,1.5rem,2vw);
  background: #ffffff5f;
  border: 1px solid #fff;
}
.field_wrapper{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.field_name{
  font-size:  clamp(21px,1.5rem,1.8vw);
  font-weight: 800;
}
.h-captcha{
  margin: auto;
}
.submit_btn,.go_home_btn{
  text-align: center;
  border: none;
  padding: 0.5rem;
  border-radius: 5px;
  width: min(300px , 70%);
  background: var(--gradient);
  color: var(--sec-col);
  font-size:  clamp(24px,1.7rem,2vw);
  font-weight: 700;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
  margin: 1rem auto auto auto;
}
.cryptact_social_wrapper {
  width: min(700px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.social_profile_heading,
.social_profile_bio {
  text-align: center;
}
.social_link_wrapper{
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.cryptact_social_links {
  width: 100%;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3,minmax(min(40px,100%),1fr));
  gap: 0.5rem;
}
.cryptact_social_links:has(.cryptact_social_links_item:hover)
  > .social_link_wrapper:not(:hover) {
  opacity: 0.5;
  transform: scale(0.8);
}
.socail_link_title{
  text-align: center;
  color: var(--prim-col);
}

.cryptact_social_links_item {
  padding: 0.7rem;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.cryptact_social_links_item:hover {
  background-color: #0a182f53;
}
.cryptact_social_links_icon {
  width: 40px;
}



.tip_section{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding:  0.7rem;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  color: #fff;
}
.tip_section > a{
  background-color: transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 3px solid var(--prim-col);
  border-radius: 100vw;
  transition: all 0.2s ease-in-out;
  scale: 0.8;
  animation: rotate 3s infinite linear alternate-reverse;
}
.tip_button{
  color: var(--sec-col);
}

.success_wrapper{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.success_img{
  width: min(200px, 70%);
  display: block;
  margin-top: 5rem;
}
.success_headline{
  text-align: center;
  font-size:  clamp(24px,1.9rem,2.2vw);
  color: #ffffff;
}
@keyframes rotate {
   
  100%{
   transform: rotateY(360deg);
  }
}