/* CSS Reset */
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Add accessible line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}

/* Variables */
:root {
	/* Mode 1 */

	/* color */
	/* Primary */
	--colors-gradient-start: hsl(6, 100%, 80%);
	--colors-gradient-end: hsl(335, 100%, 65%);

	/* Neutral */
	--colors-white: hsl(0, 0%, 100%);
	--colors-black: hsl(0, 0%, 0%);
	--colors-blue-200: hsl(243, 100%, 93%);
	--colors-blue-600: hsl(228, 55%, 62%);
	--colors-blue-850: hsl(228, 56%, 26%);
	--colors-blue-900: hsl(224, 61%, 15%);
	--colors-blue-950: hsl(229, 57%, 11%);
	--colors-red-100: hsl(26, 66%, 93%);

	/* Gradients */
	--colors-gradient-1: linear-gradient(175.75deg, var(--colors-blue-850) 36.28%, rgba(12, 18, 44, 0) 71.87%);
	--colors-gradient-2: linear-gradient(to right, var(--colors-gradient-start), var(--colors-gradient-end));

	/* typography */
	--ff-raleway: "Raleway", sans-serif;

	--fw-regular: 400;
	--fw-bold: 700;
	--fw-extrabold: 800;

	/* === Text Preset 1 === */
	/* 40px size / 40px line-height (100%) */
	--tp-1-font: var(--fw-bold) 4.0rem / 4.0rem var(--ff-raleway);
	--tp-1-ls: 0rem;

	/* === Text Preset 2 (Bold) === */
	/* 14px size / 16.1px line-height (115%) */
	--tp-2-bold-font: var(--fw-bold) 1.4rem / 1.61rem var(--ff-raleway);
	--tp-2-bold-ls: 0rem;

	/* === Text Preset 2 (Regular) === */
	/* 14px size / 16.1px line-height (115%) */
	--tp-2-reg-font: var(--fw-regular) 1.4rem / 1.61rem var(--ff-raleway);
	--tp-2-reg-ls: 0rem;

	/* === Text Preset 3 (ExtraBold) === */
	/* 12px size / 13.8px line-height (115%) */
	--tp-3-extrabold-font: var(--fw-extrabold) 1.2rem / 1.38rem var(--ff-raleway);
	--tp-3-extrabold-ls: 0rem;

	/* === Text Preset 3 (Bold) === */
	/* 12px size / 13.8px line-height (115%) */
	--tp-3-bold-font: var(--fw-bold) 1.2rem / 1.38rem var(--ff-raleway);
	--tp-3-bold-ls: 0.1rem; /* 1px */

	/* spacing */
	--spacing-0: 0rem;
	--spacing-100: 0.8rem;
	--spacing-200: 1.6rem;
	--spacing-400: 3.2rem;
	--spacing-500: 4.0rem;
	--spacing-700: 5.6rem;
}

html {
    font-size: 62.5%;
    font-family: var(--ff-raleway);
}

body {
    background-color: var(--colors-blue-950);
    background-image: url("images/bg-desktop.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding-inline: 3.2rem;
}

main{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing-400);
    max-width: 92.2rem;
    width: 100%;
    min-width: 30rem;
}

.buttons-card{
    background: var(--colors-blue-850);
    padding: 4rem;
    border-radius: 1rem 10rem 1rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    height: 20.1rem;
    width: 35rem;
    box-shadow: 0 75px 100px -30px rgba(0, 0, 0, 0.25);
    max-width: 35rem;
    width: 100%;
    flex-shrink: 2;
}
.buttons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-200);
}
.btn{
    background-color: var(--colors-blue-950);
    width: 4.8rem;
    height: 4.8rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border: solid transparent ;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.1s ease-in;
}
.btn:hover{
    border:1px solid var(--colors-blue-600);
}
.storage-card{
    color:#FFFFFF;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 54rem;
    height: 15.4rem;
    background-color: var(--colors-blue-850);
    border-radius: 1rem;
    box-shadow: 0 75px 100px -30px rgba(0, 0, 0, 0.25);
    padding-inline: 3.85rem;
    position: relative;
    width: 100%;
    flex-shrink: 1;
}
.used-storage p {
    font: var(--tp-2-reg-font);
    letter-spacing: var(--tp-2-reg-ls);
    color: var(--colors-blue-200);
}
.used-storage-track{
    width: 100%;
    height: 2rem;
    background: var(--colors-blue-900);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;    
    justify-content: center;
    padding: 3px;
    margin-bottom: var(--spacing-100);
    margin-top: var(--spacing-200);
}

.used-storage-fill{
    width:80%;
    height: 1.4rem;
    background: var(--colors-gradient-2, linear-gradient(90deg, #FFA197 0%, #FF4A95 100%));
    border-radius: 0.8rem;
    position:relative;
}
.circle{
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #FFF;
    right:2px;
    top: 50%;
    transform: translateY(-50%);
}

.min-max-values{
   display: flex;
   justify-content: space-between;
   align-items: center;
    width: 100%;
    font:var(--tp-3-bold-font);
    letter-spacing: var(--tp-3-bold-ls);
    color:var(--colors-blue-200);
}
.available-storage-space{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-100);
    position: absolute;
    top: -3.9rem;
    right: 3.85rem;
    background-color: #ffffff;
    height: 7.2rem;
    width: 17.9rem;
    border-radius: 1rem 1rem 0 1rem;
    font: var(--tp-3-bold-font);
    letter-spacing: var(--tp-3-bold-ls);
    color:rgba(133, 136, 149, 1);
}
.available-storage-space::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 2rem solid #ffffff;
    border-left: 2rem solid transparent;
}
#available-starage-value {
    color: var(--colors-blue-950);
    font: var(--tp-1-font);
    letter-spacing: var(--tp-1-ls);
}




@media (max-width: 768px) {
    body {
       background-image: url("images/Background.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 43vh;
    }
   main{
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-200);
    max-width: 54rem;
   }
   .buttons-card{
    align-self: flex-start;
   }
   .available-storage-space {
    border-radius: 1rem;
    top:unset;
    right:unset;
    bottom:0 ;
    left:50%;
    translate: -50% 50%;

   }
   .available-storage-space::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 0 solid #ffffff;
    border-left: 0 solid #FFF;
}
}


@media (max-width: 375px) {
    body {
        background-image: url(images/bg-mobile.png);
        padding-inline: 2.4rem;
        background-size: 100% 100%;
    }
    .buttons-card{
        max-width:32.6rem;
    }
    .storage-card{
        padding-inline:3.2rem;
    }
}