*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Raleway',sans-serif;
}

body{
background:hsl(229,57%,11%);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;

background-image:url("images/bg-desktop.png");
background-repeat:no-repeat;

background-position:center 130%;
background-size:100% auto;
}

.container{
display:flex;
gap:30px;
align-items:flex-end;
}



.left-card{
background:hsl(228,56%,26%);
padding:40px;
width:300px;

border-radius:10px 120px 10px 10px;

box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.logo{
margin-bottom:30px;
}

.icons{
display:flex;
gap:15px;
}

.icon-box{
width:45px;
height:45px;

background:hsl(229,57%,11%);

display:flex;
justify-content:center;
align-items:center;

border-radius:10px;
}



.right-card{
background:hsl(228,56%,26%);
padding:40px;

width:500px;

border-radius:10px;

position:relative;

box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.right-card p{
color:hsl(243,100%,93%);
font-size:14px;
margin-bottom:20px;
}



.progress-bar{
width:100%;
height:20px;

background:hsl(229,57%,11%);

border-radius:20px;

padding:3px;
}

.progress{
width:81.5%;
height:100%;

border-radius:20px;

background:linear-gradient(
to right,
hsl(6,100%,80%),
hsl(335,100%,65%)
);

position:relative;
}

.dot{
width:14px;
height:14px;

background:white;

border-radius:50%;

position:absolute;

right:2px;
top:2px;
}



.range{
display:flex;
justify-content:space-between;

color:hsl(243,100%,93%);

font-size:12px;

margin-top:10px;
}


.left-storage{
position:absolute;
top:-45px;
right:40px;

background:#fff;
padding:15px 25px;
border-radius:10px;

display:flex;
align-items:center;
gap:8px;
font-weight:700;
}

.left-storage::after{
content:"";
position:absolute;

bottom:-12px;
right:0;

width:0;
height:0;

border-left:20px solid transparent;
border-top:20px solid #fff;
}

.big{
font-size:34px;
color:black;
}

.small{
font-size:12px;
color:gray;
letter-spacing:1px;
}



@media(max-width:768px){

body{
background-image:url("images/bg-mobile.png");
background-size:cover;
}

.container{
flex-direction:column;
align-items:center;
}

.left-card,
.right-card{
width:320px;
}

.left-storage{

top:auto;
bottom:-40px;

right:50%;

transform:translateX(50%);
}

.left-storage::after{
display:none;
}

}