/* background  */

html, body {

}

/* slider media  */
@media screen and (min-width: 250px) {
    .slider {
        padding-top: 20%;
        width: 100%;
        margin: auto;
    }
}

@media screen and (min-width: 400px){
    .slider {
    padding-top: 10%;
    width: 100%;
    margin: auto;
    }
}

@media screen and (min-width: 800px) {
    .slider {
        padding-top: 10%;
        width: 60%;
        margin: auto;
    }
}


/* padding for various elements  */
.padding {
    padding-left: 3%;
    padding-right: 3%;
}

/* nerds add vaule  */
.col-8 {
text-align: center;
padding-top: 5%;
}

@media screen and (min-width: 250px) {
    .col-8 {
text-align: center;
padding: 20%;
    }
}

@media screen and (min-width: 400px) {
    .col-8 {
        text-align: center;
        padding: 30%;
    }
}

@media screen and (min-width: 800px) {
    .col-8 {
        text-align: center;
        padding: 6%;
    }
}

/* recent projects  */
.card.border-primary-subtle {

background-color: transparent;

}

.card.border-primary-subtle:hover {

background-color: rgb(51, 51, 56);

}

em {

color: red;

}

em:hover {

color: white;

} 

.card-text.text-been {

color: red;

}

.card-text.text-been:hover {
color: white;

}

/* new projects  */