body {
    background-color: rgba(0,0,0,1);
    color: white;
}

footer {
    margin-bottom: 0;
    background-color: rgba(0,0,0,1);
    padding: 0.5%;
}

nav {
    background-color: #000000;
}

div.container {
    text-align: center;
}

a {
    color: darkgray;
    text-decoration: none;
}

a:hover {
    color: white;
    text-decoration: none;
}

.container{
    padding-bottom: 10vh;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
}

.title {
    width: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 2%;
    background-image: url('/img/abstract-gradient-art-4k-f5-1920x1080.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.title h1 {
    margin: 0;
}

.carousel {
    height: 97vh;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
}

.carouselIMG {
    height: 97vh;
    width: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: .5s ease;
}

.carouselIMG:hover {
    filter: grayscale(0%);
}

#carousel:hover #gallius img {
    filter: grayscale(0%);
}

.carousel-control-prev-icon:hover {
    opacity: 1;
}

.carousel-control-next-icon:hover {
    opacity: 1;
}

.carousel-item:hover .overlay {
    opacity: 1;
}

.carousel-item .overlay {
    position: absolute;
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    transition: 1s ease;
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.55);
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    padding: 3%;
}

.margin-fa-fa {
    margin-right: 1%;
    margin-left: 1%;
    color: lightgrey;
}

.margin-fa-fa:hover {
    color: white;
}

.intro {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
}

#pp {
    transition: .2s ease;
    width: 35%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
    border-radius: 50%;
}

#pp:hover {
    border-radius: 1%;
}

#skills img {
    width: 15%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    display: inline-block;
}

.overlay p {
    opacity: 100%;
    color: black;
}

.blockperso {
    margin: 5px;
    display: inline-block;
    width: 275px;
    border: 5px white solid;
    opacity: 0.9;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
}

.blockperso:hover {
    opacity: 1;
}

.blockperso img {
    width: 100%;
    height: auto;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
}

.blockperso > .desc {
    padding: 15px;
    text-align: center;
    background-color: white;
    color: black;
}

.nomargin {
    margin: 0;
}

.nopadding {
    padding: 0;
}

.parallax {
    margin: 0;
    background-image: url('/img/sound-wave-abstract-25-4k.jpg');
    height: 100%;
    min-height: 30vh;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

section {
    max-width:1100px;
    padding:0 24px;
} 

.blog-item{
    margin:40px auto;
    text-decoration:none;
    border:1px solid #eee;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}

#grid-articles {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px
}

#href-all-blogs {
    display:inline-block;
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:10px;
    margin-top:14px
}