* {
    margin: 0;
    padding: 0;
    font-family: "Outfit", "Quicksand", sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #030637;
    overflow-x: hidden;
}

.headerUpper {
    width: 100vw;
    height: 5vh;
    display: flex;
    align-items: start;
    justify-content: center;
    margin-bottom: 2rem;
}

.headerUpper span {
    font-size: 1.3rem;
    color: white;
}

.headerUpper span:first-child, .headerUpper span:last-child {
    color: #C80036;
    font-size: 1.5rem;
}

.lineHCut {
    width: 100vw;
    height: 0.1rem;
    background-color: white;
}

.veilleContainer {
    width: 100vw;
    height: 1500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.veilleContainer .veilleTitle {
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.veilleContainer .veilleTitle span {
    font-size: 1.5rem;
    color: white;
}

.veilleContainer .veilleTitle span:first-child, .veilleContainer .veilleTitle span:last-child {
    color: #C80036;
    font-size: 2.3rem;
}

.veilleContainer .veilleGrid {
    width: 80%;
    height: 90%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
    justify-items: center;
    gap: 1rem;
}

.veilleContainer .veilleGrid .gridItem {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: rgba(175, 174, 174, 0.281);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.veilleGrid .gridItem:hover{
    transform: translate(-0.25rem,-0.25rem);
    transition: 0.2s;
    border-radius: 15px;
    border: #C80036 0.2rem solid;
    background-color: rgba(34, 34, 34, 0.671);
    cursor: pointer;
}

.veilleGrid .gridItem a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}


.veilleGrid .gridItem img{
    object-fit: contain;
    width: 75%;
    height: 75%;
    border-radius: 15px;
}

.gridItem .textOverlay {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.1rem;
    text-align: center;
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gridItem:hover .textOverlay {
    opacity: 1;
    visibility: visible;
}

.articleDate{
    color: #C80036;
}

.articleSummary{
    font-size: 1rem;
}

.articleSource{
    color: #C80036;
}

.textOverlay b{
    color: white;
}




.veilleContainer .moreOver{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10%;
}

.moreOver a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    text-decoration: none;
    width: 20%;
    height: 50%;
    border-radius: 15px;
    background-color: rgba(175, 174, 174, 0.281);
}


.moreOver a:hover{
    background-color: rgba(34, 34, 34, 0.671);
    border: #C80036 0.2rem solid;
    cursor: pointer;
}

.moreOver a span:first-child, .moreOver a span:last-child {
    color: #C80036;
    font-size: 2.3rem;
}



/*                                                                   MEDIA                                                   */

@media (max-width: 320px) {

}
@media (max-width: 480px) {



}

@media (max-width: 768px) {



}
@media (max-width: 1024px) {




}
@media (min-width: 1025px) {




}
@media (min-width: 1440px) {

    
}