:root {
    --white-white: #FFF;
    --accents-orange-50: #FD9100;
    --accents-orange-50-shadow: #BF740F;
    --gray-gray-0: #E4E9EE;
    --gray-gray-10: #C3CCD3;
    --gray-gray-20: #A3AFB9;
    --gray-gray-50: #415769;
    --blue-blue-10: #E1F7FF;
    --blue-blue-50: #3FC0F0;
    --accents-beige: #FEF7EE;
    --bs-breakpoint-sm: 576px;
    --padding-standard: 8px 40px;
    --spacing-gap: 20px;
    /* Define theme colors for the travellers */
    --travellers-alex-20: #DEF5AE;
    --travellers-ari-20: #FFE2A8;
    --travellers-asa-20: #95E3ED;
    --travellers-leo-20: #AFDCFF;
    --travellers-luca-20: #B7A9EC;
    --travellers-mika-20: #C2F2CC;
    --travellers-niki-20: #B1F9EB;
    --travellers-ollie-20: #FFD1C7;
    --travellers-robin-20: #FFC0C0;
    --travellers-yuki-20: #FFB5CD;
}

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

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Cherry Pie';
    src: url('../fonts/CherryPie-WithPound.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@media (orientation: portrait) {
    /* Only display in portrait orientation */
    .d-portrait-block { display: block !important; }
    .d-portrait-flex { display: flex !important; }
    .d-portrait-inline { display: inline !important; }
    .d-portrait-inline-block { display: inline-block !important; }

    /* Hide on portrait orientation */
    .d-portrait-none { display: none !important; }
}

@media (orientation: landscape) {
    /* Only display in landscape orientation */
    .d-landscape-block { display: block !important; }
    .d-landscape-flex { display: flex !important; }
    .d-landscape-inline { display: inline !important; }
    .d-landscape-inline-block { display: inline-block !important; }

    /* Hide on landscape orientation */
    .d-landscape-none { display: none !important; }
}

/* Shared UI elements */
.btn-secondary {
    background-color: var(--blue-blue-50, #3FC0F0);
    border-color: transparent;
    border-radius: 16px;
}

/* Footer */
Footer {
    background-color: transparent;
    padding: clamp(10px, 5vh, 24px) 0;
}