#main_wrapper {
    background-image: url(img/DeepSpace2.gif);
}
.dropdown-item {
    color :#0d6efd;
}
.text-primary {
    color: #7A82F0 !important;
}
.text-secondary {
    color: #4426EE !important;
}
.bg-dark {
    background-color: black !important;
}
.fondTitre {
    background-image: url(img/textureTitre2.png);
    border-radius: 50px;
    display: inline-block;
    width: 50%;
}
li {
    list-style: none;
}
/* Modal input valid visual */
input:valid {
    border: solid 2px greenyellow;
}
input:invalid {
    background-color: rgb(255,0,0,0.5);
}

/* shaking modal animation  */
.shakeItUp {
    animation : shakeIt 0.5s ease-in-out;
}
@keyframes shakeIt {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
} 



@media screen and (min-width: 1200px) {
    #carouselStarTrek {
        width: 50%;
    }
    #intro {
        width: 50%;
    }
    #intro>p {
        width: 82%;
    }
    #ship>div>img, #ship>img {
        width: 40%;
    }
    h3 {
        font-size: 3rem;
    }
    #scott>img, #uhura>img, #trio>div>img {
        width: 600px;
    } 
    #scott>div>p, #scott>div>h4 {
        width: 80%;
    }
    #uhura>div>p, #uhura>div>h4 {
        width: 80%;
    }
    #sulu_tchekov>img {
        width: 60%;
    }
    #kirk>div>p, #kirk>div>h4 {
        width: 80%;
    }
    #spock>div>p, #spock>div>h4 {
        width: 80%;
    }
    #mccoy>div>p, #mccoy>div>h4 {
        width: 80%;
    }
    section>p {
        width: 75%;
    }
    #scope>img {
        width: 30%;
    }
    #scope>img:first-of-type {
        width: 50%;
    }
    #scope>p>img {
        width: 30%;
    }
}
@media screen and (min-width: 768px) {
    #main_wrapper>div:first-of-type {
    padding-top: 5rem;
    }
    h3 {
        font-size: 2rem;
    }
    #modalBtn {
        position: absolute; 
        left: 10px; 
        top: 10%;
    }
}
@media screen and (min-width: 992px) {
    #footerImg {
        height: 67px;
    }
}
@media screen and (max-width: 992px) {
    #footerImg {
        height: 67px;
    }
    #bgModal {
        background-position: center;
    }
}