/* ============== FONTS ============== */

* {
    font-family: "Montserrat", sans-serif;
}

/* ============== COLORS ============== */

.color-main {
    color: #5374B3;
}

.bg-main {
    background-color: #5374B3;
}

/* ============== BUTTONS ============== */

.button-main {
    background-color: #5374B3;
    color: #ffffff;
    border: 1px solid #5374B3;
    padding: 7px 35px;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.button-main:hover {
    background-color: #ffffff;
    color: #5374B3;
}

.button-add {
    background-color: #ffffff;
    color: #5374B3;
    border: 1px solid #5374B3;
    padding: 7px 35px;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.button-add:hover {
    background-color: #5374B3;
    color: #ffffff;
}

.button-white-add {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 7px 35px;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.button-white-add:hover {
    background-color: #ffffff;
    color: #5374B3;
}

/* ============== LINKS ============== */

.link-header {
    color: #3a3a3a;
    text-decoration: none;
    background-image: linear-gradient(#5374B3, #5374B3);
    background-size: 0% 0.1em;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in-out;
    font-weight: 700;
}

.link-header:hover,
.link-header:focus,
.link-header:active {
    color: #5374B3;
    background-size: 100% 0.1em;
    background-position-x: 0%;
}