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

* {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
}

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

.bg-primary {
    background-color: #141253;
}

.text-primary {
    color: #141253;
}

.bg-secondary {
    background-color: #272727;
}

.text-secondary {
    color: #272727;
}

.text-muted {
    color: #74bcff;
}

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

.btn-primary {
    background-color: #141253;
    color: #ffffff;
    border: none;
    padding: 0.5em 1em;
    border-radius: 0.15em;
    border: 1px solid #141253;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-radius: 15px;
}

.btn-primary:hover {
    background-color: #272727;
}

.btn-secondary {
    background-color: #ffffff;
    color: #141253;
    border: none;
    padding: 0.5em 1em;
    border-radius: 0.15em;
    border: 1px solid #141253;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-radius: 15px;
}

.btn-secondary:hover {
    background-color: #272727;
    color: #ffffff;
}

.btn-white {
    background-color: #ffffff;
    color: #272727;
    border: none;
    padding: 0.5em 1em;
    border-radius: 0.15em;
    border: 1px solid #141253;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-radius: 15px;
}

.btn-white:hover {
    background-color: #272727;
    color: #ffffff;
}

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

.link-header {
    color: #272727;
    text-decoration: none;
    background-image: linear-gradient(#141253, #141253);
    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;
}

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

.link-header-white {
    color: #ffffff;
    text-decoration: none;
    background-image: linear-gradient(#ffffff, #ffffff);
    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;
}

.link-header-white:hover,
.link-header-white:focus,
.link-header-white:active {
    opacity: 0.75;
    background-size: 100% 0.1em;
    background-position-x: 0%;
}