*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: dark;
    color: rgba(255, 255, 255, 0.87);
    background: linear-gradient(90deg, hsl(216deg 4% 6%) 0%, hsl(215deg 27% 12%) 21.7%, hsl(215deg 27% 12%) 77%, hsl(216deg 4% 6%) 100%);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;

    --card-size: 16rem;
    --accent: hsl(84deg 100% 35%);
    --accent-lighter: hsl(84deg 100% 59%);
}

body {
    margin: 0;
    overflow-x: hidden;
}

h1 {
    font-size: 3.2em;
    line-height: 1.1;
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: inherit;
    border-color: var(--accent);
    cursor: pointer;
    transition: border-color 0.25s, background-color 0.25s;
}

button:hover:enabled {
    box-shadow: 0px 0px 5px 5px var(--accent);
}

button:focus,
button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
}

button:enabled {
    background-color: transparent;
}

button:disabled {
    cursor: auto;
    border-color: transparent
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

.go_up {
    opacity: 0;
    cursor: pointer;
    position: fixed;
    bottom: 4rem;
    z-index: 1;
    background: var(--accent);
    border-radius: 50%;
    width: 75px;
    height: 75px;
    transition: all 0.5s;
    right: -150px;
    color: hsl(215deg 27% 12%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.go_up svg {
    width: 75px;
    height: 75px;
}

.go_up.visible {
    opacity: 1;
    right: 4%;
}

.go_up.visible svg {
    width: 63px;
}

.go_up.visible:hover {
    background: var(--accent-lighter);
    box-shadow: 0px 0px 5px 5px var(--accent-lighter);
}


.App {
    max-width: 1200px;
    width: 80%;
    margin: 0 auto;
}

.header {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.brand {
    margin: 4rem 0px;
}

.brand__title {
    margin: 0px;
    font-size: 6rem;
    line-height: 4.5rem;
}

.brand__title_pixel {
    color: var(--accent-lighter);
    animation:
        pixel_animation_color 3s cubic-bezier(0.19, 1, 0.22, 1) 1s normal forwards;
}

@keyframes pixel_animation_color {
    100% {
        color: white;
    }
}

.brand__title_reducer {
    filter: blur(6px);
    letter-spacing: 1vw;
    opacity: 0;
    color: rgba(255, 255, 255, 1);
    animation:
        reducer_animation_filter 1.5s linear 0s normal forwards,
        reducer_animation_letter-spacing 2.5s cubic-bezier(0.23, 1, 0.320, 1) 0s normal forwards,
        reducer_animation_opacity 1.5s linear 0s normal forwards,
        reducer_animation_color 3s cubic-bezier(0.19, 1, 0.22, 1) 1s normal forwards;
}

@keyframes reducer_animation_filter {
    100% {
        filter: blur(0px);
    }
}

@keyframes reducer_animation_letter-spacing {
    100% {
        letter-spacing: -0.2rem;
    }
}

@keyframes reducer_animation_opacity {
    100% {
        opacity: 1;
    }
}

@keyframes reducer_animation_color {
    100% {
        color: var(--accent-lighter);
    }
}

.brand__subtitle {
    font-size: 2rem;
    color: hsl(0deg 0% 75%);
    margin: 2rem 0px 1rem 0px;
    font-weight: 700;
    line-height: 1em;
}

.brand__subtitle_optimize {
    color: hsl(0deg 0% 75%);
    filter: drop-shadow(0em 0em 20px rgba(255, 0, 0, 0));
    animation:
        optimize_animation 2s ease-out 2s normal forwards;
}

@keyframes optimize_animation {
    100% {
        color: white;
        filter: drop-shadow(0em 0em 10px var(--accent-lighter));
    }
}

.brand__description {
    margin: 0;
    font-size: 1.3rem;
    color: rgb(255 255 255 / 50%);
    font-weight: 300;
}

.form_input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.form_input__label_input {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    width: 100%;
    font-size: 1.3rem;
    font-weight: 700;
}

.form_input__input {
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 1.1rem;
    border-radius: 0.5rem;
    font-family: monospace;
    border: 0px;
    transition: outline 0.25s, box-shadow 0.25s;
}

.form_input__input:valid {
    outline: 2px solid var(--accent);
    box-shadow: 0px 0px 5px 5px var(--accent);
}

.results {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
}

.results__brief {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 2rem auto 0 auto;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 0.5rem;
    padding: 2em;
}

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

.results__brief__url {
    font-family: monospace;
    font-size: 1.5rem;
    margin: 0;
}

.results__brief__description {
    margin: 0;
    color: rgb(255 255 255 / 50%);
    text-align: center;
}

.results__brief__stats {
    display: grid;
    gap: 1rem 2rem;
    grid-template-columns: 1fr 1fr;
    margin-top: 1em;
}

.results_brief_total_stats {
    width: 100%;
    text-align: center;
}

.results__brief__user_selection {
    width: 100%;
    text-align: center;
}

.results__brief__no_images_found {
    font-size: 2.5rem;
    margin: 1rem auto 0px auto;
}

.results__brief__already_optimized {
    color: var(--accent);
}

.results__brief__total_stats_header {
    font-size: 1.6rem;
    margin: 1rem 0px 0px 0px;
}

.results__brief__total_stats_optimized {
    margin: 0;
    color: rgb(255 255 255 / 50%);
}

.results__brief__total_stats_not_optimized {
    margin: 0.5rem 0px 0px 0px;
    color: var(--accent);
}

.results__brief__total_bytes_optimized {
    color: var(--accent-lighter);
}

.results__brief__comparison_size {
    margin-bottom: 1rem;
}


.cards-image-container {
    padding: 0;
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-size), 1fr));
    justify-items: center;
    padding: 44px 54px;
    /*
    box-shadow: 0px 20px 20px 20px rgb(0 0 0 / 18%);
    border-radius: 23px;
    background-color: #ffffff05;
    */
}

.card_image {
    display: flex;
    gap: 0.4rem;
    flex-direction: column;
    list-style-type: none;
    border-radius: 10px;
    padding: 1.2rem;
    width: var(--card-size);
    background-color: hsl(215deg 23% 10%);
    transition: scale 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.75s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.9s ease-in-out;
}

.card_image:hover {
    scale: 1.1;
    box-shadow: -2px 14px 31px 0px rgb(0 0 0 / 50%), inset -1px -112px 37px -20px rgb(255 255 255 / 10%);
    background-color: hsl(213 22% 13% / 1);
}

.card_image.selected {
    outline: 3px solid var(--accent);
}

.card_image__img {
    aspect-ratio: 1/1;
    object-fit: scale-down;
    justify-content: center;
    width: 100%;
    transition: all 0.7s;
    background: rgb(255 255 255 / 8%);
    border-radius: 8px;
    padding: 0.3em;
    cursor: pointer;
}

.card_image:hover .card_image__img {
    transform: translateY(-10px);
    filter: drop-shadow(16px 16px 20px rgba(0, 0, 0, 0.37));
    background: rgb(255 255 255 / 0%);
    scale: 1.2;
}

.card_image footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card_image__file_info {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.card_image__filetype_and_dimensions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}

.card_image__filename {
    color: #fcd34d;
    font-size: 0.9rem;
    font-weight: 700;
}

.card_image__dimensions {
    color: rgb(255 255 255 / 0.5);
    font-size: 0.8rem;
    font-weight: 300;
}

.card_image__type {
    font-size: 0.8em;
    font-weight: 700;
    border-radius: 100px;
    text-transform: uppercase;
    padding: 0px 0.4rem;
}

.card_image__type--avif {
    background-color: hsl(306deg 50% 50%);
    color: white;

}

.card_image__type--bmp {
    background-color: hsl(57deg 50% 50%);
    color: black;

}

.card_image__type--gif {
    background-color: hsl(103, 50%, 50%);
    color: black
}

.card_image__type--jpe {
    background-color: hsl(57deg 50% 50%);
    color: white
}

.card_image__type--jpg {
    background-color: hsl(278, 50%, 50%);
    color: white;

}

.card_image__type--jpeg {
    background-color: hsl(197, 50%, 50%);
    color: black;
}

.card_image__type--png {
    background-color: hsl(0deg 50% 50%);
    color: white
}

.card_image__type--webp {
    background-color: hsl(315, 50%, 50%);
    color: white;

}

.card_image__type--ico {
    background-color: hsl(347, 50%, 50%);
    color: white;

}

.card_image__stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card_image__stats_size {
    text-align: center;
    display: flex;
    border-radius: 111px;
    font-size: 1.2rem;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}

.card_image__stats_saved {
    display: flex;
    background: #42ab0014;
    align-items: center;
    padding: 0.4rem;
    border-radius: 111px;
    transition: all 0.25s;
    justify-content: space-between;
}

.card_image__stats_saved_text {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    margin-left: 1rem;
}

.card_image__download_text {
    font-size: 1.2rem;
}

.card_image__stats_saved_percentage {
    color: hsl(84, 100%, 59%);
    font-size: 1.3rem;
    font-weight: 700;
    transition: all 0.3s;
}

.card_image__stats_saved_bytes {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 300;
}

.card_image__stats_download_icon {
    display: flex;
    margin-right: 0.4rem;
    color: var(--accent);
    transition: color 0.3s;
}

.card_image__stats_saved:hover .card_image__stats_download_icon {
    color: var(--accent-lighter);
}

.card_image__stats_download_icon>img {
    color: var(--accent-lighter);
    fill: var(--accent-lighter);
    stroke: var(--accent-lighter);
}

.card_image__stats_saved:hover {
    background-color: hsl(84deg 27% 6%);
}

.downloadable:hover {
    cursor: pointer;
    box-shadow: 0 0 11px 0px var(--accent-lighter);
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.loader {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.loader::after,
.loader::before {
    animation: loader 2s ease-in-out infinite;
    content: '';
    border: 3px solid var(--accent);
    width: 200px;
    height: 200px;
    position: absolute;
    border-radius: 50%;
}

.loader::after {
    opacity: 0;
    animation-delay: 1s;
}

@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}

@media (max-width: 800px) {
    .header {
        width: 100%;
    }

    .App {
        width: 85%;
        margin: 0 auto;
    }

    .brand {
        margin: 2rem 0px;
    }

    .brand__title {
        font-size: 3.6rem;
        line-height: 2.8rem;
    }

    .brand__subtitle {
        font-size: 1.5rem;
    }

    .brand__description {
        font-size: 1rem;
    }

    button {
        font-size: 1.3rem;
    }

    .cards-image-container {
        padding: 26px 10px;
    }

    .results__brief__stats {
        grid-template-columns: 100%;
    }

    .results__brief {
        width: 100%;
        border: 0px;
        border-radius: 0.5rem;
        padding: 0em;
    }

}