@config 'tailwind.config.js';

body{
    font-family: 'Esgrima', Arial, sans-serif;
    background-color: black;
}

.bgtitle{
    @apply: bg-gray-900;
    background-image: url("/images/415831.jpg");
    background-attachment: fixed;
    /*background-size: cover;*/
}
.text_aurebesh{
    font-family: 'Aurebesh', Arial, sans-serif;
    text-shadow: #efe3d1 1px 0 5px;
}
.text_esgrima{
    font-family: 'Esgrima', Arial, sans-serif;
}

.row-higlight {
    @apply: border-left-4;
    @apply: border-yellow-500;
    background-color:yellow;
}

.header li{
    @apply: text-yellow-700;
    @apply: bg-gray-900;
    @apply: shadow-lg;
    /*text-shadow: #efe3d1 1px 0 5px;*/
    font-family: Arial, sans-serif;

}
.header li{
    transition: font-family ease-out .2s;
    text-transform: uppercase;

}
.header li:hover{
    @apply: text-yellow-500;
    font-family: 'Aurebesh', Arial, sans-serif;

}

.section-holocron {
    /*clip-path: polygon(20% 5%, 30% 0, 100% 0, 100% 95%, 65% 95%, 60% 100%, 0 100%, 0 5%);*/
}

.section-sable {
    clip-path: polygon(20% 5%, 30% 0, 100% 0, 100% 95%, 65% 95%, 60% 100%, 0 100%, 0 5%);
}

.section-noticias{
    /*clip-path: polygon(0 3%, 100% 0, 100% 100%, 0% 100%);*/
    background-image: url("/images/banner2.jpeg");
    background-attachment: fixed;
    background-size: cover;
}


.ribbon-2 {
    --f: 10px; /* control the folded part*/
    --r: 15px; /* control the ribbon shape */
    --t: 10px; /* the top offset */

    position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path:
        polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
        calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
        var(--r) calc(50% - var(--f)/2));
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}


.box {
    max-width:500px;
    height:200px;
    margin:50px auto 0;
    background:lightblue;
    position:relative;
}

.box-mision .pestana{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 51%, 0 45%);
    /*clip-path: polygon(0 0, 100% 0, 100% 62%, 0 56%);*/
}
.box-mision .mision-bg{
    background-image: url("/images/UI/dark-grey-slate.avif");
    /*background-attachment: fixed;*/
    background-size: auto;
    @apply: opacity-90;
}
.box-mision h1{
    color : #efe3d1;
    font-size : 2rem;
}