body{
    margin:0 5% 0 5%;
    font-family: "Montserrat", sans-serif;
    background-color:rgba(221,232,237,255);
   
}
.main{
    /* overflow: auto; */
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: rgba(251,252,253,255);

}
.nav-bar{
    justify-self: center;
    width:82%;
    height:8vh;
    /* background-color: rgba(254,254,254,255); */
    background-color:white;
    position:sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content:space-between;
    align-items:center;
    border-bottom: 2px solid grey;


}
.earnwave{
    text-align: center;
    width: 10%;
    font-size:1.25rem;
    height:50%;
    font-weight: 700;
    padding:.2rem;
    display: flex;
    align-items: center;

    margin-left:1.20%;
    transition:.40s ease-in;
}

/* hover */
.earnwave:hover{
    scale:1.03;
    color: rgba(0, 0, 255, 0.574);
}
.earnwave img{
    align-self:center ;
    height:2rem;
    width:2rem;
    margin-left: 0;
    margin-right: 1%;
}
.nav-link{
    display: flex;
    text-align: center;
    font-size:1.25rem;
    font-weight: 550;
    padding:.2rem;
    align-items: center;
    width:28% ;
    height:100%;
    


}
.link{
    margin-right:1.50rem;
    font-size:1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    justify-self: start;
    /* line-height:1rem; */
    color: black;
    font-weight: 550;
    opacity: .7;

   

}
.link:hover{
    opacity:1;
    scale:1.07;
    text-decoration: blue underline;
}

.nav-link a{
    text-decoration: none;
    color: #121212;
  
}
/* .nav-link .link i{
    scale:1.5;
    align-self: start;
    margin-left:.5rem;
   
} */
.nav-search{
    margin-right:1%;
    padding: .3rem;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    font-weight: bold;
    text-align: center;
    width:8%;
    line-height: 180%;
    height:50%;
    background-color: white;
    border-radius: 20%/50%;
    transition:.30s ease-in;
   

    box-shadow: 1px 1px 1px 1px grey;
   
}
.Sign-up{
    font-size:clamp(9px, 1vw, 16px);
}
.nav-search:hover{
    box-shadow: 2px 2px 2px 2px black;
    scale:1.09;
}
 
.buttons{
    width: 100%;
    height:100%;
    background-color:rgba(251,252,253,255);
    display: flex;
    justify-content: space-around;
    align-items: start;




}
.button1 {
    height:70%;
    width:25%;
    background-color: rgba(251,252,253,255);
    display:flex;
     justify-content:start;
     align-items: start;
     border-radius: 20%/50%;
     box-shadow: 1.6px 1.6px 1.6px 1.6px grey;
     transition:.30s ease-in;
}
.button-icon1 {
    height:70%;
    width:70%;
    display:flex;
    flex-direction: column;
     margin: 15% 30% 20% 15%;
     background-color: white;
}


.button1:hover{
    box-shadow: 2px 2px 2px 2px black;
    scale:1.09;
}
.button2:hover{
    box-shadow: 2px 2px 2px 2px black;
    scale:1.09;
}
.button3:hover{
    box-shadow: 2px 2px 2px 2px black;
    scale:1.09;
}
.button-icon2{
    height:90%;
    width:90%;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    margin: 5% 11% 8% 10%;
     background-color: white;
     
}
.you-earn {
    width:60%;
    height:33%;
     
}
.you-earn div:hover{
    box-shadow: 2px 2px 2px 2px grey;
    scale:1.09;
}
.you-earn div{
      /* margin:2% 3% 2% 3%; */
      text-align: center;
      padding:2%;
      line-height:200%;
      border-radius: 20%/50%;
      box-shadow: 1px 1px 1px 1px grey;
      color:grey;
      font-size: clamp(9px,1vw,16px);
      transition:.30s ease-in;
}     
.A30{
    width:70%;
    height:40%;
    
}
.A30 h2{
    margin: 6% 0 6% 0;
     
    font-size: 300%;
    font-size: clamp(12px,4vw,24px);
}
.button2{
    
    height:85%;
    width:35%;
    background-color: rgba(251,252,253,255);
    display:flex;
     justify-content:center;
     align-items: center;
     border-radius: 20%/50%;
     box-shadow: 1.6px 1.6px 1.6px 1.6px grey;
     margin-bottom:10%;
     transition:.30s ease-in;
}
 .Connect-sources{
    height:33%;
    width:100%;
 }
 .Connect-sources h5{
    font-size: clamp(12px,3vw,24px);
 }
