/* Root and Body */

:root {
--bs-body-font-family: "Barlow Condensed", sans-serif;
--bs-border-radius: 5px;
--inkbash-light-red: #f98691;
--inkbash-red: #dc3545;
--inkbash-dark-red: #bb2d3b;
--dark-bg: #260004;
}

/* Font and Global styles */

p {
    font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Condensed", sans-serif;
    font-style: normal;
    text-transform: uppercase;
}

section {
    padding-top: 6em;
    padding-bottom: 6em;
}

.btn-inkbash {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--inkbash-red);
    --bs-btn-border-color: var(--inkbash-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--inkbash-dark-red);
    --bs-btn-hover-border-color:  var(--inkbash-dark-red);
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg:  var(--inkbash-dark-red);
    --bs-btn-active-border-color:  var(--inkbash-dark-red);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg:  var(--inkbash-red);
    --bs-btn-disabled-border-color:  var(--inkbash-red);
    font-size: 1.5em;
}

.btn-large {
    margin-top: 1em;
    padding: 0.25em 1em;
    font-size: 2em;
    border-radius: 5px;
}

.dark-bg {
    background-color: var( --dark-bg);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.red-highlight {
    color: var(--inkbash-light-red) !important;
}

.red-text {
    color: var(--inkbash-red) !important;
}

.text-align-center {
    text-align: center;
}

.pad-left-2em {
    padding-left: 2em;
}

.pad-right-2em {
    padding-right: 2em;
}

.y-pad-1em {
    padding-top: 1em;
    padding-bottom: 1em;
}

.y-pad-2em {
    padding-top: 2em;
    padding-bottom: 2em;
}

.pad-bot-2em {
    padding-bottom: 2em;
}

/* Navbar */

.navbar-nav {
    font-size: 1.75em;
}

/* Header */

.header-image {
    position: relative;
    background: url('../images/header.jpg') no-repeat top center/cover;
    height: 50vh;
}

.header-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    line-height: 2;
}

.header-text h1, .header-text h2, .header-text h3 {
    line-height: 2;
}

.header-section {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/lisa-latorre-winner-2024.webp') no-repeat center center/cover;
    height: 80vh;
    background-attachment: fixed; /* Creates the parallax effect */
}

.header-date-inkbash {
    padding: 1em;
    background-color: var(--inkbash-red);
    width: 50%;
    border-radius: 5px 5px 25px 5px;
    margin-bottom: 2em;
}

.overlay-header {
    text-align: center;
    color: white;
    padding-bottom: 4em;
}

.overlay-text {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    color: white;
    border-radius: 8px;
}

/* Content columns */

.image-column {
    background: url('../images/lisa-latorre-winner-2024.webp') no-repeat center center/cover;
    min-height: 300px; /* Adjust as needed */
}

/* Social Media Section */

.social-media {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/social-bg.jpg') no-repeat center center/cover;
    height: 100%;
    min-height: 300px; /* Adjust as needed */
}

/* Awards */

.award-rel {
    position: relative;
    border-radius: 5px;
}

.award-img {
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 15px;
}

.award-block {
    position: absolute;
    bottom: 50px;
    left: 0;
    padding: 0.25em 1em;
    width: 100%;
    background-color: var(--bs-body-bg);
    text-align: center;
}

.award-block-red {
    background-color: var(--inkbash-red) !important;
}

.award-block h1, .award-block h2 {
    font-family: "Barlow Condensed", sans-serif !important;
}

/* Traders */

.trader-rel {
    position: relative;
    border-radius: 5px;
}

.trader-img {
    width: 90%;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 15px;
}

.trader-block {
    position: absolute;
    bottom: 50px;
    left: 5%;
    padding: 0.25em 1em;
    width: 90%;
    background-color: var(--bs-body-bg);
    text-align: center;
}

.trader-block-red {
    background-color: var(--inkbash-red) !important;
}

.trader-block h1, .trader-block h2 {
    font-family: "Barlow Condensed", sans-serif !important;
}


/* Media Queries */

@media (max-width: 1000px) {
    .header-date-inkbash {
        width: 100%;
    }
}