@import url(beauty.css);

body {
    background-color: var(--bg-color);
    color: var(--primary-color);
}

.navbar-header a:hover {
    color: #000000 !important;
}

.trend_bar_wrapper {
    margin-top: 10%;
    height: auto;
    overflow: hidden;
}

.trend_bar {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    margin-right: 0.5%;
    width: 10%;
    height: auto;
    fill: var(--primary-color);
}

#trend_bar_one {
    animation: trendBarOneChange 7.5s ease-in-out 1s infinite;
}

#trend_bar_two {
    animation: trendBarTwoChange 7.5s ease-in-out 1s infinite;
}

#trend_bar_three {
    animation: trendBarThreeChange 7.5s ease-in-out 1s infinite;
}

#index_h1 {
    font-size: 2rem;
    font-weight: bold;
}

#index_buttons {
    margin: 1.5% 0 7.5% 0;
}

.btn {
    margin: 0 0.5% 0 0.5%;
}

.lead_number {
    font-size: 3rem;
    line-height: 3rem;
}

.guide_title, .lead_number {
    margin: 0;
    padding: 0;
}

.lead_number, .guide_title_prompt {
    color: var(--page-gold);
}

.guide_title_prompt:hover {
    color: var(--page-gold);
    text-decoration: underline;
}

.page-content {
    margin-bottom: 10px;
}

footer h3 {
    margin-top: 0;
}

.margin-bottom {
    margin-bottom: 20px;
}

.zero-left-padding {
    padding-left: 0px;
}

.form-float {
    min-height: 100vh;
}

.float-form {
    margin-top: 10%;
}

.float-terms {
    margin-bottom: 10%;
}

.float-terms a {
    color: var(--primary-color);
}

.bci-user-form {
    background-color: var(--primary-color);
    color: var(--alt-primary-color);
    padding: 20px;
    border-radius: 10px;
}

.float-form #profile_photo {
    margin: 0;
    padding: 0;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    border-width: 5px;
    background-color: var(--page-gold);
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
}

.float-form #profile_photo p {
    font-size: 4rem;
    font-weight: bold;
    margin: 0;
    padding-top: 15%;
    user-select: none;
}

.form-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    height: auto;
}

.float-form input[type="submit"] {
    margin-right: 15px;
}

.hidden_link {
    display: none;
}

#set_pass_form, #pw_processor_form {
    padding: 30px;
}

#set_pass_form input[type="submit"], #pw_processor_form input[type="submit"] {
    margin-right: 0;
}

.glyphicon-eye-open, .glyphicon-eye-close {
    cursor: pointer;
}

.comm-members {
    color: var(--alt-primary-color);
}

.comm-members img {
    filter: grayscale(100%);
}

.comm-members img:hover {
    filter: none;
}


@media only screen and (max-width: 767px) {
    @keyframes trendBarOneChange {
        0%{top: 95px; fill: var(--primary-color);}
        29.99%{fill: var(--primary-color);}
        30%{top: 10px; fill: var(--trend-bar-one);}
        90%{top: 10px; fill: var(--trend-bar-one);}
        100%{top: 95px}
    }

    @keyframes trendBarTwoChange {
        0%{top: 142.50px; fill: var(--primary-color);;}
        44.99%{fill: var(--primary-color);}
        45%{top: 10px; fill: var(--trend-bar-two);}
        85%{top: 10px; fill: var(--trend-bar-two);}
        100%{top: 142.50px}
    }
    
    @keyframes trendBarThreeChange {
        0%{top: 190px; fill: var(--primary-color);}
        64.99%{fill: var(--primary-color);}
        65%{top: 10px; fill: var(--trend-bar-three);}
        75%{top: 10px; fill: var(--trend-bar-three);}
        100%{top: 190px}
    }

    .navbar {
        margin-bottom: 0;
    }
    .float-form {
        margin-top: 0%;
    }

    .bci-user-form {
        border-radius: 0;
        height: 100vh;
    }

    .bci-user-form > :first-child {
        margin-top: 20%;
    }
}

@media only screen and (min-width: 768px) {
    #index_h1 {
        font-size: 3rem;
    }

    @keyframes trendBarOneChange {
        0%{top: 150px; fill: var(--primary-color);}
        29.99%{fill: var(--primary-color);}
        30%{top: 5px; fill: var(--trend-bar-one);}
        90%{top: 5px; fill: var(--trend-bar-one);}
        100%{top: 150px}
    }
    
    @keyframes trendBarTwoChange {
        0%{top: 225px; fill: var(--primary-color);}
        44.99%{fill: var(--primary-color);}
        45%{top: 5px; fill: var(--trend-bar-two);}
        85%{top: 5px; fill: var(--trend-bar-two);}
        100%{top: 225px}
    }
    
    @keyframes trendBarThreeChange {
        0%{top: 300px; fill: var(--primary-color);}
        64.99%{fill: var(--primary-color);}
        65%{top: 5px; fill: var(--trend-bar-three)}
        75%{top: 5px; fill: var(--trend-bar-three)}
        100%{top: 300px}
    }
}

@media only screen and (min-width: 1120px) {
    #index_h1 {
        font-size: 4rem;
    }

    @keyframes trendBarOneChange {
        0%{top: 170px; fill: var(--primary-color);}
        29.99%{fill: var(--primary-color);}
        30%{top: 10px; fill: var(--trend-bar-one);}
        90%{top: 10px; fill: var(--trend-bar-one);}
        100%{top: 170px}
    }
    
    @keyframes trendBarTwoChange {
        0%{top: 290px; fill: var(--primary-color);}
        44.99%{fill: var(--primary-color);}
        45%{top: 10px; fill: var(--trend-bar-two);}
        85%{top: 10px; fill: var(--trend-bar-two);}
        100%{top: 290px}
    }
    
    @keyframes trendBarThreeChange {
        0%{top: 400px; fill: var(--primary-color);}
        64.99%{fill: var(--primary-color);}
        65%{top: 10px; fill: var(--trend-bar-three);}
        75%{top: 10px; fill: var(--trend-bar-three);}
        100%{top: 400px}
    }
}