@charset "utf-8";
@import "./darkstyles.css"(prefers-color-scheme: dark);
@import "./lightstyles.css"(prefers-color-scheme: light);


body {
    font-size: 15px;
}

.title {
    color: unset;
}

.navbar-burger {
    color: white;
}

.navbar-burger:hover {
    color: white;
}


.hero.is-primary .navbar-item,
.hero.is-primary .navbar-link {
    color: unset;
}

.card-header {
    box-shadow: unset;
}

.card-footer {
    border-top: unset;
}

.table th,
.table td {
    vertical-align: middle;
    min-width: 120px;
}

.section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.notification {
    display: block;
    opacity: 0;
    transition: all .4s;
    text-align: center;
    padding: 1.25rem;
    width: 150px;
    height: 150px;
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1), 0 0px 0 1px rgba(10, 10, 10, .02);
    transition: all .4s;
}

.notification.show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.notification i {
    font-size: 3em;
    margin: auto;
}



@media screen and (max-width: 1023px) {
    .navbar-menu {
        display: block;
        opacity: 0;

        position: absolute;
        /* or float: left; width: 100%;*/
        left: 0;
        right: 0;
        transition: all .4s;
        pointer-events: none;
    }

    .navbar-brand {
        position: relative;
    }

    .navbar-menu.is-active {
        z-index: 1;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* Pumping font awesome heat style */
.pump {
    /* size of the heart */
    /* font-size: 10px; */
    /* color of the heart */
    color: rgba(255, 0, 0, 0.1);
    animation: pump
        /*the first one corresponds to heart pumping speed, the huger the slower*/
        600ms 0ms infinite linear reverse
}

@keyframes pump {
    from {
        color: rgba(207, 40, 104, 0.1);
    }

    to {
        color: rgb(241, 19, 104);
    }
}

.star {
    color: rgba(126, 90, 13, 0.1);
    animation: star 600ms 0ms infinite linear reverse
}

@keyframes star {
    from {
        color: rgba(126, 90, 13, 0.1);
    }

    to {
        color: rgb(247, 215, 4);
    }
}