@import "./theme.css";
@import "./buttons.css";
@import "./modal.css";

body {
    font-family: sans-serif;
    background-color: var(--base-0);
    color: var(--text-9);
}

.loading {
    margin-block: 2rem;
    text-align: center;
}
.loading div {
    margin-inline: auto;
    width:  1.4rem;
    height: 1.4rem;
    border: 0.2rem transparent solid;
    border-radius: 1000px;
    border-top-color: var(--null-5);
    border-bottom-color: var(--base-8);
    animation: loading 400ms linear infinite;
}
@keyframes loading {
    to {
        transform: rotate(360deg);
    }
}

.flex-grow {
    flex-grow: 1;
}

.w-full {
    width: 100%;
}


.app-title {
    text-align: center;
}

.home {
    max-width: 70rem;
    margin-inline:auto;
}


.apps {
    padding: var(--s-2);
    width: fit-content;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(8, 8rem);
}
.app {
    background: none;
    border: none;
    color: var(--text-9);
    border-radius: 0.5rem;
    padding: 0.5rem;
}
.app:hover {
    background: #ffffff17;
    border: none;
    
}
.app img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 0.2rem;
}

.options {
    width: fit-content;
    margin-inline: auto;
    display: flex;
    align-items: center;
    background: var(--base-1);
    padding: var(--s-1);
    border-radius: 1000px;
    display: flex;
    gap: 0.5rem;
}


.details-top h2 {
    text-align: center;
}

.details-top img {
    display: block;
    aspect-ratio: 1;
    object-fit: contain;
    width: 8rem;
    margin-inline: auto;
}

.details-bottom .categories {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.upper {
    text-transform: capitalize;
}

.apps-info {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--base-4);
    gap: 1rem;
}

.apps-info i.bi {
    font-size: 2rem;
}


@media screen and (max-width: 70rem) {
   
    .apps {
        grid-template-columns: repeat(6, 8rem);
    }
}
@media screen and (max-width: 60rem) {
   
    .apps {
        grid-template-columns: repeat(4, 8rem);
    }
}
@media screen and (max-width: 50rem) {
   
    .apps {
        grid-template-columns: repeat(3, 8rem);
    }
}
@media screen and (max-width: 40rem) {
   
    .apps {
        grid-template-columns: repeat(2, 8rem);
    }
}