@font-face {
    font-family: 'Obsidian';
    src: url('Obsidian.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* --border-radius: 20px;
    --main-colour1: rgb(0, 90, 130);
    --main-colour2: rgb(0, 95, 173);
    --border-colour: rgb(0, 120, 170);
    --title-colour-fade: rgba(0, 91, 130, 0);
    --acknowledgement-card-colour: rgb(0, 90, 130, 0.9);
    --sun-image: url("images/webp/blueSunTransparent.webp");
    --sun-glow-colour1: rgb(0, 95, 173); */

    --main-colour1: #0A4F8A;
    --main-colour2: #0E65AF;
    --border-colour: #145D86;
    --highlight-colour: #3DBBFF;
    --glow-colour: #5CD4FF;

    --background-dark: #07121C;
    --background-mid: #0A1A2D;

    --gradient-main: linear-gradient(135deg, #000000, #052c4d);
    --gradient-accent: linear-gradient(135deg, #0A4F8A, #0E65AF, #3DBBFF);
    --gradient-accent-transparent: linear-gradient(135deg, rgba(10, 78, 138, 0.5), rgb(14, 101, 175, 0.5), rgb(61, 187, 255, 0.5));
    --gradient-dark: linear-gradient(135deg, #000000, #222222);
    --gradient-light: linear-gradient(135deg, #1d1d1d, #383838);

    --radius1: 0.5rem;
    --radius2: 1rem;
}

.theme-alt {
    /* --border-radius: 20px;
    --main-colour1: rgb(130, 0, 0);
    --main-colour2: rgb(173, 0, 0);
    --border-colour: rgb(234, 0, 0);
    --title-colour-fade: rgba(130, 0, 0, 0);
    --acknowledgement-card-colour: rgba(130, 0, 0, 0.9);
    --sun-image: url("images/webp/redSunTransparent.webp");
    --sun-glow-colour1: rgb(173, 61, 0); */

    --main-colour1: #7A0B12;
    --main-colour2: #B0151F;
    --border-colour: #8E1A20;
    --highlight-colour: #FF4B4B;
    --glow-colour: #FF6F6F;

    --background-dark: #1A090A;
    --background-mid: #220A0C;

    --gradient-main: linear-gradient(135deg, #000000, #4d0505);
    --gradient-accent: linear-gradient(135deg, #7A0B12, #B0151F, #FF4B4B);
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;

    background: var(--background-dark);
    color: white;
}






/* Make the page a vertical flex layout */

/* MAIN CONTENT SHOULD GROW */
.site-content {
    flex: 1;
    /* pushes footer down */
    width: 100%;
    /* padding: 20px; */
}

/* FOOTER AT BOTTOM IF EMPTY CONTENT */
.site-footer {
}







h1,
h2,
h3 {
    text-align: center;
    font-family: 'Obsidian', Arial, sans-serif;
}

h1 {
    transition: font-size 0.5s ease;
}

p, li, ul {
    font-size: 1.15rem;
}

@media (max-width: 768px) {
}










.fade-in {
    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
}

.fade-in.delay-1 {
    animation-delay: 1s;
}

.fade-in.delay-2 {
    animation-delay: 2s;
}

.fade-in.delay-3 {
    animation-delay: 3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}







/* =======================================
   Custom Scrollbars — Matches Your Theme
   ======================================= */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    /* for horizontal scrolling areas */
}

::-webkit-scrollbar-track {
    background: var(--background-mid);
    border-radius: var(--radius1);
}

::-webkit-scrollbar-thumb {
    background: none;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main-colour1);
    cursor: pointer;
}


















/* Set the different background images - specified in each container class  */
.bg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 0.125rem solid var(--highlight-colour);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 900px;
}

/* Text over the background images */
.bg-container-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bg-container-text h1 {
    font-size: 10rem;
}

.bg-container-text p {
    font-size: 1.5rem;
    text-align: center;
}

.scroll-cue {
  font-size: 10rem;
  opacity: 0.75;
  animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(8px); }
  100% { transform: translateY(0); }
}

@media (max-width: 1080px) {
    .bg-container-text h1 {
        font-size: 7.5rem;
    }

    .scroll-cue {
        font-size: 7.5rem;
    }
}

@media (max-width: 768px) {
    .bg-container-text h1 {
        font-size: 5rem;
    }

    .scroll-cue {
        font-size: 5rem;
    }

    .bg-container {
        height: 500px;
    }
}

.bg-joinUs {
    background-image: url('../images/webp/49.webp');
}

.bg-about {
    background-image: url('../images/webp/49.webp');
}

.bg-gallery {
    background-image: url('../images/webp/10.webp');
}

.bg-officers1 {
    background-image: url('../images/webp/66.webp');
}

.bg-fleet1 {
    background-image: url('../images/webp/140.webp');
}

.bg-acknowledgements {
    background-image: url('../images/webp/202.webp');
}

.bg-guides {
    background-image: url('../images/webp/193.webp');
}

.bg-timeline {
    background-image: url('../images/webp/233.webp');
}

.bg-members-login {
    background-image: url('../images/webp/199.webp');
}