/*style body anim*/
/*shit idea to style pure html elements but idc*/
body {

  background: linear-gradient( /* sht load of colors */
    270deg,
    #ff0000, 
    #ff7f00, 
    #ffff00, 
    #7fff00,  
    #00ff00,  
    #00ff7f, 
    #00ffff,
    #007fff,  
    #0000ff, 
    #7f00ff,  
    #ff00ff,  
    #ff007f,  
    #ff0000 
  );
  background-size: 1200% 1200%;
  animation: body 250s linear infinite;
  height: 98vh;
    /*webkit just incase*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@keyframes body {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
    


    /*button styles */
    button,input,a {
background: rgba( 255, 255, 255, 0.15 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 1.5px );
-webkit-backdrop-filter: blur( 1.5px );
border-radius: 4px;
        padding:4px;
        transition: .5s ease-in-out;

    }

    button:hover,input:hover,a:hover{
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 3px );
-webkit-backdrop-filter: blur( 3px );
border-radius: 8px;
        transition: .4s ease-in-out;
        
        }

    button:active,input:active,a:active,button:focus,input:focus,a:focus{
        background: rgba( 255, 255, 255, 0.4 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );
border-radius: 16px;
                transition: .3s ease-in-out;

        }
    


    embed {
        transition: opacity .3s;
        opacity:1;
        position:absolute;
        top:3%;
background: rgba( 255, 255, 255, 0.1 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 2px );
-webkit-backdrop-filter: blur( 2px );
border-radius: 10px;

        }


    /* shouldnt ever directly style html elments */
    /* anything to avoid div spaghetti */