:root {
    --primary-color: #3f4677;
    --secondary-color: #526D82;
    --tertiary-color: #1d1d1d;
    --fourt-color: #d1d4e9;
    --text-color: white;
}

body {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--primary-color);
    background-color: #ebebeb;
}

main {
    flex: 1;
}

.title {
    letter-spacing: -2px;
    color: var(--primary-color) !important;
}

.header {
    position: absolute;
    width: 100%;
    z-index: 3;
    background-color: transparent !important;
}

.header-link {
    font-size: 16px !important;
    font-family: "Rubik", sans-serif !important;
}

.header-link:hover {
    color: var(--primary-color) !important;
}

.footer {
    height: 60px;
    font-size: 17px;
    background-color: var(--tertiary-color);
}

.btn {
    border-radius: 25px;
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}

.btn-random {
    font-size: 17px;
    font-family: "Russo One", sans-serif;
    background-color: black !important;
    height: 45px;
}

.search-icon {
    stroke: white;
}

.form {
    background-color: var(--secondary-color) !important;
}

.text-light {
    color: white;
}

.text-dark {
    color: var(--secondary-color) !important;
}

.title {
    color: white;
    font-size: 25px;
    font-weight: 700;
    font-family: "Russo One", sans-serif;
}

.footer-title {
    font-family: "Russo One", sans-serif;
    color: var(--primary-color) !important;
}

.nav-link {
    font-size: 17px;
    font-family: "Inter", sans-serif;
    color: white !important;
}

.copyright {
    font-size: 15px;
    font-weight: 400;
    color: white !important;
    font-family: "Rubik", sans-serif;
}

.form-floating {
    border: none !important;
}

.form-floating > input, textarea {
    resize: none;
    border: none !important;
    border-radius: 25px !important;
    background-color: rgb(209, 212, 233, 0.3) !important;
}