body {
    background-color: #fffef9;
    font-family: 'Montserrat', sans-serif;
}

a {
    text-decoration: none;
}

.mt-r-3 {
    margin-top: 3rem;
}

.mt-r-1 {
    margin-right: 1rem;
}

.mb-r-1 {
    margin-bottom: 1rem;
}

.header {
    background: #F3FCFF;
    background: linear-gradient(90deg,rgba(243, 252, 255, 1) 50%, rgba(183, 227, 243, 1) 80%);
}

.header-big-icon {
    height: 600px;
}

@media (min-width: 769px) {
    .header-big-icon {
        background-image: url('/images/background.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position-x: right;
    }
}

.header-heart-icon {
    position: absolute;
    top:10px;
    right: 20px;
    width: 128px;
}

.header-menu-text {
    color: #4E342E;
    margin-left: 1rem;
}

.title {
    font-size: 5vw;
    font-weight: bold;
    color: #4E342E;
    line-height: 4rem;
}

.title-desc {
    font-size: 2.5vw;
    color: #4E342E;
    line-height: 3rem;
}

.btn-primary {
    --bs-btn-bg: #fe8041;
    --bs-btn-border-color: #ff5605;
    --bs-btn-hover-bg: transperent;
    --bs-btn-hover-border-color: #ff5605;
    --bs-btn-hover-color: #ff5605;
}

.btn-info {
    --bs-btn-bg: #4eabcf;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #4eabcf;
    --bs-btn-active-bg: #4eabcf;
    --bs-btn-hover-bg: transperent;
    --bs-btn-hover-border-color: #4eabcf;
}
.btn-outline-info {
    --bs-btn-color: #4eabcf;
    --bs-btn-border-color: #4eabcf;
    --bs-btn-active-bg: #4eabcf;
    --bs-btn-hover-bg: #4eabcf;
    --bs-btn-hover-border-color: #4eabcf;
}

.feature {
    font-weight: bold;
    font-size: 2rem;
    color: #4E342E;
    margin-bottom: 2rem
}
.discuss-problem {
    background-color: #fef1c4;
    border-color: #fef1c4;
    border-radius: 10px;
}

.discuss-problem a {
    background-color: #ffe2a7;
    border-color: #ffe2a7;
    border-radius: 20px;
    color: #000;

    --bs-btn-color: #ffe2a7;
    --bs-btn-border-color: #ffe2a7;
    --bs-btn-active-bg: #ffe2a7;
    --bs-btn-hover-bg: transperent;
    --bs-btn-hover-border-color: #ffe2a7;
    --bs-btn-hover-color: #000;
}

.discuss-problem-title {
    font-weight: bold;
}

.advice {
    background-color: #e3f5f8;
    border-color: #e3f5f8;
    border-radius: 10px;
}

.advice a {
    background-color: #bee1ed;
    border-color: #bee1ed;
    border-radius: 20px;
    color: #000;

    --bs-btn-color: #bee1ed;
    --bs-btn-border-color: #bee1ed;
    --bs-btn-active-bg: #bee1ed;
    --bs-btn-hover-bg: transperent;
    --bs-btn-hover-border-color: #bee1ed;
    --bs-btn-hover-color: #000;
}

.advice-title {
    font-weight: bold;
}

.inspiration {
    background-color: #ffeeb7;
    border-color: #ffeeb7;
    border-radius: 10px;
}

.inspiration a {
    background-color: #ffd179;
    border-color: #ffd179;
    border-radius: 20px;
    color: #000;

    --bs-btn-color: #ffd179;
    --bs-btn-border-color: #ffd179;
    --bs-btn-active-bg: #ffd179;
    --bs-btn-hover-bg: transperent;
    --bs-btn-hover-border-color: #ffd179;
    --bs-btn-hover-color: #000;
}

.inspiration-title {
    font-weight: bold;
}

.diary {
    background-color: #fff2d0;
    border-color: #fff2d0;
    border-radius: 10px;
}

.diary a {
    background-color: #ffe2a9;
    border-color: #ffe2a9;
    border-radius: 20px;
    color: #000;

    --bs-btn-color: #ffe2a9;
    --bs-btn-border-color: #ffe2a9;
    --bs-btn-active-bg: #ffe2a9;
    --bs-btn-hover-bg: transperent;
    --bs-btn-hover-border-color: #ffe2a9;
    --bs-btn-hover-color: #000;
}

.diary-title {
    font-weight: bold;
}

.footer-box {
    position: relative;
    background-image: url('/images/tube.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right 80px;
    background-position-y: bottom -5px;
    background-color: #fff7d8;
    border-radius: 10px
}

.footer-box-heart-icon {
    position: absolute;
    top: 40px;
    right: 2.5%;
    width: 64px;
}

.footer-box-title {
    font-size:2vw;
    margin-bottom: 1rem
}

.footer-box-desc {
    margin-bottom: 1.5rem
}