:root {
    --vampire-black: rgb(8, 8, 8);
    --cyan: rgb(139, 233, 253);
    --green: rgb(80, 250, 123);
    --orange: rgb(255, 184, 108);
    --pink: rgb(255, 121, 198);
    --my-brow: rgb(32, 30, 30);
    --my-brow-2: rgb(44, 42, 42);
    
    --background: rgb(40, 42, 54);
    --current-line: rgb(68, 71, 90);
    --selection: rgb(68, 71, 90);
    --foreground: rgb(248, 248, 242);
    --comment: rgb(98, 114, 164);
    --cyan: rgb(139, 233, 253);
    --green: rgb(80, 250, 123);
    --orange: rgb(255, 184, 108);
    --pink: rgb(255, 121, 198);
    --purple: rgb(189, 147, 249);
    --red: rgb(255, 85, 85);
    --yellow: rgb(241, 250, 140);
    
    
    --pic-radios:30vw;
    --top:-5vw;

    --my-button:rgba(67, 59, 74, 0.65);
    --my-red: rgb(198, 41, 130);
}

@media only screen and (max-height: 600px) {
    :root {
      --pic-radios:25vw;
    }

}

.text-pink{
    color: var(--pink);
}

body {
    background-color: var(--vampire-black);
    /* background-color: var(--background); */
    /* color: var(--pink);   */
    color: white;    
    font-family: 'Franklin Gothic Medium', 'Arial Narrow';

}

.body-div{
    /* background-color: var(--my-brow); */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 55vw;   
    font-size: 2vw; 
    overflow: visible;
    margin-bottom: 20vw;
    margin-top: 4rem;
    padding-top: 1rem;
}
.sec{
    width: 95vw;
    /* background-color: green; */
    position: relative;
}

.container {
/* background-color: blue; */
display: flex;
align-items: center;
justify-content: center;
width:calc(var(--pic-radios) + 10vw);    

}

.rounded-image {   
    background-color: black;  
    border-radius: 50%;
    border: 4px solid var(--pink);
    box-shadow: 0 0 10px var(--cyan);
    /* z-index: 5; */

}



@media only screen and (max-width: 700px) {
    .left-top-cloud {        
        left: 14vw;    
    } 
}
@media only screen and (max-width: 400px) {
    .left-top-cloud {        
        left: 10vw;    
    } 
}



.right-top-cloud {
    
    color: var(--pink);
    position: absolute;   
    top: var(--top);
    left: calc((100vw - var(--pic-radios))/2 + var(--pic-radios) - 3vw);        
}

.right-down-cloud{
    
    color: var(--pink);
    position: absolute;   
    top: calc(var(--pic-radios) + 2vw);
    left: calc((100vw - var(--pic-radios))/2 + var(--pic-radios));        
}

.left-down-cloud{
    
    color: var(--pink);
    position: absolute;   
    top: calc(var(--pic-radios) + 2vw);
    left: 20vw;        
}

.center-down-cloud{
    
    color: var(--pink);
    position: absolute;   
    top: calc(var(--pic-radios) + 3vw);
    left: 42vw;        
}

a {
    text-decoration: none;
    color: inherit;
}

.cloud{
    background-color: var(--my-brow-2);        
    border-radius: 1.2rem;
    text-align: center;   
    border: 1px solid var(--orange);     
    color: var(--pink);
    font-size: 1.2rem;
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    align-items: center;
}

@media only screen and (max-height : 555px) {
    .cloud{
        font-size: .9rem;
    }    
}
@media only screen and (max-width : 300px) {
    .cloud{
        font-size: .9rem;
    }    
}


.cloud:hover{
    background-color:var(--foreground);
    font-weight: 900;
    border: 3px solid var(--red);
    color:var(--purple);
}

.line{
    width: calc(var(--pic-radios)/2);  /* Adjust the length of the line */
    height: 2px; /* Adjust the thickness of the line */
    background-color: var(--orange); /* Line color */
    transform-origin: left center; /* Set the rotation pivot to the left end */
    transform: rotate(45deg); /* Rotate the line by 45 degrees */
    position: absolute;
    z-index: 1;
    top: 0vw;
    left: 28vw;
}
.line2{
    width: calc(var(--pic-radios)/2); /* Adjust the length of the line */
    height: 2px; /* Adjust the thickness of the line */
    background-color: var(--orange); /* Line color */
    transform-origin: center; /* Set the rotation pivot to the left end */
    transform: rotate(-45deg); /* Rotate the line by 45 degrees */
    position: absolute;
    z-index: 1;
    top: 5vw;
    left: 55vw;
}
.line3{
    width: calc(var(--pic-radios)/2); /* Adjust the length of the line */
    height: 2px; /* Adjust the thickness of the line */
    background-color: var(--orange); /* Line color */
    transform-origin: center; /* Set the rotation pivot to the left end */
    transform: rotate(45deg); /* Rotate the line by 45 degrees */
    position: absolute;
    z-index: 1;
    top: var(--pic-radios);
    left: 55vw;
}
.line4{
    width: calc(var(--pic-radios)/2); /* Adjust the length of the line */
    height: 2px; /* Adjust the thickness of the line */
    background-color: var(--orange); /* Line color */
    transform-origin: center; /* Set the rotation pivot to the left end */
    transform: rotate(-45deg); /* Rotate the line by 45 degrees */
    position: absolute;
    /* z-index: 1; */
    top: var(--pic-radios);
    left: 28vw;
}
.line5{
    width: calc(var(--pic-radios)/2 + 2vw); /* Adjust the length of the line */
    height: 2px; /* Adjust the thickness of the line */
    background-color: var(--orange); /* Line color */
    transform-origin: center; /* Set the rotation pivot to the left end */
    transform: rotate(90deg); /* Rotate the line by 45 degrees */
    position: absolute;
    /* z-index: 1; */
    top: calc(var(--pic-radios) - 3vw);
    left: 39vw;    
}

