*{
    margin: 0;
    pad: 0;
    box-sizing: border-box;
    font-family: 'Julius Sans One', sans-serif; /*this here applies the change */
    
}


body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background:black;
    font-family: 'Julius Sans One', sans-serif;
    

}

.rodar { box-shadow: 0px 0px 7px 0 rgb(255, 255, 0);background: rgba(68, 255, 0, 0.856);color: rgb(0, 0, 0);
    border-radius: 10%; display: flex;
    justify-content: center;
    align-items: center; position: relative;/*for the video to appear on the bottom*/
    margin-top: 37%;margin-right: 7%;
    text-align: center;
    font-size: 1.5rem;z-index: 100;position: absolute; text-decoration: none; /* quita subrayado */}
  

    .rodar1 {
        box-shadow: 0px 0px 7px 0 rgb(255, 255, 0);
        background: rgba(68, 255, 0, 0.856);
        color: rgb(0, 0, 0);
        border-radius: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 1rem;
        position: absolute;
        top: 10px;     /* distance from top */
        right: 50px;   /* distance from right */
        z-index: 100;
        text-decoration: none;
        cursor: pointer;
        padding: 10px 20px; /* optional: makes the box more clickable */
    }

.box{ /*literally a box */
    position: relative;
    width:200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: animate 55s linear infinite; /* it was done after*/
    border: 2.7px solid white;
    background-color: transparent;
    
    
}


.box:hover{

background: rgba(199, 199, 199, 0.158);
       
}

.marca{
    position: relative;/*for the video to appear on the bottom*/
    margin-top: 4%;
    text-align: center;
    font-size: 1.8rem;
    color: white;
    -webkit-box-reflect: below 57px linear-gradient(transparent,transparent,rgba(0, 0, 0, 0.541)) /*THIS MAKES THE ILUSION REFLECT*/
    
}
.marca img{
    width: 200px;
    height: 240px;
}
/*.marca2{
    transform: rotateY(180deg);
    text-align: center;
    font-size: 2rem;
    color: white;
    margin-top: 15%;
    -webkit-box-reflect: below 70px linear-gradient(transparent,transparent,#0004) /*THIS MAKES THE ILUSION REFLECT
}
*/

@keyframes animate{ /*animate is the name of the animation right above , you could give any name*/
    0%{
        transform: perspective(1000px) rotateY(360deg);
    }
    100%{
        transform: perspective(1000px) rotateY(0deg); /*THE Y MAKES A HUGE DIFFERENCE*/
    }
    

}
.box span{
   
    text-align: center;
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    /*EXTREMLY CRUCIAL BELOW*/
    transform: rotateY(calc(var(--i)*45deg))translateZ(400px);
    -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,rgba(0, 0, 0, 0.605)) /*THIS MAKES THE ILUSION REFLECT*/
    
}

.box span img{ /*this makes a notable diference on the sizing of the images*/
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0px 0px 7px 0 rgb(255, 255, 0);
    border-radius: 50%;

    animation: MENU_WORLD  2s ease-in infinite; 
}

@keyframes MENU_WORLD{ 
    0%{
    
        box-shadow: 0px 0px 15px 0 rgb(255, 255, 0);
      
    }

    50%{
    
        box-shadow: 0px 0px 8px 0 rgb(255, 255, 0);
      
    }

    100%{
       
        box-shadow: 0px 0px 15px 0 rgb(255, 255, 0);
    
    }
}





/*----------*/


/*for the info inside the pictures*/




.box a{ /*TURKO - IONES...*/
    position: absolute;
    top:3%;
    left: 2%;
    font-size: 1rem;
    color: rgb(241, 5, 5);
    
   /* background: none;*/
   background-color: rgba(255, 255, 255, 0.461);
    text-decoration: none;
    border-radius: 10%;
    box-shadow: 0px 0px 7px 0 rgb(255, 255, 255);
    
}

.texto{/*FRASES....*/
    position: absolute;
    top: 50%;
    left: 3%;
    font-size: 1rem;
    color: rgb(255, 255, 255);
    background: none;
    
}

.button{
    position: absolute;
    top: 70%;
    left: 3%;
    transform: (-50%, -50%);
    background-color: transparent;
    color: rgb(255, 255, 255);;
    font-size: 2px;
    cursor: pointer;
    border-radius: 50px;

    text-align: center;
    padding-top: 1.9px;
    padding-bottom: 1.9px;
    padding-left: 62px;
    padding-right: 62px;
    transition: 1.2s ease-in-out;
    background: none;
    margin-top: 75%;
    border:2.3px solid rgb(226, 226, 226);
    font-weight: bold;
    margin-left: 11%;   
    
}

.button:hover{     /*check .box a{  abovee.. for initial meassurments.*/
    background:white;
    opacity: 0.8;
    
    color: rgb(114, 150, 74);
    border: black;
    font-size: 1.25rem;
    padding-right: 70px;
    padding-left: 70px;
    text-align: center;
    border-top: 2.6px solid rgba(86, 141, 153, 0.849);
    
}



/*---tierra--*/

.boxtry-wrapper{
    width: 100%;
   /* margin: auto;/*auto*/
  /* height: 100vh;*/
  overflow: hidden;
 
 
  position: absolute;
  
}

.boxtry{  /* video...como hacer que un video de youtube sea responsive*/
    height: 65vh;
    width: 100vw;
    padding-bottom: 56.25%; /*EXTREMLY IMPORTANT*/
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
   /* margin-top: 70px;*/
    
    background-color: rgba(255, 255, 255, 0.452);
    
}


.try{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;

    /*play with whese options to align the wanted config video position*/
   /* top: 85%;*/
    left: 0;
   /* transform: translate(-50%,-80%);*/
  
    /*--above video config exact position--*/
    
   
    
}
@media (min-aspect-ratio: 16/9){  /*how to make a responsive video*/
    .try{
        width: 100%; /*inverted with max below */
        height: auto; /*inverted with max below*/
    }
}
@media (max-aspect-ratio: 16/9){
    .try{
        width: auto; 
        height: 100%; 
    }
}





.try-minis{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;

    /*play with whese options to align the wanted config video position*/
   /* top: 85%;*/
    left: 0;
   /* transform: translate(-50%,-80%);*/
  
    /*--above video config exact position--*/
    
   
    
}
@media (min-aspect-ratio: 16/9){  /*how to make a responsive video*/
    .try-minis{
        margin-top: 32.5px;
        width: 100%; /*inverted with max below */
        height: auto; /*inverted with max below*/
    }
}
@media (max-aspect-ratio: 16/9){
    .try-minis{
        width: auto; 
        height: 100%; 
    }
}

/*@media all and (max-width:1286px){ /*laptop*/
   /* .try-minis{*/
   
    /* display: none;
 }
}*/