/*
Theme Name: hikari z3r0
Description: Un tema de bloques para hikari z3r0
Author: Nora Ferreirós
Author URI: https://en.noraferreiros.com/
Template: twentytwentyfive
Version: 1.0.0
Text Domain: hikariz3r0
*/
.logoimg{
    margin-top: clamp(2rem, 5vw, 8rem)!important;
}
.logoimg img{
    width: clamp(100vw, 60vw, 400px) !important;
}
.claim{
    margin-bottom: clamp(1rem, 2vw, 6rem)!important; 
}

/*-- ICONOS SOCIALES --*/
.social-links{
 margin-top: clamp(1rem, 1vw, 4rem)!important;    
}

.image-hover-zoom img {
    max-width: 100%;
    transition: all 0.3s;
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
}

.image-hover-zoom:hover img {
    transform: scale(1.1);
}

/*-- FIN DE ICONOS SOCIALES --*/

/*-- FONDO ANIMADO --*/
.context {
    width: 100%;
    position: absolute;
    top:50vh;
    
}

.context h1{
    text-align: center;
    color: #000;
    font-size: 48px;
}


.area{  
    background: #000;  
    width: 100%;
    height:100vh;
}

.circles{
    position: absolute;
    top: 0;
    right: 0;
    width: 98.25%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    height: 72px;
    animation: animate 5s linear infinite;
    right: -416px;
    font-weight: bold;
    background-color: transparent;
    background-image: radial-gradient(#A5DF53 25%, transparent 25%);
    background-position: 0 0;
    background-size: 4px 4px;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 56px;
    font-weight: bold;
    text-align: center;
}

.circles li:nth-child(1), .circles li:nth-child(2), .circles li:nth-child(3), .circles li:nth-child(4), .circles li:nth-child(5), .circles li:nth-child(6), .circles li:nth-child(7), .circles li:nth-child(8), .circles li:nth-child(9), .circles li:nth-child(10){width: 416px;}

.circles li:nth-child(1){
    top: 25%;
    animation-delay: 0s;
    animation-duration: 20s;
}
.circles li:nth-child(2){
    top: 10%;
    animation-delay: 2s;
    animation-duration: 18s;
}

.circles li:nth-child(3){
    top: 70%;
    animation-delay: 4s;
    animation-duration: 16s;
}

.circles li:nth-child(4){
    top: 40%;
    animation-delay: 0s;
    animation-duration: 14s;
}

.circles li:nth-child(5){
    top: 65%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.circles li:nth-child(6){
    top: 75%;
    animation-delay: 3s;
    animation-duration: 10s;
}

.circles li:nth-child(7){
    top: 35%;
    animation-delay: 7s;
    animation-duration: 14s;
}

.circles li:nth-child(8){
    top: 50%;
    animation-delay: 15s;
    animation-duration: 16s;
}

.circles li:nth-child(9){
    top: 20%;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(10){
    top: 85%;
    animation-delay: 0s;
    animation-duration: 10s;
}

@keyframes animate {

    0%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(-3000px);
    }

}

.animatedbg{
    z-index: -9999;
    position: absolute;
    top: 0;
    width: 100%;}

/*-- FIN DE FONDO ANIMADO --*/