html {
    font-family: 'Montserrat', Arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif,cursive;
    font-size: 16px;
}
body {
    background-image: url('../images/geometric.jpg') !important;
    background-size: content-box !important;
    background-color: #6b9dec;
    overflow-x: hidden;
    overflow-y: visible !important;
    font-weight: 600 !important;
}

/**COLOR*******************************************/

.nav-link {
    color: rgb(33, 37, 41) !important;
}

/**BACKGROUND COLOR********************************/

header, footer {
    background-color: rgb(250, 243, 221, 0.87);
}

.btn_footer {
    background-color: rgb(250, 243, 221);
    color: darkblue;
    border: 1px solid darkblue;
}

/**CARD********************************************/

.card, .card ul li, #chrono {
    box-shadow: 0 0 5px 0 rgb(230, 224, 224);
    background-color: rgb(207, 214, 236);
    border: none;
}

/**HOVER*******************************************/

footer .social_link img:hover{
    height: 44px;
    width: 44px;
    transition-duration: 200ms;
}
.professional_link h5:hover {
    color: rgb(207, 214, 236);
    background-color: rgb(33, 37, 41,0.7);
    
}
.btn_footer:hover {
    color: rgb(250, 243, 221, 0.9);
    background-color: darkblue;
}

/**CHRONOLOGIE************************************/

#chrono .chrono_item {
    border-top: 3px solid;
    border-image: linear-gradient(to right, #214d8a 0%, #5fb0d7 100%);
    border-image-slice: 1;
    border-width: 3px;
    margin: 0;
    padding: 40px;
}
/*even number borders*/
#chrono .chrono_item:nth-child(even) {
    border-right: 3px solid;
    padding-left: 0;
}
/*odd number borders*/
#chrono .chrono_item:nth-child(odd) {
    border-left: 3px solid;
    padding-right: 0;
}
/*handle first and last*/
#chrono .chrono_item:first-child {
    border-top: 0;
    border-top-right-radius:0;
    border-top-left-radius:0;
}
#chrono .chrono_item:last-child {
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
}

/**IMAGE SIZE**************************************/

.img_gen {
    height: 96px;
    width: 128px;
}
footer .social_link {
    height: 44px;
    width: 44px;
}

.img_14 {
    height: 14px;
    width: 14px;
}
.img_16 {
    height: 16px;
    width: 16px;
}
.img_20 {
    height: 20px;
    width: 20px;
}
.img_32 {
    height: 32px;
    width: 32px;
}
.img_64 {
    height: 64px;
    width: 64px;
}
.img_96 {
    height: 96px;
    width: 96px;
}
.img_128 {
    height: 128px;
    width: 128px;
}
.img_fix {
    height: 200px;
    width: 200px;
}

/**WELCOME PAGE************************************/

#welcome_div p {
    color: wheat;
    font-size: large;
}
#btn_play, #btn_enter {
    color: darkblue;
    background-color: wheat;
}

/**ANIMATION***************************************/

@media screen and (min-width: 992px) {
    #welcome_text {
        animation: 1.3s anim_text;
    }
    @keyframes anim_text {
        from {
            margin-right: 100%;
            width: 50%;
        }
        to {
            margin-right: 0%;
            width: 50%;
        }
    }
}
@media screen and (min-width: 992px) {
    #welcome_btn {
        animation: 2s anim_btn;
    }
    @keyframes anim_btn {
        from {
            margin-bottom: 100%;
            width: 50%;
            font-size: 700%;
        }
        to {
            margin-bottom: 0%;
            width: 50%;
            font-size: 100%;
        }
    }
}

@media screen and (max-width: 992px) {
    #welcome_text {
        animation: 1.3s anim_text;
    }
    @keyframes anim_text {
        from {
            margin-right: 100%;
            width: 100%;
        }
        to {
            margin-right: 0%;
            width: 100%;
        }
    }
}
@media screen and (max-width: 992px) {
    #welcome_btn {
        animation: 2s anim_btn;
    }
    @keyframes anim_btn {
        from {
            margin-bottom: 100%;
            width: 100%;
            font-size: 700%;
        }
        to {
            margin-bottom: 0%;
            width: 100%;
            font-size: 100%;
        }
    }
}