styles.css

a{
    text-decoration: none;
    color: rgb(255, 255, 255);
}



#text3{
    position: absolute;
    top: 00px;
    
    width: 1px;
    height: 1px;
    
}














/* **************************************Body*********************************************************************************************/




body{

    background-image: url('fotos/background5.jpg');
    background-size: cover; 
    background-attachment: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    
    
    
}



/* **************************************INDEX.HTML***********************hola juanjo*****************************************************/

@keyframes car {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

    #car{
        animation-name: car;
        animation-duration: 0.8s;
        position: absolute;
        display: flex;
        top: 28.03vw;
        width: 16.73vw;
        left: 2.18vw;
        z-index: 1;
        transition: all 0.4s ease;
        
    
    
    }

    #T2 {
        position: absolute;
        display: flex;
        top: 10.78vw;
        left: 1.66vw;
        font-size: 1.93vw;
        width: 46vw;
        font-family: Merriweather;
        color: #000000;
        text-decoration: none;
        cursor: default;
        text-shadow: 0.17vw 0.17vw 0.33vw rgba(0, 0, 0, 0.3);
        background-color: rgb(198, 188, 188, 0.7);
        padding: 1.00vw 1vw 8.67vw 1.00vw;
        border-radius: 1.67vw;
        backdrop-filter: blur(3.33vw);
        transition: all 0.4s ease;
        

    
    }

    #text{
        position: absolute;
        display: flex;
        top: 17.67vw;
        left: 2.93vw;
        font-size: 1.38vw;
        width: 45.67vw;
        font-family: Paytone One;
        color: #000000;
        text-decoration: none;
        cursor: default;   
        transition: all 0.4s ease;     
    }

    .texth{
        
        animation-name: texth;
        animation-duration: 0.4s;
        animation-fill-mode: both;
    
    }
    

    @keyframes buy {
    from{
        transform: scale(0.91);
    }
    to{
        transform: scale(1);
    }
    
    }
    
    .buy{
    
        position: absolute;
        left: 23.00vw;
        top: 32.83vw;
        display: flex;
        gap: 3.33vw;
        font-size: 1.47vw;
        font-family: Paytone One;
        color: #000000;
        text-decoration: none;
        animation-name: buy;
        animation-duration: 0.4s;
        transition: all 0.4s ease;
        
        
    
    }
    #Buyn {
        transition: all 0.4s ease;
        background-color: #ff6347;
        width: 11.67vw;
        height: 5.00vw;
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-color: black;
        border-width: 0.12vw;
        border-style: solid;
        border-radius: 4.17vw;
        font-family: Paytone One;
        color: rgb(255, 255, 255);
        text-decoration: none;

        text-shadow: 
        0.05vw 0.05vw 0px #000000,
        -0.05vw -0.05vw 0px #000000,
        -0.05vw 0.05vw 0px #000000,
        0.05vw -0.05vw 0px #000000;

    
    }
    #Buyn:hover{
        transform: scale(1.03);
        color: rgb(0, 0, 0);
        background-color: rgba(255, 99, 71, 0);
    
    }
    
    #Contact {
    
        transition: all 0.4s ease;
        width: 11.67vw;
        height: 5.00vw;
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-width: 0.17vw;
        border-radius: 4.17vw;
        border-color: #000000;
        border-style: solid;
        background-color: rgba(255, 99, 71, 0);
        font-family: Paytone One;
        color: rgb(255, 99, 71);
        text-decoration: none;
    
    }
    #Contact:hover{
        transform: scale(1.03);
        background-color: rgb(0, 0, 0);
        color: white;
    }



    .container {
        animation: escola 0.4s;
        position: absolute;
        top: 13.75vw;
        left: 55.17vw;
        width: 36.67vw;
        height: 30.00vw;
        overflow: hidden;
        border-radius: 0.83vw;
        box-shadow: 0 0.33vw 1.25vw rgba(0, 0, 0, 0.3);
        transition: all 0.4s ease;
        
    }
    .container img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
    .container #img1 {
        animation: fadeInOut 20s infinite;
    }
    .container #img2 {
        animation: fadeInOut2 20s infinite;
    }
    
    @keyframes fadeInOut {  
        0% { opacity: 1; }
        5% { opacity: 1; }
        45% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 0; }
    }
    @keyframes fadeInOut2 {
        0% { opacity: 0; }
        50% { opacity: 0; }
        55% { opacity: 1; }
        95% { opacity: 1; }
        100% { opacity: 0; }
    }

    #escola{
        position: relative;
        width: 890px;
        left: 1050px;
        bottom: -40px;
        margin: -15px; 
        z-index: -1;
        clip-path: inset(-100px);
        filter: blur(0px); 
        border-radius: 10px; 
    
    }

    @keyframes escola{
        from{
            transform: scale(0.9);
        }
        to{
            transform: scale(1);

        }
    }


    
