@import url("fonts-1Xs-zNJ.css");

/* General */
:root {
    --text-color-hover: #6a6b6c;
    --w-bg: rgba(255, 255, 255, .5);
    --radius: 1rem;
    --spacing: 1rem;
    --shadow: 0px 4px 78px -26px var(--bs-black);
}

* {
    box-sizing: border-box;
}

body {
    background-image: url('https://picsum.photos/1500');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Poppins",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        "Noto Sans",
        "Liberation Sans",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}


a {
    text-decoration: none;
    color: var(--bs-body-color);
    transition: 350ms ease-in-out;

    &:hover,
    &:focus,
    &:active {
        color: var(--text-color-hover);
    }
}

.loading {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        z-index: 99;
        top: 0;
        left: 50%;
        right: 50%;
        bottom: 0;
        translate: -50% -50%;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 5px dotted var(--bs-body-color);
        animation: rotating 2s linear infinite;
    }
}

/* Bootstrap */
.container {
    max-width: 90%;
}

.card {
    background: var(--w-bg);
    padding: var(--spacing);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(11.5px);

    .card-title {
        display: flex;
        justify-content: space-between;
    }
}

/* Menu Header */

header#main-header {
    display: flex;
    justify-content: space-between;
    height: 130px;
    background: var(--w-bg);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    margin: 0 0 calc(var(--spacing) * 3) 0;
    box-shadow: var(--shadow);
    backdrop-filter: blur(11.5px);

    #weather {
        display: flex;
        align-items: center;
        gap: var(--spacing);
        height: 100%;
        padding: calc(var(--spacing) * 1.5);

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

            &:nth-of-type(2) {
                border-left: 1px dashed var(--bs-body-color);
                border-right: 1px dashed var(--bs-body-color);
                padding: 0 var(--spacing);
            }

            .icon i {
                font-size: 48px;
            }

            .value {
                font-weight: bolder;
            }
        }

    }

    ul#login-out {
        padding: var(--spacing);
    }
}


/* Home */

section#home {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);

    .bookmarks {
        width: 25%;
        min-width: 400px;
        height: fit-content;
        padding: var(--spacing) 0;


        .links {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: center;
            align-items: center; */
            gap: 0.5rem;
        }

        a.bookmark-item {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, .25);
            width: 95px;
            height: 95px;
            box-shadow: var(--shadow);
            border-radius: var(--radius);
            backdrop-filter: blur(11.5px);

            picture {
                aspect-ratio: 1 / 1;
                width: 90%;
                height: 90%;
                border-radius: var(--spacing);
                overflow: hidden;
            }

            img {
                aspect-ratio: 1 / 1;
                width: 100%;
                height: 100%;
            }
        }
    }

    .reddits {
        width: 75%;

        a.reddit-item {
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-bottom: 1px dotted var(--bs-body-color);
            margin: 0 0 var(--spacing);
            padding: 0 0 var(--spacing);
        }

        img.reddit-thumb {
            width: 10%;
            object-fit: cover;
        }

        .reddit-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 85%;
        }
    }
}


/* cruds */

.crud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ANIMATIONS */

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}