:root {

    --app-main-light-color: #37d49b;
    --app-main-light-color-rgb: 55, 212, 155;
    --app-main-medium-color: #2cc287;
    --app-main-dark-color: #3aaa6a;

    --app-light-green: #37d49b;
    --app-light-green-rgb: 55, 212, 155;
    --app-medium-green: #2cc287;
    --app-dark-green: #3aaa6a;

    --app-light-blue: #37a5d4;
    --app-light-blue-rgb: 55, 165, 212;
    --app-medium-blue: #2c87c2;
    --app-dark-blue: #3a6aaa;

    --app-light-orange: #f18c4d;
    --app-light-orange-rgb: 241, 140, 77;
    --app-medium-orange: #ee745b;
    --app-dark-orange: #eb5d3a;

    --app-light-red: #d4374e;
    --app-light-red-rgb: 212, 55, 78;
    --app-medium-red: #c22c2c;
    --app-dark-red: #aa3a3a;

    --app-light-purple: #a537d4;
    --app-light-purple-rgb: 165, 55, 212;
    --app-medium-purple: #872cc2;
    --app-dark-purple: #6a3aaa;

    --app-light-grey: #c6c6c6;
    --app-medium-grey: #9d9c9c;
    --app-dark-grey: #70706f;

    --app-light-yellow: #DAA520;
    /* --app-light-yellow: #f4e85a; */
    --app-light-yellow-rgb: 218, 165, 32;
    --app-medium-yellow: #B8860B;
    /* --app-medium-yellow: #e6d147; */
    --app-dark-yellow: #8B7500;
    /* --app-dark-yellow: #d4c244; */

    --triangle-transition-duration: 0.5s;
    --app-min-height-triangle-menu: 96px;
    --app-background-color: white;
    --app-text-color: black;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    background: var(--app-background-color);
    color: var(--app-text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none !important;
}

.app-btn {
    color: white;
    border: none;
    padding: 5px 10px;
    margin: 0px 0px 5px 0px;
    border-radius: 10px;
    font-size: 1rem;
    text-transform: uppercase;
    display: inline-block;
    background-color: var(--app-main-dark-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.app-btn:hover {
    transform: scale(1.1);
    background-color: var(--app-main-light-color);
}

.app-btn a {
    color: white !important;
    text-decoration: none !important;
}

.app-uppercase {
    text-transform: uppercase;
}

.app-underline {
    text-decoration: underline;
}

.app-flash-success {
    text-align: center;
    font-size: 1.1rem;
    text-transform: uppercase;
    background-color: var(--app-main-dark-color);
    color: white;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.app-flash-error {
    text-align: center;
    font-size: 1.1rem;
    text-transform: uppercase;
    background-color: red;
    color: white;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.app-flash-success p,
.app-flash-error p {
    margin: 0;
}