@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body, html{
    font-family:'Poppins', sans-serif; 

}



:root{
    --white: #ffffff;
    --purple: #46296E;
    --granate: #80475e;
    --blau: #33658a;
    --groc: #f6ae2d;
    --blauclar: #9fa4c4;
    --gris: #f1f1f3;
    --negre: #000000;
}


header{
    background-color: var(--purple);
    padding:100px 0px 25px 0px;
}

header .title{
    color: var(--white);
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}
header .subtitle{
    color: var(--white);
    width:75%;
    margin: 0 auto;
    text-align: center;
    font-weight: 300;
}

header .subtitle strong{
    font-weight: 700;
}

section{
    background-color: var(--gris);
    padding:25px 0px 50px 0px;
}

.primerCicle{
    background-color: var(--granate);
}

.segonCicle{
    background-color: var(--blau);
}

.batxillerat{
    background-color: var(--groc);
}

.ciclesfp{
    background-color: var(--blauclar);
}

.imatgeMatilda {
    width: 100%;
    object-fit: cover;
}

.qmark {
    font-size: 150px;
    justify-content: center;
    align-items: center;
    display: flex;
    border: 3px solid #000000;
    width: 100%;
}

.matResultat{
    position:relative;
}

.titleMatilda {
    text-align:center;
    background-color: var(--negre);
    color: var(--white);
    padding: 10px;
    width: 100%;
}

section p, section ul {
    margin-bottom: 0px;
    font-size:17px;
}

section ul li{
    margin-bottom:5px;
}

section h3 {
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    margin-top:50px;
    color: var(--white);
} 

.pistaCientifica{
    position:relative;
}

.pistaCientifica li{
    margin-bottom: 10px;
}

.pistaCientifica ol{
    margin-top: 20px;
    padding-right: 20px;
}

.modal-footer{
    justify-content:center;
}

.btn-success, .btn-success:focus{
    background-color: var(--blau);
    border-color: none;
}

.btn-success:hover{
    background-color:#33658aab; 
}

.modal-body ul li{
    font-size: 16px;
}

.btnPistes, .btnPistes:focus{
    height: 50px;
    background-color: var(--bs-gray-dark);
    border-color: var(--bs-gray-dark);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-66%, -50%);
    background-color: var(--bs-gray-dark);
    border:none;
}

.btnPistes:hover{
    background-color: #343a40ab;
}

footer{
    padding: 50px 0px;
    background-color: var(--negre);
    color: var(--white);
}

footer i{
    margin-right: 10px;
}

.footerInfo{
    margin-bottom:5px;
}

footer h5{
    margin-bottom: 30px;
    font-weight:800;
}

footer a{
    color: var(--white);
}

footer img{
    width:100px;
}
.linksForms {
    display: flex;
    justify-content: center;
  }

.linkParticipa {
    background-color: var(--white);
    border-radius: 6px;
    padding: 15px 30px;
    display: inline-block;
    margin: 40px auto 0px auto;
    text-decoration: none;
    color: var(--purple);
    border:2px solid var(--white);
    transition: 0.5s;
    font-weight: 700;
}

.linkParticipa:hover, .linksForm:hover{
    background-color: var(--purple);
    color: var(--white);
}

.linksFormDisabled{
    background-color: var(--purple);
    color: var(--white);
    pointer-events: none;
  cursor: default;

    border-radius: 6px;
    padding: 15px 30px;
    display: inline-block;
    margin: 40px 10px 0px 10px;
    text-decoration: none;
    border:2px solid var(--white);
    transition: 0.5s;
    font-weight: 700;
}

.linksForm{
    background-color: var(--white);
    border-radius: 6px;
    padding: 15px 30px;
    display: inline-block;
    margin: 40px 10px 0px 10px;
    text-decoration: none;
    color: var(--purple);
    border:2px solid var(--white);
    transition: 0.5s;
    font-weight: 700;
}


.pictos{
    display: flex;
    flex-direction: row;
    margin-top:80px;
    overflow: hidden;

}

.pictos i {
    margin-right: 35px;
    font-size: 20px;
    color: var(--white);
    opacity: 0;
    transition: 1s;
    animation-fill-mode: forwards;
    animation-name: animacio;
    animation-duration: 6s;

}

.fa-atom{ 
    animation-delay: 0s;
}

.fa-at{
    animation-delay: 0.1s;
}

.fa-bacterium{
    animation-delay: 0.2s;
}

.fa-bong{
    animation-delay: 0.3s;
}

.fa-brain{
    animation-delay: 0.4s;
}

.fa-chart-bar{
    animation-delay: 0.5s;
}

.fa-code{
    animation-delay: 0.6s;
}

.fa-drafting-compass{
    animation-delay: 0.7s;
}

.fa-vial{
    animation-delay: 0.8s;
}

.fa-wrench{
    animation-delay: 0.9s;
}

.fa-microscope{
    animation-delay: 1.0s;
}

.fa-seedling{
    animation-delay: 1.1s;
}


.fa-globe-americas{
    animation-delay: 1.2s;
}

.fa-calculator{
    animation-delay: 1.3s;
}

.fa-square-root-alt{
    animation-delay: 1.4s;
}

.fa-stethoscope{
    animation-delay: 1.5s;
}


.fa-temperature-high{
    animation-delay: 1.6s;
}

.fa-desktop{
    animation-delay: 1.7s;
}

.fa-microchip{
    animation-delay: 1.8s;
}

.fa-recycle{
    animation-delay: 1.9s;
}

.fa-superscript{
    animation-delay: 2s;
}

.fa-book-open{
    animation-delay: 2.1s;
}

.fa-broadcast-tower{
    animation-delay: 2.2s;
}

.fa-capsules{
    animation-delay: 2.3s;
}

.fa-chart-pie{
    animation-delay: 2.4s;
}

.fa-cogs{
    animation-delay: 2.5s;
}

.fa-fan{
    animation-delay: 2.6s;
}

p  a{
    color: var(--purple);
    text-decoration: none;
}

@keyframes animacio {
    0% {
        opacity:0;
      transform: translate(5px, 0px);
    }


    100% {
        opacity:0.7;
        transform: translate(5px, 0px);
    }
    
  
    

  }


  @media only screen and (max-width: 600px) {
    section h3 {
      text-align:center;
    }

    .pistaCientifica {
        position: relative;
        text-align: center;
    }

    section .row .col-12{
        margin-bottom: 50px;
        text-align: center;
    }

    .btnPistes{
        transform: translate(-50%, -50%);
    }

    .linksForms {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }
  }