:root {
    --primary: #262626;
    --primary-light: #3B3B3B;
    --voyager: #262464;
    --deltav: #ff4800;
    --volta-main: #eb5e24;
    --volta-secondary: #283747;

    --codeac-light: #4e7391;
    --codeac-mid: #2E4D6B;
    --codeac-dark: #0d2543;

    --cicta-purple: #7606cc;
    --cicta-purple-dark: #6305AB;
    --cicta-blue: #3506cc;
    --cicta-blue-dark: #270599;

    --logo-astra: /media/logos/astra.svg;
    --logo-voyager: /media/logos/voyager.svg;
    --logo-voyager-white: /media/logos/voyager_white.svg;
    --logo-voyager-black: /media/logos/voyager_black.svg;
    --logo-icarus-dbf25: /media/logos/icarus_dbf2025.png;
    --logo-deltav: /media/logos/deltav.svg;
    --logo-deltav-white: /media/logos/deltav_white.svg;
    --logo-codeac: /media/logos/codeac.svg;
    --logo-cicta: /media/logos/cicta.png;
}



/* ========== FONTS ========== */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/nunito-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/nunito-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ========== IDs ========== */
/* *----- Variables -----* */
#voyager {
    font-weight: bold;
    color: var(--voyager);
}
#deltav {
    font-weight: bold;
    color: var(--deltav);
}
#volta {
    font-weight: bold;
    color: var(--volta-main);
}



/* ========== CLASSES ========== */
/* Hero */
.hero.is-index {
  position: relative;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero.is-codeac {
    background-image: linear-gradient(141deg, var(--primary) 0%, var(--codeac-mid) 70%, var(--codeac-light) 100%);
}
.hero.is-cicta {
    background-image: linear-gradient(141deg, var(--primary) 0%, var(--cicta-blue) 50%, var(--cicta-purple) 70%);
}
.hero.is-volta {
    background-image: linear-gradient(141deg, var(--volta-main) 0%, var(--volta-secondary) 65%);
}


/* Styles */
/* Menu and tabs */
.menu-list a.is-active {
    background-color: var(--primary);
    color: #fff;
}
.tabs li.is-active a {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: bold;
}
.flag {
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    display: inline-block;
}


/* Fonts */
.is-caption {
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
}

/* Titles */
/* Check the sizes in the docs: https://bulma.io/documentation/helpers/typography-helpers/ */
h1.title {
    /* is-size-4 */
    font-size: 1.5rem;
}
h2.subtitle {
    /* is-size-5 */
    font-size: 1.25rem;
    font-weight: normal;
}

/* Frames */
.is-frame-centered {
    display: flex;
    justify-content: center;
}

/* 
===== TODO =====
- Organize this classes
*/
.is-customframe {
    width: 100%;
    height: 30rem;
    border-radius: var(--bulma-radius-large);
}
.is-customframe.is-doc {
    height: 25rem;
}
.is-customframe.is-hr {
    height: auto;
}
.is-customframe.is-vr {
    width: 75%;
    height: auto;
}


/* Sizes */
#model-size { height:350px }
#video-size { height:300px }

#is-size-logos_tiny { width: 4rem; }
#is-size-logos_small { width: 8rem; }
#is-size-logos_normal { width: 12rem; }
#is-size-logos_big { width: 14rem; }

.is-size-small {
    width: 75%;
}
.is-size-tiny {
    width: 50%;
}

.is-1x1 {
    width: 1rem;
    height: 1rem;
}


/* Misc */
.is-rounded {
    border-radius: var(--bulma-radius-large);
}
.is-circle {
    border-radius: var(--bulma-radius-rounded);
}


/* Slideshow */
#slideshow {
    display: flex;
    overflow: hidden;
    position: inherit;
}
#slideshow>div {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
}
#slideshow>div.active {
    opacity: 1;
}
.slideshow-normal{
    width: 30rem;
    height: 30rem;
}



/* ========== SCREEN SIZES ========== */
/* TABLET */
@media screen and (max-width: 1023px) {
    /* Custom */
    .is-customframe {
        height: 20rem;
    }
    .is-customframe.is-doc {
        height: 25rem;
    }
    .is-customframe.is-small {
        width: 75%;
    }
}



/* Mobile */
@media screen and (max-width: 768px) {
    /* Hero */
    .hero-video {
        display: none;
    }
    .hero.is-index {
        background: url('/media/logos/hero.webp') center / cover no-repeat;
    }


    /* Custom */
    .is-customframe {
        height: 20rem;
    }
    .is-customframe.is-doc {
        height: 25rem;
    }

    /* .is-customframe.is-hr {
        height: auto;
    }
    .is-customframe.is-vr {
        width: 75%;
        height: auto;
    } */


    /* Sizes */
    #video-size { width:100% }

    .is-size-small {
        width: 100%;
    }
    .is-size-tiny {
        width: 75%;
    }
    /* Override */
    .is-size-small-phone {
        width: 100%;
    }
    .is-size-tiny-phone {
        width: 75%;
    }
    .is-size-vtiny-phone {
        width: 50%;
    }


    /* Slideshow */
    .slideshow-normal{
        width: 20rem;
        height: 20rem;
    }
}