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

:root {
    --card-color: hsla(0, 0%, 88%);
    --homework: #e68fa1;
    --math: #b08ac9;
    --deadline: #6eaaf1;
    --fontcolor: black;
    --lvl: #f77779;
    --age: #ee976b;
    --exp: #65c0bd;
}

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

}


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


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

/* THEME SWITCH */

.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 */
#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 .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%;
}

#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-deadline {
    background-color: var(--deadline);
}

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

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

.nav {
    z-index: 1;
}

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

select,
option {
    color: black;
}

.scale-in-center {
    -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) both;
    animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) both
}