@media only screen and (max-height: 600px) {
    .line5{
        left: 42vw;
    }
}

@media only screen and (max-height: 652px) {

    .line4,.line3 {
        top: calc(var(--pic-radios) / 1.2);
    }
    
    .left-down-cloud,.right-down-cloud {
        top: calc(var(--pic-radios) / 1.2 + 2vw);
    }
    
    .center-down-cloud{
        top: calc(var(--top) - 1vw) ;
        left: 40vw;   
    }
    

}


/* ::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--background);
  } */
  /* ::-webkit-scrollbar-thumb { */
  /* background: var(--purple); */
  /* background: white; */
  /* border-radius: 4px; */
/* } */

* { 
    scrollbar-width: 1rem;
    scrollbar-width: thin;
    scrollbar-color: white var(--background); /* thumb color and track color */
}


.glow {
    /* font-size: 80px; */
    /* color: #fff; */
    text-align: center;
    -webkit-animation: glow .5s ease-in-out infinite alternate;
    -moz-animation: glow .5s ease-in-out infinite alternate;
    animation: glow .5s ease-in-out infinite alternate;
}
  
@-webkit-keyframes glow {
    from {
      text-shadow: 0 0 10px #ffffff65, 0 0 20px #ffffff81, 0 0 30px #e60073ce, 0 0 40px #e60073d8, 0 0 50px #e60073c0, 0 0 60px #e60073d2, 0 0 70px #e60073d2;
    }
    to {
      text-shadow: 0 0 20px #ffffff4d, 0 0 30px #ff4da6ce, 0 0 40px #ff4da6da, 0 0 50px hsla(330, 100%, 65%, 0.877), 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}


/* ************************ THIS IS WRENCH *********************** */
:root {
    --length:5vw;
    --wrench-color:var(--orange );
    /* --background-wrench:var(--background); */
    --background-wrench:var(--vampire-black);
}

.wrentch-container{
    width: calc(var(--length) * 3 );          
    height: var(--length);    
    display: flex;            
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0;
}

.no-cloud-background .cloud{
    background-color: rgba(0, 0, 0, 0);
}

.my-wrench{
    /* background-color: black; */
    border: none;      
    padding: 10px;
    animation: rotate 2s ease infinite;
    transform-origin: right center;  
}
.my-wrench:hover{
    background-color: black;
    border: none;
    rotate: 90;
    /* animation: rotate 2s linear ;   */
    border: solid 1px var(--orange); 

   
}
.my-wrench:active{
    border: solid 1px blue; 
    padding: 20px;
}

@keyframes rotate {
    0% {
        transform: rotate(-5deg); /* Start with a 45-degree up rotation */
    }
    50% {
        transform: rotate(5deg); /* Rotate 45 degrees down halfway through the animation */
    }
    100% {
        transform: rotate(-5deg); /* Rotate 45 degrees up to complete the cycle */
    }
}




.rect{
    width: 60%;
    height: 55%;
    font-size: 3vw;
    background-color: var(--wrench-color);
    font-weight: 700;     
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    color: white;
}

@media only screen and (max-width : 768px){
    .rect{
        font-size: 4vw;
    }
}


.wrentch-container::before,
.wrentch-container::after { 
    content: '';
    width: calc(var(--length) * 1);
    height: var(--length);
    background-color: var(--wrench-color);
    position: absolute;
    border-radius: 50%;            
    
}

.wrentch-container::before {
    left: 0;
}

.wrentch-container::after {   
    left: calc(var(--length) * 1.993 );            
} 


.right-polygon{
   clip-path:    polygon(30% 0%, 105% 0%, 105% 100%,30% 100%,0% 50%);
}

.left-polygon{          
    clip-path:    polygon(-5% 0%,70% 0%,100% 50%,70% 100%,-5% 100%);
}

.polygon{
    width: calc(var(--length) * .7);
    height: 55%;
    background-color: var(--background-wrench);
    z-index: 5;
}

/* ************************ THIS IS WRENCH *********************** */

/***************** PLAY PAUSE BUTTON ON THE IMAGE  */
.play-video-pack{
    color: var(--my-red);
}

.home-play-container{
z-index: 6;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
font-size: calc(var(--pic-radios) * .1);
background-color: rgba(0, 0, 0, 0.521);
width: 5rem;
height: 5rem;
border-radius: 50%;
border: 3px solid var(--orange);
display: flex;
justify-content: center;
align-items: center;
}
.home-play-container:hover{

    color: var(--orange);
    background-color: black;
}
.home-play-container i{
    font-size: 2rem;
}
.rotation-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotateY 4s linear infinite;
    transform-origin: center center;
}
  
@keyframes rotateY {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg); /* Rotates a full circle (360 degrees) */
    }
}

/***************** END PAUSE BUTTON ON THE IMAGE  */

/***************** Video */
.video-interduction-container{
    width: 98vw;
    height: 99vh;
    top: 0;
    left: 1vw;
    z-index: 99999;
    position: absolute;
    /* background-color: #fc0c842a; */
}

.close-video-button{
   cursor: pointer;
   padding-right: 30px;
   padding-left: 30px;
   background-color: rgba(0, 0, 0, 0.829);
   color: red;

}
.close-video-button:hover{
    color: white;
    background-color: black;
}