/* body
{
    background-image: url("./Images/Aventador1.jpg");
    background-attachment: fixed;
    margin-top: 60px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} 
*/


#Menu {
    background-color: rgba(0, 0, 0, 0.9);
    height: 4em;
}

.cardcenter
{
    width: 28rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.custom-btn {
}

/* Fait un effet au scroll */
.Parallax{
    width: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    margin-top: -5em;
}

@media screen and (max-width: 975px) {
    .Parallax {
        width: 150%;
        position: fixed;
        top: 0;
        z-index: -1;

    }
}

@media screen and (max-width: 638px) {
    .Parallax {
        width: 190%;
        position: center;
        top: -20px;
        z-index: -1;

    }
}


@media screen and (max-width: 500px) {
    .Parallax {
        width: 330%;
        position: fixed;
        top: 0px;
        left: -13em;
        z-index: -1;

    }
}



/* Change la couleur au survol */

.custom-btn:hover {
    background-color: gold;
}

.custom-card:hover {
    border: 2px solid yellow;
    transition: border 0.3s ease; 
}

#menu_buger {
    position: absolute;
    top: 5%;
    left: 80%;
}

#competences-content {
    height: 45em;
}

/* positionnement des logo */


#entete {
    margin: 20%;
    color: white;
    text-align: center;
    font-size: 2em;
}

#entete_1 {
    font-size: 2em;
}

.body_competence {
    background-image: url(./Images/LogosCompétences/spavirage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

.typed {
    font-size: 2em;
}

#css{
    position: absolute;
    left: 10px;
    top: -55px;
    height: 70px;
}

#figma{
    position: absolute;
    left: 10px;
    top: -55px;
    height: 70px;
}

#html{
    position: absolute;
    left: 10px;
    top: -55px;
    height: 70px;
}

#php{
    position: absolute;
    left: 10px;
    top: -55px;
    height: 45px;
}

#js{
    position: absolute;
    left: 10px;
    top: -55px;
    height: 70px;
}

#symf{
    position: absolute;
    left: 10px;
    top: -55px;
    height: 70px;
}



section {
    margin-top: 5%;
}

/* media query */

/* Fait disparaitre mes boutons quand je passe en dessous de 540px de large */
@media screen and (max-width: 540px) {
    
    #header {
        display: none;
    }

    .cardcenter {

        height: 15em;
        width: 20em;
    }

    .cardcenter img {

        height: 15em;
        width: 20em;
    }
}

@media screen and (max-width: 350px){ 

    .cardcenter {
        height: 10em;
        width: 15em;
    }

    .cardcenter img {
        height: 10em;
        width: 15em;
    }
}

/* Fait disparaitre mon menu Burger quand mon ecran dépasse 540px de large */
@media screen and (min-width: 540px)
{
    #menu_buger{
        display: none;
    }
}

/* J'ai fais cette classe pour cacher tout mes liens grace au Display: none et qui me sert aussi dans mon js  */
.hiddendiv {
    display: none;
}

.animationBox{
    transform: scale(1.3);
    z-index: 2;
    box-shadow: 2px 2px 2px #000;
}

/* competence */
.competence {
    margin-bottom: 10px;
}

.competence img {
    width: 80%; 
    height: auto;
    display: block;
    margin: 0 auto;
}



/* formulaire */

.input-group {
    margin-top: 1.5em;
    font-size: 1.25rem;
    position: relative;
    --primary: rgb(0, 0, 0);
}

.input {
    all: unset;
    color: #ffffff; 
    padding: 1rem;
    border: 1px solid #ffffff;
    border-radius: 10px;
    transition: 150ms
        cubic-bezier(0.4, 0, 0.2, 1);
    }

.label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: rgb(255, 255, 255);
    pointer-events: none;
    transition: 150ms
        cubic-bezier(0.4, 0, 0.2, 1);
}

.input:focus {

    border: 1px solid
    var(--primary);
}

.input:is(:focus, :valid) ~ label {

    transform: 
        translateY(-120%)
        scale(0.7); 
    background-color: hsl(0, 0%, 100%);
    padding-inline: 0.3rem;
    color: var(--primary);
}

.textarea {
    height: 10em;
}

#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.bg_modal {

    background-image: url(./Images/ferarrijente.png);
    background-size: cover;
    background-repeat: no-repeat;
}