body{
    background-color: rgba(25, 25, 39);
    color: rgba(212, 212, 216);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn-lg {
    font-family: "Poppins", sans-serif;
}
h1{
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

#welcome{
    width: 100%;
    height: calc(100vh - 56px);
    padding-top: 3em;
    padding-bottom: 3em;
    position: relative;
}

#welcomeTitle{
    z-index: 10;
}

.masonry {
    /* Default is mobile */
    column-count: 1;
    column-gap: 1rem;
}

/* tablette + PC */
@media (min-width: 768px) {
    .masonry {
        column-count: 2;
    }
}
.masonry .card {
    break-inside: avoid;
    margin-bottom: 1rem;
}


video{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
}

#welcome main{
    background-color: rgba(0,0,0,0.75);
    box-shadow: 0 0 10px black;
}

#apps{
    padding-top: 2em;
    padding-bottom: 2em;
    background-color: rgba(123, 123, 214, 0.158);
    z-index: 10;
}

.description, .description ul li{
    font-size: 0.8em;
}

.card {
    position: relative;
}
.card .header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    height: 36px;
    padding-top: 4px;
    padding-left: 4px;
}

#about{
    padding-top: 2em;
    z-index: 10;

}

#legalModal, #legalModal a{
    color: #ccc;
}

a[target="_blank"]::after{
    content: "\F1C5";
    font-family: 'Bootstrap-icons';
    display: inline;
    color: #555;
}

a[target="_blank"].btn::after{
    color: var(--bs-btn-color);
}


div.showcase{
    background-image: var(--img);
    width: 100%;
    height: 12em;
    background-position: top center;
    background-attachment: scroll;
    background-size: cover;
}