/* NOTE: only used for properties that cannot be easily set with boostrap */

/* IMAGES */
header img {
    width: 80px;
}

#antibes-img {
    width: 200px;
}


/* COLOURS */
:root {
    --banner-background-colour: #8E1616;
    --banner-text-colour: #E6E6E6;
    --background-colour: #F3F3F3;
    --text-colour: #1F1F1F;
    --dark-background-colour: #171717;
    --link-colour: #004D99;
    --btn-background-colour: #700A0A;
    --btn-text-colour: #FAFAFA;
    --btn-border-colour: #2A2F33;
    --btn-hover-background-colour: #7F1F1F;
    --caption-background-colour: #000000;
    --review-background-colour: #E1E1E1;
}


/* general */
body {
    background-color: var(--background-colour);
}

p, h2, h3, h4, h5, li {
    color: var(--text-colour)
}


/* header */
header {
    background-color: var(--banner-background-colour);
}

h1 {
    color: var(--banner-text-colour);
}


/* nav & footer*/
nav, footer {
    background-color: var(--dark-background-colour);
}

footer .nav-link {
    color: var(--btn-text-colour);
}

footer .nav-link:hover {
    color: var(--banner-background-colour);
}


/* main */
main a {
    color: var(--link-colour);
}

main a:hover {
    color: var(--banner-background-colour);
}

#carouselCareer figcaption {
    background: var(--caption-background-colour);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(237, 221, 83, 0) 100%);
}


/* album reviews*/
#album-aside {
    background-color: var(--review-background-colour);
}

.card {
    background-color: var(--background-colour);
}


/* button */
.btn-primary {
    color: var(--btn-text-colour);
    background-color: var(--btn-background-colour);
    border-color: var(--btn-border-colour);
}

.btn-primary:hover {
    background-color: var(--btn-hover-background-colour);
    border-color: var(--btn-text-colour);
}