@import url('bootstrap.min.css');
@import url('bootstrap-icons.min.css');
@import url('jarallax.min.css');
@import url('animate.min.css');

/*
 * Thanks to https://gwfh.mranftl.com/fonts/
 */

/* montserrat-100 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/montserrat-v30-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/montserrat-v30-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/montserrat-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/montserrat-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/montserrat-v30-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/montserrat-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --primary-color: #064F8D;
    --secondary-color: #cce5ff;
    --tertiary-color: #068C74;
    --header-drop-shadow-color: rgba(255,255,255,0.7);
}

html{
    scroll-behavior: smooth;
}

body {
    --bs-body-font-family: "Montserrat", sans-serif;
    --bs-body-font-weight: 400;
    --bs-body-font-size: 1.25rem;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

html.sr .reveal-on-scroll {
    visibility: hidden;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#preloader img {
    width: 25svh;
    height: auto;
}

.accordion {
    --bs-accordion-bg: var(--secondary-color);
    --bs-accordion-active-bg: var(--secondary-color);
    --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-button {
    font-size: var(--bs-body-font-size);
}

.icon {
    width: 2.5rem;
    height: 2.5rem;
}

.title {
    background-image: linear-gradient(45deg, var(--primary-color), var(--tertiary-color));
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 700;
}

.legal {
    font-size: 0.8rem;
}

.legal h3 {
    font-size: 1rem;
}

section {
    border-top: 5px solid white;
}

.container {
    background-color: var(--secondary-color);
}

.section-title {
    background-image: linear-gradient(45deg, white, var(--secondary-color));
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 700;
}

.section-title-background {
    background: var(--primary-color);
}

.card {
    --bs-card-bg: rgba(255, 255, 255, 0.9);
    transition: all 0.3s;
}

.card:hover {
    transform: scale(1.05);
    --bs-card-bg: white;
}

.glow {
    filter:
        drop-shadow(-1px -1px .4px var(--header-drop-shadow-color))
        drop-shadow(2px -1px .4px var(--header-drop-shadow-color))
        drop-shadow(2px 2px .4px var(--header-drop-shadow-color))
        drop-shadow(-1px 2px .4px var(--header-drop-shadow-color))
        drop-shadow(-1px 0px .4px var(--header-drop-shadow-color))
        drop-shadow(2px 0px .4px var(--header-drop-shadow-color))
        drop-shadow(0px -1px .4px var(--header-drop-shadow-color))
        drop-shadow(0px 2px .4px var(--header-drop-shadow-color))
    ;
}

header {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    color: white;
}

header a {
    text-decoration: none;
}

header a i {
    color: white;
}

header .header-container {
    position: relative;
}

header .logo,.slogan {
    width:30vh;
    height:auto;
}

header .navigate-arrow-down {
    position: absolute;
    bottom: 5vw;
    right: 5vw;
    width: auto;
    cursor: pointer;
}

.open-menu,.close-menu {
    position: fixed;
    right: 5vw;
    top: 5vw;
    width: auto;
    cursor: pointer;
}

.counter-unit {
    font-size: 0.8rem;
}

.menu {
    visibility: hidden;
    opacity: 0;
    position: relative;
}

.menu .navbar {
    display: none;
}

.menu .close-nav {
    display: none;
}

.menu .navbar ul li {
    text-align: right;
    background-color: var(--primary-color);
    border: 3px solid var(--secondary-color);
}

.menu .navbar-light .navbar-nav .nav-link {
    display: inline-block;
    background-image: linear-gradient(45deg, white, var(--secondary-color));
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    padding: 0.3svh 5svh;
    font-size: 3.5svh;
    font-weight: bolder;
    text-decoration: none;
}

.menu .navbar ul li {
    margin-bottom: 0.5svh;
}

.menu-open{
    -webkit-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    display: block;
    visibility: visible;
    overflow: hidden;
    position: fixed;
    opacity: 1;
}
.menu-open .navbar{
    padding-right: 0;
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 5vw;
}

.navigate-arrow-up {
    position: fixed;
    bottom: 5vw;
    right: 5vw;
    width: auto;
    cursor: pointer;
    display: none;
}

.crest {
    float: left;
    height: 6rem;
    width: auto;
    padding-right: 2rem;
}

.card-img-wrapper {
    position: relative;
    overflow: hidden;
}

.card-img-disabled {
    opacity: 0.4;
    filter: grayscale(100%);
}

.card-img-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    pointer-events: none;
}

.sold-out {
    text-decoration: line-through;
    opacity: 0.5;
    pointer-events: none;
}

.footer {
    background: url('../media/ox.svg') no-repeat center center var(--primary-color);
    background-size: contain;
}