.Connect-sources,.Toggle-switch,.sign{
           display: flex;
           justify-content: center;
           align-items:center;

}
.Toggle-switch{
    height:160%;
    width:100%;
    font-size:170%
}
.label:hover{
    filter: drop-shadow(2px 2px 2px 2px grey);
    box-shadow: 4px 4px 4px 4px grey;
}
.small-icon div   {
    height:33%;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items:center;

}
.large-icon div{

    display: flex;
    align-items:center;
    justify-content: space-between;
}
.small-icon img  {
    width:14% ;
    height:14%;
    transition:.30s ease-in;

}
.small-icon img:hover{
     
    rotate:(-359deg);
    scale:1.19;
}

.large-icon img {
    width: 24%;
    height: 24%;
    transition:.30s ease-in;
}
.large-icon img:hover{
    scale:1.19 ;
    rotate:(-45deg);
}
.netflix{
    scale:2;
    transition:.30s ease-in;
}
.large-icon .netflix:hover{
    scale:2.19;
}
.d1{
    margin:3% 0 3% 0 ;
}
.sign{
    margin-right:1%;
    padding: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-weight: bold; */
    text-align: center;
    width:50%;
    line-height: 300%;
    height:70%;
    background-color: white;
    border-radius: 20%/50%;
    transition:.30s ease-in;
     

    box-shadow: 1px 1px 1px 1px grey;
   
}
.sign:hover{
    box-shadow: 2px 2px 2px 2px black;
    scale:1.09;
    background-color:#3d5968;
    color: white;
}
.Sign-up1{
      height:20%; 
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

}
.Sign-up1 img{
    width: 15%;
    height: 15%;
}
 
.button-icon3 {
    height:80%;
    width:70%;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
     margin: 4% 15% 0 8%;
     background-color: white;
     /* padding:4% 4% 4% 4% ; */
}
.freeimg {
    height:80%;
    width:80%;
}
.freeimg img{
    height:110%;
    width:110%;
    scale:1.03;
}

.button3{
    height:70%;
    width:25%;
    background-color: rgba(251,252,253,255);
    display:flex;
    flex-direction: column;
     justify-content:start;
     align-items: center;
     border-radius: 20%/50%;
     box-shadow: 1.6px 1.6px 1.6px 1.6px grey;
     transition:.30s ease-in;
}
.button3:hover{
    box-shadow: 2px 2px 2px 2px black;
    scale:1.09;
}

.A-30{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:60% ;
    height:50%;
    /* background-color: red; */

}
.A-30 div:hover{
    text-shadow: #121212;
    color: blue;
    scale:1.05;
}
.button3 svg{
    width:14% ;
    height:14%;
    position:relative ;
    left:6%;
}
.button3 svg:hover{
    scale:1.09;
    rotate: 359px;;
  

}
.middle-body{
    width:80%;
    height:100%;
    background-color:rgba(251,252,253,255);
    display: flex;
    flex-direction: row;
    justify-content:center ;
    align-self: center;
    padding:5% 10% 5% 10%;

    

}
.middle-text{
    width:80%;
    height:70%;
    background-color:rgba(251,252,253,255);
    display: flex;
    flex-direction: column;
    justify-content:center ;
    align-self: center;
    /* padding:2% 5% 3% 5%; */

}
.heading-text{
    /* line-height:300%; */
    text-align: center;
    font-weight: bolder;
    font-size:350%;
    font-size: clamp(16px,4vw,56px);
}
.heading-text+p{

    text-align:center;
     padding:2% 5% 3% 5%;
     line-height:auto;
     font-size:150%;
     margin: 0 0 0 0;
     transition:.30s ease-in;
     
}
.heading-text+p:hover{
    color:blue !important;
    scale:1.09;
    filter: drop-shadow(2px 2px 2px 2px solid);
    text-shadow: #121212;

}
.design{
    text-align: center;
    transition:.30s ease-in;
    
}
.design img{
    
    height:17% ;
    width:26% ;    
}
.design img:hover{
    rotate:359deg;
    scale:1.09;
}

























/*  */
input[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
  }
  
  label {
    cursor: pointer;
    text-indent: -9999px;
    width:30%;
     height:200%;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
  }
  
  label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width:30%;
     height:66%;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
  }
  
  input:checked + label {
    background: #bada55;
  }
  
  input:checked + label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
  }
  
  label:active:after {
    width: 130px;
  }
/*  */