.nav-bar {
    margin-top: 20px;
    margin-bottom: 20px;
}

article {
    padding-right: 10px;
}

position: relative;
padding-bottom: 56.25%;

/* - 16:9 aspect ratio (most common) */
/* padding-bottom: 62.5%; - 16:10 aspect ratio */
/* padding-bottom: 75%; - 4:3 aspect ratio */
padding-top: 30px;
height: 0;
overflow: hidden;

.felette {
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);

    /* display: none */
    opacity: 0.5;
}

img.hover:hover {
    opacity: 0.5;
}

img.keretes_1 {
    border-radius: 5px;
    border: 3px solid #69074b;
}

div.keretes_1 {
    border-radius: 5px;
    border: 3px solid #69074b;
}

video.keretes_1 {
    border-radius: 5px;
    border: 3px solid #69074b;
}

body {
    font-family: 'Sora', sans-serif;

}

.modal {
    backdrop-filter: blur(15px) contrast(100%) brightness(100%) saturate(100%);
    -webkit-backdrop-filter: blur(15px) contrast(100%) brightness(100%) saturate(100%);
}