@font-face {
    font-family: 'FreightBigPro';
    src: url('../media/fonts/FreightBigPro.ttf');
}
@font-face {
    font-family: 'FogtwoNo5';
    src: url('../media/fonts/FogtwoNo5.ttf') format('truetype');
}

@font-face {
    font-family: 'Mangoline';
    src: url('../media/fonts/Mangolaine/Mangolaine.ttf') format('truetype');
}

@font-face {
    font-family: 'Fonde';
    src: url('../media/fonts/Fonde/FontsFree-Net-fonde.ttf') format('truetype');
}

@font-face {
    font-family: 'Italiana';
    src: url('../media/fonts/Italiana/Italiana-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Shathika';
    src: url('../media/fonts/Shathika/Shathika.otf') format('truetype');
}

:root{
    --main-font:'FreightBigPro';
    --fuente-woNo5 : 'FogtwoNo5';
    --fuente-titulo: 'Mangoline', cursive;
    --fuente-paragraph: 'Lora', serif;
    --backgroundIntro: #bcbcbc70;
    --dropShadowSmooth: drop-shadow(7px 9px 31px rgba(119, 119, 119, 0.75));
    --backgroundSelects: #fff;
    --firstTextShadow: 3px 2px 6px rgba(0,0,0,0.37);
    --colorIntroText : #5b523e;
    --colorParagraph : #474747;
    --content-font:'Lora', serif;
    --lineColor: rgb(210, 142, 59);
    --lineText: white;
    --modal-background:rgb(255, 253, 243);
    --modal-border: 2px solid rgb(168, 143, 0);
    --nav-color : rgb(245, 245, 245);
    --nav-color-nav-links : rgb(196, 196, 196);
    --items-color: rgb(210, 142, 59);
    --text-shadow: 0px 2px 2px #fbfbfb;    
}



body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: url(../media/img/backgrounds/B3.jpg);
    background-size: cover;
    background-attachment: fixed;
}

/* TITLES */
h2{
    font-family: var(--fuente-titulo) ;
    text-align: center;
    font-size: 40px !important;
    font-weight: 500;
    color: var(--colorIntroText);
}

h3{
    font-family: var(--fuente-titulo) ;
    text-align: center;
    font-size: 34px;
    font-weight: 200;
    color: var(--colorIntroText);
}

p{
    font-size: 14px;
    font-family: var(--fuente-paragraph);
    color: var(--colorParagraph);
}

.title{
    color: var(--colorParagraph);
    font-family: var(--fuente-titulo) ;
}
.names span{
    color: var(--colorParagraph);
}

.single-p{
    color: var(--colorParagraph);
}

.tex-blue{
    color: rgb(31, 33, 176);
}

.subtitle{
    color: var(--colorIntroText);
    font-size: 18px;
    margin-top: 0px;
}


.countdown-container p{
    color:#fff !important
}

.nav{
    background-color: var(--nav-color);
}

.nav > .nav-links > a {
    color: var(--colorParagraph);
}

.icon-image{
    filter: invert(100%) !important;
}

footer{
    background-color:  var(--nav-color);
    border-top: solid 4px var(--lineColor) !important;
}

footer p a{
    color: rgb(84, 84, 221);
    text-decoration: none;
}
button{
    border: 1px solid var(--items-color);
    background-color: ghostwhite;
    color: var(--colorParagraph);
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
}



@media (max-width:896px) {
    .nav > .nav-links{
        background-color: var(--nav-color-nav-links);
    }
}