body {
      -- background-image: url('/images/waterfall_1_0_AI.png');
      -- background-image: url('/images/aic.png');
      background-image: url('/images/entropy/echoesofuniverse-mini.png');
      -webkit-backdrop-filter: blur(5px);
     -- backdrop-filter: blur(2px);

      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;

      
    }
/*
    body::before {
        content: ""; /* Required for pseudo-elements to render */
        position: absolute; /* Position relative to the body */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/images/entropy/echoesofuniverse-mini.png'); /* Your image path */
        background-size: cover; /* Cover the entire pseudo-element */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent image repetition */
        z-index: -1; /* Place the pseudo-element behind the body content */
        transform-origin: center center; /* Set rotation origin to the center */
        transform: rotate(-45deg); /* Rotate the image by 45 degrees */
        /* You might need to scale the pseudo-element to avoid empty corners after rotation */
        /* transform: rotate(45deg) scale(1.5); */
    }


*/


@keyframes body_spin {
              from {
                   transform:  rotate(0deg);               }
              to {
                   transform: rotate(360deg);
               }
        }


.container_slide{
		margin: 0 auto;
		margin-top: 250px;
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 0%;
	        --user-select: none;
		--background-color: #341539;  /* #1c1c1c */
		--border: solid 10px #341539;    /* #616161  DE7E5D*/
		--border-radius:10px ; 

	}
 
	.container_slide .slide_img{
		position: absolute;
		width: 100%;
		height: 100%;
                


	}
	.container_slide .slide_img img{
		--width: 80%;
		--height: 80%;
                width: 60px; /* Set the desired width */
                height: 60px; /* Set the desired height, equal to the width for a perfect circle */
                border-radius: 50%; /* Makes the element a perfect circle */
                background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
                transition: transform .2s  ease-in-out; /* Animation */
                
                 transform: scale(10.0) rotate(-45deg); /* (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin;
                 animation-duration: 10s;
                 animation-iteration-count: 3;
                 animation-timing-function: ease-in-out; /* Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}

  
     .img__description {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         background: rgba(29, 106, 154, 0.72);
         --background-color: yellow;

         color: yellow;
         visibility: visible;
         opacity: 10;
         font-family: "Trebuchet MS";



         /* transition effect. not necessary */
         transition: opacity 2s, visibility 2s;
       }


div tttt {
  z-index: 1;
  width: 420px;
  line-height: 20px;
  display: inline-block;
  padding: 200px 0px;
  vertical-align: middle;
  font-family: "Trebuchet MS";
  height: 450px
}

        .container_slide .slide_img img:hover {
		visibility: visible;
                opacity: 1;

                 color: #fff;
		 transform: scale(10.0) rotate(-45deg); /* (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin;
                 animation-duration: 10s;
                 animation-iteration-count: infinite;
                 animation-timing-function: ease-in-out; /* Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}


        .container_slide .slide_img img:after .img__description{
              content: 'TESTING MYUNIVERSE';
              color: #fff;
              width: 100%;
              height: 100%;
              position: absolute;
              top: 100%;
              right: 0;
    
              opacity:3;
              background:#341539;
              transition: 2s ease-in-out;
              z-index: 99; 
        }


        .container_slide .slide_img img:hover:after .tooltip-text{
            top: 0;
             visibility: visible; /* Show on hover */
            opacity: .9; /* Fully opaque on hover */
            z-index: 1;

        }

        @keyframes spin {
              from {
                   transform: scale(0.1) rotate(0deg);               }
              to {
                   transform: scale(10.0) rotate(360deg);
               }
        }


       .slide_image:hover .tooltip-text {
            visibility: visible; /* Show on hover */
            opacity: 1; /* Fully opaque on hover */
        }
        
.tooltip-text {
        visibility: hidden;
        width: 120px;
        background-color: white;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%; /* Position above the container */
        left: 50%;
        margin-left: -60px; /* Center the tooltip */
        opacity: 0;
        transition: opacity 0.3s;
    }




	 .prev, .next{
		width: 20%;
		height: inherit;
		position: absolute;
		top:0; 
		--background-color: rgba(88, 88, 88,.2);
		color:rgba(244, 244, 244,.9);
		z-index: 99;
		transition: .45s;
		cursor: pointer;
		text-align: center;
	}
 
	.next{right:0;}
	.prev{left:0;}
 
	label span{
		position: absolute;
                color:#EFBF04;

		font-size: 60pt;
		top: 50%;
	 	transform: translateY(-50%);
	}

/*
.prev:hover, 
  .next:hover{
		transition: .3s;
		background-color: rgba(88, 88, 89,.8);
		color: #ffffff; 
	}

*/
.container_slide #nav_slide{
	width: 100%;
	bottom: 12%;
	height: 11px;
	position: absolute;
	text-align: center;
	z-index: 99;
	cursor: default;
}
 
#nav_slide .dots{
	top: -5px;
	width: 8px;
	height: 8px;
	margin: 0 1px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
	transition: .4s;
}
 
#nav_slide .dots:hover {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.9);
	transition: .25s
}
 
.slide_img{z-index: -1;}

        #i1:checked ~ #one  ,
	#i2:checked ~ #two  ,
	#i3:checked ~ #three,
	#i4:checked ~ #four ,
	#i5:checked ~ #five ,
        #i6:checked ~ #six  ,
	#i7:checked ~ #seven,
        #i8:checked ~ #eight,
        #i9:checked ~ #nine ,
        #i10:checked ~ #ten 



	{z-index: 9; animation: scroll 1s ease-in-out;}

	#i1:checked  ~  #nav_slide #dot1,
	#i2:checked  ~  #nav_slide #dot2,
	#i3:checked  ~  #nav_slide #dot3,
	#i4:checked  ~  #nav_slide #dot4,
	#i5:checked  ~  #nav_slide #dot5,
        #i6:checked  ~  #nav_slide #dot6,
	#i7:checked  ~  #nav_slide #dot7,
	#i8:checked  ~  #nav_slide #dot8,
	#i9:checked  ~  #nav_slide #dot9,
	#i10:checked ~  #nav_slide #dot10

	{ background-color: rgba(255,255,255,.9);}

@keyframes scroll{
	0%{	opacity:.4;}
	100%{opacity:1;}
}		

/* .yt{
	margin: 0 auto;
	margin-top: 50px;
	position: relative;
	width: 150px;
	height:50px;
	border: outset #2c2c2c 4px;
	border-radius: 10px;
	text-align: center;
	font-size: 30pt;
	transition: .5s;
}

.yt a{
	text-decoration: none;
	color: #4c4c4c;
	transition: .5s;
}

.yt:hover{
	background: #4c4c4c;
	transition: .3s;
}

.yt:hover a{
	color: #fff;
	transition: .3s;
}
 */
@media screen and (max-width: 385px){   /* 685px    */
	.container_slide{
		border: none;
		width: 100%;
		height: 0;
		padding-bottom: 55%; 
	}	
	
	label span { font-size: 50pt; }
	
	.prev, .next{
		width: 15%;
	}	
	#nav_slide .dots{
		width: 12px;
		height: 12px;
	}
}
@media screen  and(min-width: 470px){   /* 970px */

	.me{ display: none;}
}
/*
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

*/

.skew {
  width: 300px;
  height: 100px;
  background-color: #DE7E5D;
  border: 1px solid black;

  transform: skew(-20deg,-10deg);
}


.straight {
  width: 250px;
  height: 25px;
  background-color: #341539;
  color: #fff;    
  border: 1px solid black;

  transform: skew(0deg,0deg);
}