/* Google_Fonts */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap');

/* Variables */

:root{

    /* Colors */

    --gradient-color-red:linear-gradient(90deg,
                                            hsl(7, 89%, 46%) 15%,
                                            hsl(11,93%,68%) 100%);

                                            
    --gradient-color-orange:linear-gradient(90deg,
                                            hsl(22, 89%, 46%) 15%,
                                            hsl(54,90%,45%) 100%);

                                        
    --gradient-color-yellow:linear-gradient(90deg,
                                            hsl(54, 89%, 46%) 15%,
                                            hsl(92,90%,45%) 100%);

    --gradient-color-green:linear-gradient(90deg,
                                            hsl(92, 89%, 46%) 15%,
                                            hsl(92,90%,68%) 100%);

    --gradient-color-full:linear-gradient(90deg,
                                            hsl(59, 95%, 57%) 15%,
                                            rgb(221, 184, 16) 100%);

    --gradient-color-battery:linear-gradient(90deg,
    
                                            hsl(44, 80%, 56%) 15%,
                                            rgb(94, 177, 46) 100%);

    --text-color:#fff;
    --body-color:hsla(0,8%,7%,1);
    --container-color:hsl(0,0%,9%);


/* Fonts */

--body-font: 'Rubik', sans-serif;
--biggest-font-size: 2.5rem;
--normal-font-size:.938rem;
--smaller-font-size: .75rem;


}

/* Media Queries for smaller size */
@media screen and  (min-width:968px){
    
    :root{
        --biggest-font-size: 2.75rem;
        --normal-font-size:1rem;
        --smaller-font-size: .813rem;
        --smallest-font-size:.83rem;
    }

    
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);

}
.owner{
    font-family: var(--body-font);
    font-size: var(--smallest-font-size);
    
    margin-left: 88% ;
    color: #eee;
    margin-top: 9%;
}





.battery{
    height: 100vh;
    display: grid;
    place-items: center;
    margin: 0 1.5rem;

}

.battery__card{
    margin-top: 10%;
    position: relative;
    width: 100%;
    height: 240px;
    background-color: var(--container-color);
    padding: 1.5rem 2rem;
    border-radius: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

.battery__text{
    margin-bottom: .5rem;;
}
.battery__percentage{
    font-size: var(--biggest-font-size);

}
.batter__status{
    position: absolute;
    bottom: 1.5rem;
    
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: var(--smaller-font-size);
    

}

.batter__status i{
    font-size: 1.25rem;

}
.battery__pill{
    position: relative;
    width: 75px;
    height: 180px;
    background-color: var(--container-color);
    box-shadow: inset 20px 0 48px hsl(0,0%,16%),
                inset -4px 12px 48px hsl(0,0%,56%);
    border-radius: 3rem;
    justify-self:flex-end;
}

.battery__level{
    position: absolute;
    inset: 2px;
    border-radius: 3rem;
    overflow: hidden;
}

.battery__liquid{
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    height: 36px;
    background: var(--gradient-color-red);
    box-shadow:inset -10px 0 12px hsla(0,0%,0%,.1),
                inset 12px 0 12px hsla(0,0%,0%,.15);
    transition: .3s;
    

}

.battery__liquid::after{
    content: "";
    position: absolute;
    height: 8px;
    background:var(--gradient-color-red);
    box-shadow: inset 0 -3px 6px hsla(0,0%,0%,.2);
    left: 0;
    right: 0;
    margin: 0 auto;
    top:-4px;
    border-radius: 50%;
    
}

.green-color{
    background: var(--gradient-color-green);
}

.animated-green{
    background: var(--gradient-color-green);
    animation: animated-chargin-battery 1.2s infinite alternate;



}


.animated-full{
    background: var(--gradient-color-full);
    animation: animated-chargin-battery .6s infinite alternate;
}

.animated-battery{
    background: var(--gradient-color-battery);
    animation: animated-chargin-battery 1.2s infinite alternate;
}
.animated-red{
    background: var(--gradient-color-red);
    animation: animated-low-battery .3s infinite alternate;

}
.animated-green,
.animated-red,
.green-color{
    -webkit-background-clip: text;
    color:transparent;


}
@keyframes animated-chargin-battery{
    0%{
        text-shadow: none;

    }
    100%{
        text-shadow: 0 0 6px hsl(92,90%,68%);
    }
}

@keyframes animated-low-battery{
    0%{
        text-shadow: none;

    }
    100%{
        text-shadow: 0 0 8px hsl(7,89%,46%);
    }
}

.gradient-color-red,
.gradient-color-red::after{
    background: var(--gradient-color-red);
}

.gradient-color-orange,
.gradient-color-orange::after{
    background: var(--gradient-color-orange);
}

.gradient-color-yellow,
.gradient-color-yellow::after{
    background: var(--gradient-color-yellow);
}

.gradient-color-green,
.gradient-color-green::after{
    background: var(--gradient-color-green);
}


@media screen and (max-width:320px){
    .battery__card{
        zoom: .8;
    }
    .owner{
        font-size: .5rem;
    }
}

@media screen and (min-width:430px){
    .battery__card{
        width: 312px;
    }

}

@media screen and (min-width:1024px){
    .battery__card{
        zoom:1.5;
    }

}