/* **************************************Credits.HTML*************************************************************************************/

@keyframes crepro {
    from{
        transform: translateX(-50px);
    }
    to{
        transform: translateX(0px);

    }
}

#gracies{
    animation: crepro 0.4s;
    position: absolute; 
    top: 9.6vw; 
    font-size: 3vw;
    font-family:
    Merriweather;
    left: 2.4vw; 
    color: black;
    transition: all 0.4s ease;

}
#textc{
    animation: crepro 0.4s;
    border-radius: 10px;
    background-color:rgba(255, 99, 71, 0.7);
    backdrop-filter: blur(10px); 
    padding: 1.3vw ; 
    text-align: justify;
    font-family:Merriweather;
    position: absolute; 
    top: 18vw;
    left: 4vw; 
    width: 60vw; 
    font-size: 1.6vw; 
    color: black;
    transition: background-color 0.4s ease, box-shadow 0.5s ease ;
    transition: all 0.4s ease;
}

#textc:hover{

    background-color:rgba(255, 99, 71, 0.887);
    box-shadow: 1px 1px 30px rgb(96, 94, 94);
}

/* **************************************Servei.HTML****************************************************************************************/

#t1s{

    animation: crepro 0.4s;
    position: absolute; 
    top: 9.6vw; 
    font-size: 3vw;
    font-family:
    Merriweather;
    left: 2.4vw; 
    color: black;
    transition: all 0.4s ease;

}
#texts{

    animation: crepro 0.4s;
    border-radius: 10px;
    background-color:rgba(255, 99, 71, 0.7);
    backdrop-filter: blur(10px); 
    padding: 1.3vw ; 
    text-align: justify;
    font-family:Merriweather;
    position: absolute; 
    top: 18vw;
    left: 4vw; 
    width: 60vw; 
    font-size: 1.6vw; 
    color: black;
    transition: background-color 0.4s ease, box-shadow 0.5s ease ;
    transition: all 0.4s ease;

}

#texts:hover{

    background-color:rgba(255, 99, 71, 0.887);
    box-shadow: 1px 1px 30px rgb(96, 94, 94);
}

/* **************************************about.HTML*****************************************************************************************/


@keyframes quisom {
    from{
        transform: translatey(20px)
        scale(1)
    }
    to{
        transform: translateY(0px)
        scale(1)
    }
}

@keyframes som {
from{
    transform: translateX(-100px);
}
to{
    transform: translateX(0px);
} 
}
.som{
    animation-name: som;
    animation-duration: 0.5s;
    
    font-family: Merriweather;
    position: absolute;
    top: 8.67vw;
    left: 2.67vw;
    font-size: 3.33vw;
    color: black;
    opacity: 0.7;
    transition: all 0.4s ease;
    
}

.som:hover{
    opacity: 1;
    transition: all 0.4s ease;
}

#texto {
    transition: all 0.4s ease;
    font-family: Merriweather;
    position: absolute;
    top: 19.93vw;
    left: 5.13vw;
    font-size: 1.40vw;
    color: black;
    width: 22.67vw;
}

.O:hover #texto{
    transform: translateY(-20px);
}

#textj{
    transition: all 0.4s ease;
    font-family: Merriweather;
    position: absolute;
    top: 19.93vw;
    left: 31.13vw;
    font-size: 1.40vw;
    color: black;
    width: 22.67vw;
}

.J:hover #textj{
    transform: translateY(-20px);
}


.O{
    transition: all 0.4s ease;
    animation-name: quisom;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}
.J{
    transition: all 0.4s ease;
    animation-name: quisom;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

#imgO {
    transition: all 0.4s ease;
    z-index: 10;
    position: absolute;
    top: 30.67vw;
    left: 4.83vw;
    border-radius: 10px;
    width: 12.3912vw;
    height: 12.8vw;
}

#imgJ{
    transition: all 0.4s ease;
    z-index: 10;
    position: absolute;
    top: 30.67vw;
    left: 31.23vw;
    border-radius: 10px;
    width: 12.3912vw;
    height: 12.8vw;

}

.O:hover #oriol{
    background-color: rgb(229, 181, 172, 086);
    transform: translateY(-20px);
    border-width: 2px;
    border-color: #000000;
    border-style: dashed;

}

