@tailwind base;
@tailwind components;
@tailwind utilities;



.homePage-bg{
    background:url("./assets/Images/bghome.svg")
}

.Instructor_image{
    box-shadow: -20px -20px 0 0 rgba(255, 255, 255, 1);
}

.selectedCardColor{
    box-shadow: 12px 12px 0 0 rgba(255, 214, 10, 1);
}

.becomeInstructorButton{
    box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.18);
}

.CTAyellowbutton{
    box-shadow: 2px 2px 0 0 rgba(255, 255, 255, 0.51);
}

.CTAblackbutton{
    box-shadow: 2px 2px 0 0 rgba(255, 255, 255, 0.18);
}

.videoShadow{
    box-shadow: 20px 20px 0 0 rgba(245, 245, 245, 1);
}

.videoBlueShadow{
    box-shadow: 10px -5px 50px -5px #118AB2 ;
}

.codeBorder{
    background: linear-gradient(112deg, rgba(14, 26, 45, 0.24), rgba(17, 30, 50, 0.38));
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right bottom,#ffffff38,#ffffff00);
}

.timeLineImageBox{
    box-shadow: 10px -5px 50px -5px #118AB2;
}

.timeLineImage{
    box-shadow: 20px 20px 0 0 rgba(255, 255, 255, 1);
}

.inputShadow{
    box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.18);
}

.spinner {
    width:100px;
    height:100px;
    border-radius:50%;
    background:conic-gradient(#0000 10%,#CFD1F4);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 16px),#000 0);
    animation:s3 1s infinite linear;
  }
  @keyframes s3 {to{transform: rotate(1turn)}}