/* Fonts */
@import url('fonts.css');

:root {
    --mc: #ff0036;          /* Main color, short 'mc', strongest shade. */
    --mc-plus-2: #ff2251;   /* +2 (56.7%) */
    --mc-plus-6: #ff6686;   /* +6 (70%) */
    --mc-plus-14: #ffeef2;  /* +14 (96.7%) */
    --dark-gray: #212529;
    --black: #000000;  
    --white: #FFFFFF;
}

/* Base Styles */
body p:last-child {
    margin-bottom: 0;
}

/* Links */
p a:link,
p a:visited,
.card a:link,
.card a:visited {
    color: var(--mc) !important;
    text-decoration: none !important;
}

p a:hover,
p a:active,
.card a:hover,
.card a:active {
    color: var(--dark-gray) !important;
    text-decoration: none !important;
}

/* Bootstrap Styles */

/* Navbar */
.navbar {
    background-color: var(--mc) !important;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.55) !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* Buttons */
a.btn-primary,
button.btn-primary {
    color:#FFFFFF;
    background-color: var(--mc);
    border-color: var(--mc);
}

a.btn-primary:hover,
a.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus {
    color:#FFFFFF !important;
    background-color: var(--mc-plus-6);
    border-color: var(--mc-plus-6);
}

/* Text Colors */
.text-muted,
.text-primary {
    color: var(--mc) !important;
}

/* Background Colors */
.bg-primary {
    background-color: var(--mc) !important;
}

/* Borders and Cards */
.border,
.card {
    border: 1px solid var(--mc-plus-6) !important;
}

/* Alerts */ 

.alert-danger {
    background-color: var(--mc-plus-14);
    color: var(--mc);
    border: 1px solid var(--mc-plus-6);
  }   

/* Footer */
footer.bg-dark {
    background-color: var(--mc) !important;
}

footer a:link,
footer a:visited {
    color: rgba(255, 255, 255, 0.55) !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

footer a:hover,
footer a:focus {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* Icons */
body p i.bi, h1 i.bi, h2 i.bi, h3 i.bi {
    color: var(--mc);
}

button i.bi {
    color: #ffffff;
}

button a .bi {
    color: #ffffff;
}

/* Accordion */
.accordion-item {
    border-color: var(--mc-plus-6);
}

.accordion-button:not(.collapsed) {
    background-color: var(--mc-plus-6);
    color: #ffffff;
}

.accordion-button.collapsed {
    background-color: #ffffff;
    color: var(--dark-gray);
}

.accordion-button:not(.collapsed)::after {
    filter: invert(1) brightness(2);
}

/* Background Cover */
.bg-cover {
    background-color: var(--mc-plus-14);
    height: 100vh;
/*     background-position: center;
    background-size: cover;
    background-image: url('your-cover-image.jpg'); */
}

/* Custom styles */

/* Logo */
#site-logo {
    height: auto;
    width: 10vw;
    max-width: 70px;
}

#site-byline {
    font-size:9px;
    font-weight:normal;
}

#login-form {
    width: 50%; 
    max-width: 400px;       
}

/* Background colors */

.bg-ffeef2 {
    background-color: var(--mc-plus-14) !important;
}

.bg-ff6686 {
    background-color: var(--mc-plus-6) !important;
}

/* Tags */

.tag {
    background-color: var(--mc);
    color: var(--white);
    padding:1px 4px 2px 4px;
}

/* Home cover image */ 

#home-cover {
    background: linear-gradient(rgba(33, 37, 44, 0.95), rgba(33, 37, 44, 0.95)), url('../assets/images/markus-spiske-cvBBO4PzWPg-unsplash.jpg');
    background-size: cover;
    background-position: center;
}

/* Home page product image scroll */

.scroll-image {
    width: ; /* Adjust based on your container */
    height: 320px; /* Adjust the height as needed */
    overflow: hidden;
    position: relative;
    border:10px solid var(--mc-plus-14);
    border-radius:10px;
    padding:0;
    margin:0;
    margin-left:-10px;
  }
  
  .scroll-image img {
    position: absolute;
    width: 100%;
    height: auto;
    animation: scroll 45s linear infinite; /* Adjust the duration as needed */
  }
  
  @keyframes scroll {
    0% {
      top: 0;
    }
    50% {
      top: -100%;
    }
    100% {
      top: 0;
    }
  }
  

/* Responsive Styles */
@media (max-width: 800px) {
    #site-logo {
        width: 20vw;
    }

    #login-form {
        width: auto;
        max-width: none;
    }

    .scroll-image {
        width: 100%; /* Adjust based on your container */
        height: 320px; /* Adjust the height as needed */
        margin-left:0;
      }
}