@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

:root {
    --white-color: rgb(255, 255, 255);
    --black-color: rgb(0, 0, 0);
    --text-color: #333;
    --red-color: rgb(238, 77, 45);
    --outline-color: rgb(112, 125, 139);
    --box-shadow: 3px 3px rgba(0, 0, 0, 1);
    --modal: rgba(0, 0, 0, 0.3);
    --blur: rgba(0, 0, 0, 0.6);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;

}

html {
    font-size: 62.5%;
    font-weight: 400;
    line-height: normal;
    font-family: 'Roboto', sans-serif;
    background-color: #eee;
    scroll-behavior: smooth;

}

@media(min-width:600px) {
    body {
        width: 600px;
        margin: 0 auto;
        
    }

    .item img {
        height: 32rem;
    }

    .card-daily .img-daily {
        height: 29rem;
    }
}

@media(max-width:320px) {
    body {
        width: 320px;
        margin: 0 auto;
    }
}

body {
    font-size: 1.4rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-size: 2.4rem;
}

.thc {
    color: var(--white-color);
    -webkit-tap-highlight-color: rgba(51, 181, 229, 0);
}

.dcrt {
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ti {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
}
.ic{
		font-size: 2.4rem;
}
.ls {
    list-style: none;
}

.df {
    display: flex;
    flex-flow: nowrap;
    justify-content: space-between;
    align-items: center;
}

.mw {
    width: 100%;
}

.mh {
    height: 100%;
}

@keyframes a {
    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(40%);
        opacity: 0.6;
    }

    22% {
        transform: translateY(-15%);
    }

    24% {
        transform: translateY(15%);
    }

    26% {
        transform: translateY(-5%);
    }

    28% {
        transform: translateY(5%);
    }

    30% {
        transform: rotate(-40deg);
    }

    35% {
        transform: rotate(40deg);
    }

    40% {
        transform: rotate(-35deg);
    }

    45% {
        transform: rotate(35deg);
    }

    50% {
        transform: rotate(-30deg);
    }

    55% {
        transform: rotate(30deg);
    }

    60% {
        transform: rotate(-25deg);
    }

    65% {
        transform: rotate(25deg);
    }

    70% {
        transform: rotate(-20deg);
    }

    75% {
        transform: rotate(20deg);
    }

    80% {
        transform: rotate(-15deg);
    }

    85% {
        transform: rotate(15deg);
    }

    90% {
        transform: rotate(-10deg);
    }

    95% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes b {
    0% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(10%);
    }

    100% {
        transform: translateY(0);
    }
}

.img-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 25%;
}

#loading {
    position: fixed;
    background-color: #eee;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 3;
}
.load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.load div {
    background-color: var(--red-color);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin: 0.4rem;
    transform: translateY(-50%);
    animation: loading 0.8s ease-in-out alternate infinite;
}
.load div:nth-child(1) {
    animation-delay: -0.4s;
}
.load div:nth-child(2) {
    animation-delay: -0.2s;
}
@keyframes loading {
    from {
        transform: translateY(-50%);
    }
    to {
        transform: translateY(50%);
    }
}

@-webkit-keyframes d {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}
.bi{
		font-size: 2.4rem;
}

.grid-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    padding: 0 0.3rem;
    overflow-y: scroll;
    background-color: white;
}

.grid-row {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    padding: 0 0.3rem;
    background-color: white;
    overflow-x: scroll;
}

.grid-row-1 {
    display: grid;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    padding: 0 0.3rem;
    background-color: white;
    overflow-x: scroll;
}