: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;
}



/* ========== 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 {
    background: url('/media/logos/astragif.gif') no-repeat center;
    background-size: cover;
}
.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;
}


/* 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%;
}


/* 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 {
    position: absolute;
}
.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) {


    /* 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;
    }
}