.J:hover #jaume{
    background-color: rgb(229, 181, 172, 086);
    transform: translateY(-20px);
    border-width: 2px;
    border-color: #000000;
    border-style: dashed;

}
.O:hover #imgO{
    
    transform: translateY(-20px);
    transform: scale3d(1.1, 1.1, 1.1);

}

.J:hover #imgJ{
    
    transform: translateY(-20px);
    transform: scale3d(1.1, 1.1, 1.1);

}


#jaume {
    background-color: rgb(229, 181, 172, 0.6);
    padding: 0.53vw 6.67vw 23.33vw 0.53vw;
    font-family: Merriweather;
    position: absolute;
    top: 14.10vw;
    left: 30.23vw;
    font-size: 3.07vw;
    color: black;
    border-radius: 20px;
    transition: transform 0.4s ease;
    transition: all 0.4s ease;
}

#oriol{
    background-color: rgb(229, 181, 172, 0.6);
    padding: 0.53vw 8.67vw 23.33vw 0.53vw;
    font-family: Merriweather;
    position: absolute;
    top: 14.10vw;
    left: 4vw;
    font-size: 3.07vw;
    color: black;
    border-radius: 20px;
    transition: transform 0.4s ease;
    transition: all 0.4s ease;
}

@keyframes aio {
    from{
        transform: translateY(-40px);
    }
    to{
        transform: translateY(0px);
    }
}

#aio{
    animation-name: aio;
    animation-duration: 0.4s;
    border-radius: 1.6vw;
    position: absolute;
    left: 63.919vw;
    top: 26vh;
    transition: all 0.4s ease;
    z-index: 1;
    width: 31.3912vw;
    height: 25.8vw;
}

#aio:hover{
    opacity: 0.6;
    transition: opacity 20s ease;
}

#shreck{
    animation-name: aio;
    animation-duration: 0.4s;
    border-radius: 1.6vw;
    position: absolute;
    left: 63.919vw;
    top: 26vh;
    transition: all 0.4s ease;
    width: 31.3912vw;
    height: 25.8vw;
    z-index: 0;
}
/* **************************************pagament.HTML**************************************************************************************/
#imgp{
    width: 30vw; 
    border-radius: 20px; 
    position: absolute; 
    top: 18vw; 
    left: 5vw; 
    box-shadow: 5px 5px 10px grey;
    transition: all 0.4s ease;
}

#boardp{
    position: absolute;
    display: flex;
    top: 15.78vw;
    left: 39.66vw;
    font-size: 1.93vw;
    width: 46vw;
    font-family: Merriweather;
    color: #000000;
    text-decoration: none;
    cursor: default;
    text-shadow: 0.17vw 0.17vw 0.33vw rgba(0, 0, 0, 0.3);
    background-color: rgb(198, 188, 188, 0.5);
    padding: 1.00vw 0vw 15.67vw 0.00vw;
    border-radius: 1.67vw;
    backdrop-filter: blur(3.33vw);
    transition: all 0.4s ease;
}

@keyframes descp{
    from{
        transform: translateX(-400px);
        background-color: #ff63471e;
    }
    to{
        transform: translateX(0px);
        background-color: #ff6347;
    }
}

#descp{
    animation: descp 1s;
    padding: 0vw;
    margin: -9vw 37vw ;
    transition: all 0.4s ease;
    background-color: #ff6347;
    width: 21.67vw;
    height: 10.00vw;
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-color: black;
    border-width: 0.12vw;
    border-style: solid;
    border-radius: 4.17vw;
    font-family: Paytone One;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 3vw;

    text-shadow: 
    0.05vw 0.05vw 0px #000000,
    -0.05vw -0.05vw 0px #000000,
    -0.05vw 0.05vw 0px #000000,
    0.05vw -0.05vw 0px #000000;
    
}
#descp:hover{
    transform: scale(1.03);
    color: rgb(0, 0, 0);
    background-color: rgba(255, 99, 71, 0);
}


/* **************************************projecte.HTML**************************************************************************************/

#projectet1{
    animation: crepro 0.4s;
    position: absolute; 
    top: 9.6vw; 
    font-size: 3vw;
    font-family:
    Merriweather;
    left: 2.4vw; 
    color: black;
    transition: all 0.4s ease;
}

#textprojecte{
    animation: crepro 0.4s;
    border-radius: 10px;
    background-color:rgba(255, 99, 71, 0.7);
    backdrop-filter: blur(10px); 
    padding: 1.3vw ; 
    text-align: justify;
    font-family:Merriweather;
    position: absolute; 
    top: 18vw;
    left: 4vw; 
    width: 60vw; 
    font-size: 1.6vw; 
    color: black;
    transition: background-color 0.4s ease, box-shadow 0.5s ease ;
    transition: all 0.4s ease;

}

