:root {
    --default-background: linear-gradient(90deg, rgba(237,134,56,1) 50%, rgba(230,98,0,1) 100%);
    --footer-height: 100px;
    --social-text-color: rgba(230,98,0,1);
    --tagline-animation: slideRight 2s, fadeIn 1s;
}

html,body {
    background: var(--default-background);
}


.footer-container {
    background: var(--default-background);
}

#social-dropdown .dropdown-item:focus {
    background: var(--default-background) !important;
    color:white;
}

#social-dropdown .dropdown-menu {
    /* min-width:200px; */
    width:auto;
}

.social-box {
    display:none;
    opacity:0;
    position:relative;
}

.social-box.active {
    display:block;
    opacity:1;
    animation: fadeIn 1s, slideUp .5s;
}

.logos img {
    height: 40px;
}

.social-icon {
    color: var(--social-text-color);
}

#tagline {
    transition:all 1s;
    position:relative;
    animation: var(--tagline-animation);
}

#login-message.error {
    background: linear-gradient(90deg, rgba(var(--bs-danger-rgb),0) 10%, rgba(var(--bs-danger-rgb),0.44723827030812324) 55%, rgba(var(--bs-danger-rgb),1) 90%);
}

#login-message.error::after {
    content: "";
    background: rgb(var(--bs-danger-rgb));
    height:100%;
    width:200px;
    right: -200px;
    top:0;
    position:absolute;
}

@keyframes slideRight {
    from { right:40px; }
    to { right:0px; }
}

@keyframes slideLeft {
    from { left:40px; }
    to { left:0px; }
}

@keyframes scaleIn {
    from { transform:scale(1.1); }
    to { transform:scale(1); }
}

@keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
}

@keyframes dimIn {
    from { opacity:0.8; }
    to { opacity:1; }
}

@keyframes slideUp {
    from { bottom:-15px; }
    to { bottom:0px; }
}

@media screen and (max-width: 1024px) {
    .logos img {
        height: 30px;
        max-width:50%;
    }

    #login-message.error {
        background: linear-gradient(270deg, rgba(var(--bs-danger-rgb),0) 10%, rgba(var(--bs-danger-rgb),0.44723827030812324) 55%, rgba(var(--bs-danger-rgb),1) 90%);
    }

    #login-message.error::after {
        right: auto;
        left: -200px;
    }
}