@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');

:root {
    --card-color: hsla(197, 24%, 94%, 0.95);
    --cardhover: #d7dddd;
    --homework: #e68fa1;
    --math: #b08ac9;
    --deadline: #6eaaf1;
    --fontcolor: black;
    --lvl: #f77779;
    --age: #ee976b;
    --exp: #65c0bd;
    --taskexp: #65c0bd;
}

[data-theme="dark"] {
    --card-color: #37393b;
    --cardhover: #515253;
    --homework: #b56576;
    --math: #6d597a;
    --deadline: #355070;
    --fontcolor: white;
    --lvl: #f94144;
    --age: #f9844a;
    --exp: #4d908e;
    --taskexp: #4d908e;
}


body {
    background-image: url(./media/3.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;


    color: var(--fontcolor);
    font-family: 'Source Sans Pro', sans-serif, 'Times New Roman';
}

/* THEME SWITCHER */

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 30px;
    font-size: 2rem;
    padding: 0px 10px;
}

.theme-switch-wrapper:hover {
    color: var(--fontcolor);
    background-color: var(--card-color);
    transition: .3s;
}

.theme-switch-wrapper:hover,
#theme-image:hover {
    cursor: pointer;
}

.theme-switch {
    display: inline-block;
    position: relative;
}

.theme-switch input {
    display: none;
}


.homework {
    background-color: var(--homework);
}

/* Information Card */

.card {
    margin-top: 15px;
}

.card:hover {
    background-color: var(--cardhover);
}

#information-card-image img {
    width: 130px;
    border-radius: 10px;
}

h5.information-name {
    margin-top: 5px;
    font-size: 1.40rem;
    font-weight: bold;
    letter-spacing: 1px;
}

#information-card {
    background-color: var(--card-color) !important;

}

#information .btn {
    color: var(--fontcolor);
    letter-spacing: 1px;
    display: inline;
    margin-top: 10px;
}

.btn-lvl {
    background-color: var(--lvl);
}

.btn-age {
    background-color: var(--age);
}

.btn-exp {
    background-color: var(--exp);
}

.progress {
    width: 100%;
    background-color: #949494;
}

#myBar {
    width: 0%;
}

/* Task Cards */

h5.card-title {
    font-size: 1.40rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.btn {
    color: var(--fontcolor);
    letter-spacing: 1px;
}

.btn {
    color: var(--fontcolor);
}

.btn-homework {
    background-color: var(--homework);
}

.btn-subj-math {
    background-color: var(--math);
}

.btn-exp {
    background-color: var(--taskexp);
}

.btn-deadline {
    background-color: var(--deadline);
}

.timeline-container {
    background-color: black;
    width: 60px;
    height: inherit;
}

.card {
    background-color: var(--card-color);
    font-weight: 400;
}

.list-icon {
    margin-top: 2px;
    width: 20px;
    height: 20px;
    transition-duration: 0.3s;
    color: var(--fontcolor);
}

.rotate {
    transform: rotate(90deg);
    transition-duration: 0.3s;
}

.card .task-checkbox {
    position: absolute;
    right: 0px;
    top: -0;
    text-align: right;
}

.card .task-checkbox .done {
    height: 30px;
    width: 30px;
}

.row {
    flex-wrap: nowrap !important;
}

.col-md-6 {
    margin-top: 10px;
    max-width: 90% !important;
    font-size: 1.1rem;
    letter-spacing: .3px;
}

.list-text {
    width: 100%;
    margin: 0;
}

.nav {
    z-index: 1;
}

.card.rounded {
    border-radius: .5rem !important;
}





#information-card {
    margin-bottom: 7rem;
    animation: slide-in-bottom 0.7s ease-in-out both;
    width: 27rem;
    height: 27rem;
    background-color: hsla(180, 8%, 85%, .95);
}

#information-card-image {
    height: 150px;
    width: 150px;
}


.slide-in-left {
    -webkit-animation: slide-in-left 0.7s ease-in-out both;
    animation: slide-in-left 0.7s ease-in-out both;
}

.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.7s ease-in-out both;
    animation: slide-in-bottom 0.7s ease-in-out both;
}

.slide-out-bottom {
    -webkit-animation: slide-out-bottom 0.7s ease-in-out both;
    animation: slide-out-bottom 0.7s ease-in-out both;
}


#cards-container {
    max-height: 80vh;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    z-index: 5;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-7-27 16:3:10 Licensed under FreeBSD License. See
 * http://animista.net/license for more info. w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}



@keyframes slide-in-bottom {
    0% {

        transform: translateY(5rem);
        opacity: 0
    }

    100% {

        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-out-bottom {
    0% {

        transform: translateY(0);
        opacity: 1
    }

    100% {

        transform: translateY(5rem);
        opacity: 0
    }
}


.tree {
    width: 150px;


}


#lvl1 {
    position: fixed;
    z-index: -1;
    bottom: 8rem;
    left: 1vw;
}


#lvl2 {
    position: fixed;
    z-index: -1;
    bottom: 6.5rem;
    left: 80vw;
}

#lvl3 {
    position: fixed;
    z-index: -1;
    bottom: 9rem;
    left: 20vw;
}

#lvl4 {
    position: fixed;
    z-index: -1;
    bottom: 6rem;
    left: 60vw;
}

#lvl5 {
    position: fixed;
    z-index: -1;
    bottom: 6rem;
    left: 40vw;
}

header {
    background-color: var(--card-color);
    margin-top: 0;
}

h1 i {
    color: #0d7000;

}

#logo {
    color: #0d7000;

}

.tree-night {
    filter: brightness(.7)
}