#textprojecte:hover{

    background-color:rgba(255, 99, 71, 0.887);
    box-shadow: 1px 1px 30px rgb(96, 94, 94);
}

div #project{
    left: 60px;
}

/* **************************************Headboard******************************************************************************************/

#tomato{
    opacity: 0.94;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    width: 100%;
    height: 8.93vw; 
    z-index: 1;
    border: #d64c34;
    border-width: 0.17vw; 
    border-color: #000000;
    border-style: solid;
    backdrop-filter: blur(3.33vw); 
    filter: blur(0.17vw); 
    transition: filter 0.4s ease, opacity 0.4s ease;
    transition: all 0.4s ease;
    
}


.banner:hover #tomato{
    filter: blur(1px);
    opacity: 1;
}



#logo{
    position: fixed;
    top: 76px;
    left: 590px;
    display: flex;
    width: 110px;

    
    opacity: 1;
    transition: all 0.4s ease;
  
}



#T1{
    z-index: 20;
    top: 0px; 
    left: 1.67vw;
    display: flex;
    position: fixed;
    font-size: 4.00vw;
    font-family: Playfair Display;
    color: #ffff;
    text-decoration: none;
    transition: transform 0.4s ease, text-shadow 0.4s ease;
    cursor: default;
    text-shadow: 0.17vw 0.17vw 0.33vw rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
    animation-name: t1;
    animation-duration: 0.5s;
    
    
    
}
#T1:hover{

    
    
    cursor:default;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    
}

@keyframes t1 {

    from{

        transform: translateX(-200px);
    }
    to{

        transform: translateX(0px);
    }
}
@keyframes texth {

    from{

        transform: translateX(-50px);
    }
    to{

        transform: translateX(0px);
    }
}

#ac{
    position: fixed;
    transition: all 0.4s ease;
    animation-name: t1;
    animation-duration: 0.5s;
    
    top: 2.47vw;
    width: 6.53vw;
    left: 33.20vw;
    z-index: 100;
    
    
}

#Tac{
    z-index: 200;
    top: 4.93vw;
    left: 38.50vw;
    animation-name: t1;
    animation-duration: 0.5s;
    position: fixed;
    font-size: 1.07vw;
    font-family: Playfair Display;
    color: #000000;
    text-decoration: none;
    transition: transform 0.4s ease, text-shadow 0.4s ease;
    cursor: default;
    text-shadow: 0.17vw 0.17vw 0.33vw rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
    
    
}
#Tac:hover{

    
    
    cursor:default;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    
}

@keyframes links{
    
    from{
        transform: translateY(-20px);
    }
    to{
        transform: translateY(0px);
    }
}

.links{
    transition: all 0.4s ease;
    animation-name: links;
    animation-duration: 0.4s;
    transition: transform 0.4s ease, filter 0.4s ease;
    position: fixed;
    left: 59.83vw;
    top: 5.30vw;
    display: flex;
    gap: 1.63vw;
    font-size: 1.37vw;
    font-family: Paytone One;
    color: rgb(22, 22, 92);
    text-decoration: none;
    z-index: 3;
    


}

#H:hover{
    transform: translateY(-5px);
    color: rgb(50, 49, 49);
}
#S:hover{
    transform: translateY(-5px);
    color: rgb(50, 49, 49);
}
#C:hover{
    transform: translateY(-5px);
    color: rgb(50, 49, 49);
}
#P:hover{
    transform: translateY(-5px);
    color: rgb(50, 49, 49);
}
#A:hover{
    transform: translateY(-5px);
    color: rgb(50, 49, 49);
}
#H{
    transition: transform 0.2s ease, filter 0.4s ease;
}
#S{
    transition: transform 0.2s ease, filter 0.4s ease;
}
#C{
    transition: transform 0.2s ease, filter 0.4s ease;
}
#P{
    transition: transform 0.2s ease, filter 0.4s ease;
}
#A{
    transition: transform 0.2s ease, filter 0.4s ease;
}
/* **************************************Bottomboard****************************************************************************************/


#blau {
    position: absolute;
    top: 47.50vw; 
    left: 0px; 
    display: flex;
    width: 100%;
    height: 6.50vw; 
    padding: 0;
    transition: all 0.4s ease;
    
}


#copy{
    position: absolute;
    display: flex;
    top: 48.00vw;
    left: 3.65vw;
    font-size: 1.0vw;
    width: 66.67vw;
    font-family: Paytone One;
    color: #fdfefe;
    text-decoration: none;
    cursor: default;
    transition: all 0.4s ease;
    
}